Vue+VueRouter+Webpack+Axios+ElementUI---构建项目实战(二)构建项目

vue-cil构建项目

vue-cil我们称为是vue的脚手架工具，所谓脚手架就是搭建一个基本的模型(包括依赖，基础项目目录等)

一般情况下，可以使用npm包管理器进行安装依赖项，只不过我用惯的yarn，这个相对npm来说，依赖项的版本是固定的，为了以后运行项目时候排除因为版本兼容报错问题。

在命令行输入：yarn

安装vue-cil。命令如下：

方式①:

yarn global add vue-cli

方式②:

npm install -g vue-cli

以上的成功信息可能跟你们的不太一样，因为是两个方式都可以，重复运行虽然不会报错，但是相当于重复安装了，只需运行其一就行，下面博文我都只用yarn命令来执行代码

查看vue版本

输入：vue -V

证明安装脚手架成功。

下面，我们来用vue-cil构建一个项目。

首先把终端当前目录定位到你准备存放项目的地方，因为我是进入目录右键打开命令行的所以无需cd切换路径。

我项目就直接放置 /d/project/ 下

新建vue项目

执行命令:

vue init webpack wx-app

wx-app是项目的命名，看官看项目直接命名即可

执行命名一顿回车y or n下来，这里我不安装了ESLint的检查和一些测试，各位可以按需选择。

这时候可以运行这个模板vue项目

执行下面代码，vue项目初始化结束后也有提示的，只不过我用的是yarn，此后不再复述。

  cd wx-app
  yarn install
  yarn run dev

结果如下：

在浏览器输入http://localhost:8080

得到结果如下:

到这里，恭喜你！你已经成功用脚手架vue-cli结合webpack搭建成功一个vue基础项目了。