一、背景

在这里vue我就不详细介绍了，你们可以参考他的官方网站，上面有详细的模型，这里我主要研究了下怎么使用脚手架去创建我们的项目结构，如果那里讲的不到位了，欢迎大家批评指正，我会在第一时间去更正的，废话不多说了，开始我们的学习吧。

二、环境准备

1.node.js:其实就是JavaScript 运行环境，可以通过它的官网进行下载安装，地址:https://nodejs.org/en/。

2.webStorm:安装就是傻瓜式安装，很简单的。

3.git安装:我们通过脚手架的方式下载我们的代码模板，必须也少不了我们的git环境，如果没有它，我们的项目会有问题的。

三、具体步骤

1.cmd命令，执行node -v，出现下面的界面，代表安装成功，我安装的是最新版本的。

2.然后接着执行npm -v，npm：npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。

3.接着执行npm install webpack -g，webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。按照上面的步骤一步一步来。别急我在前方等你哈。

4.执行完3步骤再次执行webpack -v，就证明成功了。

5.全局安装vue-cli，命令npm install --global vue-cli，安装完成之后就可以进行验证了，vue -V

四、下载我们的项目

1.执行命令npm install vue-cli -g(注意这时候就用到了git环境了，我是在e盘建立了一个webstormworkspace目录，在这个目录里面右键Git Bash Here（如果你的没有这个环境你就没有装git了，需要去安装下git环境），最后再去执行命令npm install vue-cli -g)，如果还不清楚的留言，我会给你们解答。

2.执行命令：vue init webpack myproject，然后填写完之后，就可以静静的等待它下载了。

2.1.具体代表：

2.1.1.Project name (myproject)；项目名称（myproject）。（确定按enter，否按N） 

2.1.2.Project description (A Vue.js project)；项目描述（一vue.js项目）。（用英文，不写直接回车也行） 

2.1.3.Author (sunsanfeng)；作者（sunsanfeng）。（确定按enter，否按N） 

2.1.4.Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render

functions are required elsewhere；VUE文件渲染功能是必需的其他地方。（按enter） 

2.1.5.Install vue-router? (Y/n)；安装的路由？（/ N）。（可安可不安，建议安装，因为项目肯定能用上） 

2.1.6.Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（使用ESLint语法,除非你非常懂ESLint语法，要不就会处处报错，之前不明白的时候选择过一次，总之很烦，建议N） 

2.1.7.Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / N）。（选N） 

2.1.8.Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（选N）

2.1.9.should we run 'npm install' for you after the ogject has been created? ;(选择Yes，use NPM)

3.你可以直接进入项目去运行，浏览器去访问，也可以通过webstorm去打开生成的文件夹

4.结果（直接在cmd中打开的效果）浏览器访问：http://localhost:8080

五、通过webstrom打开

1.打开你的项目所在地，我的是刚刚打开git的目录，即：webstormworkspace目录，里面会生成一个叫myproject目录。

2.然后去运行项目，看下面的地址：http://localhost:8080,然后去浏览器访问，跟上面的效果是一样的。

3.结果和上面的是一样的，简简单单的入门，希望能帮到你们。

六、结束

Always keep the faith!!!