一、VS code 下载安装
1、下载网址:https://code.visualstudio.com/Download
2、下载后安装
3、运行VS Code
4、安装中文插件
键盘按快捷键Ctrl+Shift+P,界面上就会出现一个命令行输入框,输入Configure Display Language(配置显示语言)
完成后重启vscode, vscode 汉化完成
二、Node.js 下载安装
1、下载网址:https://nodejs.org/en/
下载推荐的版本18.14.0 LTS
2、下载后安装
3、编辑环境变量path
(1)在node安装目录创建node_global和node_cache文件夹
(2)“环境变量” -> “系统变量”:编辑系统变量里的Path,将相应的路径新增如下:C:\vue\node-v16.18.0-win-x64\node_global(这是我电脑上的,请使用自己的安装目录)
(3)系统变量设置:添加变量 NODE_PATH 值为:D:\Program Files\nodejs\node_modules
node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。
(4)查看node版本
node -v
三、开发第一个Vue项目
1、创建项目
npm config set registry https://registry.npm.taobao.org/
npm init vue@latest
生成如下项目文件结构
2、安装依赖
cd .\vue-project-1\
npm install
3、运行项目
npm run dev
4、浏览器中查看
四、安装插件
1、volar
用于为.vue单文件组件提供代码高亮以及语法支持。
2、Vite
是一种新型前端构建工具,能够显著提升前端开发体验。
3、Vue VSCode Snippets
Vue VSCode Snippets 插件旨在为开发者提供最简单快速的生成 Vue 代码片段的方法,通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。简直是 Vue3 开发必备神器。
(1)输入vfor快速生成 v-for指令模版
4、 Auto Close Tag
Auto Close Tag 插件是一个很好用的 VS Code 扩展,它对生产率有很大影响。顾名思义,当我们在结束标记中键入结束括号时,它将添加结束标记。它支持HTML,Handlebars,XML,PHP,Vue,JavaScript,Typescript,JSX等。
5、Vue Peek
Vue Peek 插件用来拓展 Vue 代码编辑的体验,可以让我们快速跳转到组件、模块定义的文件。
右键组件标签,跳转到组件定义的文件
6、Vue Theme
Vue Theme 插件提供了不错的 Vue 主题,还支持配置不同颜色。