Vue脚手架的搭建

Vue脚手架

1. 脚手架是通过webpack搭建的开发环境；
2. 在脚手架中可以使用ES6语法；
3. 打包和压缩JS为同一个文件；
4. 项目文件在开发环境中编译，而不是在浏览器中编译；
5. 脚手架在开发过程中可以实现页面自动刷新；

搭建脚手架的步骤

1. 必须要依赖node.js 没有的话需要安装；

2. 进入cmd(命令提示符)

   通过node -v 判断node的版本；

   通过npm -v判断npm的版本；

   

   当node的版本在6.9以上，npm的版本在3.10以上时满足搭建脚手架的条件；

3. 安装全局的vue-cli

   npm install –global vue-cli

   需要等一点时间，完成之后可以通过 vue –version命令来查看版本号；

4. 在这里可以通过命令行进入到想要创建项目的文件夹下；

   然后创建一个基于webpack模板的新项目：

   vue init webpack my-project (“my-project”是自定义的项目名称)；

   模板下载完成之后回出现下面的提示：

   

   这里可以直接回车，也可以在后面重新写一个名字；

   

   对当前的项目进行一个描述，在后面直接输入描述的内容然后回车；

   

   输入作者，输入之后出现以下选项

   

   默认选中第一个，第二个选项是轻便的，但是里面缺少很多东西，在使用的时候都需要一点一点往里加；

   

   是否安装vue-router（路由）？根据需要选择，也可以在使用过程中安装；

   

   

   

   是否使用这些检验或测试? 如果选择是的话，在之后的代码编写中会有一些地方比较严谨，所以初学的话一般选择n

   

   询问我们是否在项目创建完成之后运行npm install 吗？ 有三个选项根据自己情况选择；之后开始创建项目需要一些时间；

   创建完成之后如下所示：

   

   

   根据这两行命令可以启动我们的脚手架项目

   

   启动成功，打开浏览器输入 http://localhost:8081

   

   出现这个界面说明我们的脚手架项目已经搭建完成！！！