VScode 快速搭建一个Vue 项目

不同的开发工具对于程序员构建Vue项目来说步骤、难易程度不同，其中VScode搭建一个Vue项目应该来说是相对高效，便捷的。

首先安装当下流行的Vue 脚手架项目Vue-cli(自动生成Vue.js的模板工程)  确保环境中安装node、npm

①检查是否有Node Npm 控制台输入node -v 以及npm -v

效果图

②检查是否安装Vue 项目，控制台输入vue,如果出现选项（options）说明你已经有Vue，选项中有一些基本的命令，如果没有vue-cli你的控制台就不能输出这些选项，这个时候你就要npm install -g vue-cli 一下这个语句，来安装Vue-cli。

效果图

③当你安装完Vue-cli你就可以初始化你的Vue 模板工程执行，执行vue init webpack projectName（项目名字根据自己的项目取名字）

效果图

④执行和命令之后它会询问你一些关于当前的项目基本信息

1.项目名称是否是vue_demo根据你之前输入的

2.项目的描述你可以输入一段英文

3.作者是否是

4.Vue 的运行与编译，默认我们选择第一项：Runtime + Compiler: recommended for most users 运行时+编译器：建议大多数用户使用

5.是否安装vue-router也就是路由，vue-router是个Vue官网推荐的我们这边选择安装

6.是否需要安装eslint语法，这边建议选择no，除非你特别熟悉eslint不然你的页面会处处爆红（你可以安装一个vscode关于eslint的插件来解决这个问题，可以上网了解一下VScode实用插件，这里不多说）

插件

7.是否单元测试我们这边选择no

8.这个是否Nightwatch的到端的测试（我也不知道干啥的选择no。。。）

9.选择安装依赖包的方式有npm，yarn和myself，这边的话看个人。

效果图

10.填完所有选项之后，开始安装项目

效果图

④安装完成之后控制台会输出

 cd  projectName        //进入文件目录              

 npm run dev 

效果图

⑤执行上述的命令在浏览器中输入http://localhost:8080，则可以看到欢迎页了

效果图 效果图