由于最近要使用的项目框架为前后端分离的，采用的是 vue.js+webAPI 的形式进行开发的。因为之前我没有接触过 vue.js，也只是通过视频文档做了一些简单的练习。今天技术主管说让大家熟悉下 VSCode 开发 vue，所以自己摸索了好久，才算是把简单的项目配置成功了。后续还得自己多了解这方面的知识。想着怕时间长了自己会忘记，所以写下来也供有需要的人一起学习。

一. 配置环境

1.1 下载VSCode, 官网直接下载就行。

1.2 汉化 VSCode

Ctrl+Shift+P 输入 "configure display language" 然后点击确定后，修改 locale.json 文件下的属性 "locale" 为 "zh-CN". 重启 VSCode 工具

若重启后 VSCode 仍为英文版，在商店中搜索 Chinese 安装中文插件，再重新启动 VSCode 即可.

1.3 安装 vue 插件 vetur，实现支持 vue 文件的代码高亮

安装插件：ctrl+Shift+X 在商店中查找 vetur 或者  Ctrl + P 然后输入 ext install vetur 然后回车点安装即可 

然后在文件 -> 首选项 -> 设置 找到用户设置，点开 userSettings 添加如下的设置

"emmet.syntaxProfiles": {"vue-html":"html","vue":"html"
}

1.4 安装 ESLint 插件

安装插件：ctrl+Shift+X 在商店中查找 eslint 或者  Ctrl + P 然后输入 ext install eslint 然后回车点安装即可 

同样的需要在配置文件中添加如下设置信息：

"javascript","javascriptreact","html","vue" ],"eslint.options": {"plugins": ["html"]
},</span></pre>

最终的配置信息如下所示：

二. 创建一个 vue 项目

2.1 使用快捷键 Ctrl+~ 打开终端，输入命令行 vue init webpack yourProjectName , 其中 yourProjectName 为你的项目名称，这里我创建的是 helloworld.

接下来根据提示进行操作

安装完毕后 运行 npm run dev 会出现访问地址：http://localhost:8080

在安装过程中可能会出现 ‘webpack-dev-server’不是内部或外部指令的错误 这是因为在上一步的操作中，我们选择了 NO，自己手动注入依赖文件，在后续的 npm install 命令后，项目文件内会生成 node_modules 文件夹，网上有说是重新删除文件夹，然后在项目根目录重新运行终端，输入 npm install ,npm run bulid  最后输入 npm run dev 就可成功运行了。但是我试了很多次还是不行。最后又重新新建了项目在是否注册依赖时，选择了 Yes 然后就成功运行了。

最后的效果图是这样的。

至此，一个简单的 vue 项目就搭建好了。

说实话，自己是第一次接触 vue.js 之前一直在接触后端 C#，也希望通过项目自己能够掌握的更牢固，以便后续的学习和成长。加油。