1. 打开VSCode
1. 下载vetur插件
该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行, ![在这里插入图片描述](https://img-blog.csdnimg.cn/3c88ff5795354cef8bc8525a2dcd7e37.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MTY3NA==,size_16,color_FFFFFF,t_70) 装好后 点击文件->首选项->设置 ->打开设置 界面,在设置界面右侧添加配置。
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/efa084c64e894e1d85f007fb037b1685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MTY3NA==,size_16,color_FFFFFF,t_70)
2. 下载eslint插件
它是一款智能错误检测插件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/9f1f0e8b2b0340c485a97acf0210f283.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MTY3NA==,size_16,color_FFFFFF,t_70) 在同vetur插件一样的地方进行配置
"eslint.validate": [
"javascript",
"gavesciptreact",
"html",
"vue"
],
"eslint.options": {
"plugins":["html"]
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/73f02484400140b89d2dc890af741b77.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MTY3NA==,size_16,color_FFFFFF,t_70)
3. Auto Close Tag 自动闭合HTML/XML标签
![在这里插入图片描述](https://img-blog.csdnimg.cn/4d21adc1a7544306b7d2ae78975ce5f8.png)
4. Auto Rename Tag 自动完成另一侧标签的同步修改
![在这里插入图片描述](https://img-blog.csdnimg.cn/4da7d9f9517d40b58fc604ed94cfceee.png)
4. Debugger for Chrome
映射vscode上的断点到chrome上,方便调试 ![在这里插入图片描述](https://img-blog.csdnimg.cn/342b3e46b5ae4da79e6215b6f87d73e6.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MTY3NA==,size_16,color_FFFFFF,t_70)
2. 打开vue项目
在终端输入:npm install ,先下载对应的依赖。
但是报错了!! ![在这里插入图片描述](https://img-blog.csdnimg.cn/3899e94f009f4e75b0f80adcd91e9abf.png) 原因:此类原因是虽然在全局下安装了,但是可能vscode的终端模式是powershell模式,点击右面的+号,选择Command Prompt 模式, 我们就可以看到powershell转化为cmd 执行
VSCode使用管理员身份打开!!!就可以了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b7d154722b2747518071b2d054e99295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MTY3NA==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/d11d0bcfee754efcafbca2cc555b7018.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MTY3NA==,size_16,color_FFFFFF,t_70)
然后输入:npm start ,或者npm run dev 运行项目: ![在这里插入图片描述](https://img-blog.csdnimg.cn/c5da033fb5d4439ba7c4ce17a6d443a9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MTY3NA==,size_16,color_FFFFFF,t_70)
|