vscode+vue前端构建

604 阅读1分钟

IDE

采用vscode,直接安装VSCodeUserSetup-x64-1.56.0.exe即可。安装包下载地址(code.visualstudio.com)

  • vscode汉化 点击左侧菜单栏最底下的四方形按钮打开扩展程序界面,在输入框内输入Chinese并找到【Chinese (Simplified) Language Pack for Visual Studio Code】这个插件。在这个插件的详细界面点击【Install】按钮进行安装。

image.png

安装完成后按快捷键【CTRL+SHILF+P】打开命令面板并输入【config】后找到【Configure Display Language】选项并点击。

image.png 在接下来的二级菜单选择【zh-cn】 image.png 此时编辑器会弹出个访问窗口是否要重启编辑器生效语言的修改,点击【restart】按钮重新启动编辑器。 image.png 重启编辑器后就汉化成中文成功了。 image.png

nodejs

直接安装node-v14.16.1-x64.msi即可。下载地址:(nodejs.cn/download)

构建vue项目

D:>npm init @vitejs/app

QQ截图20210513153305.png

vscode 导入 vue

打开vscode,点击File->Open Folder->选择项目目录

QQ截图20210513150139.png

启动项目

在vscode中打开命令终端Ctrl+·

PS D:\hello> npm install --registry=registry.npm.taobao.org

PS D:\hello> npm run dev

QQ截图20210513153500.png

访问项目

http://localhost:3001/