vue的全家桶(vue-cli,vue-router,vue-resource,vuex)之vue-cli的安装

    在学习vue时，我们会遇到用vue进行组件化编码----------------首先就需要使用vue-cli脚手架进行模板项目的创建。今天就来详细讲解一下脚手架的安装。

    1、全局安装webpack：需要在node环境下进行安装，所以如果没有node的话就得去官网下载(需要安装node是因为在黑窗口下载时需要很多npm命令);然后对webpack模板进行全局安装，目的是可以把当前目录存放在项目目录下。用npm install webpack -g 或者是npm install -g webpack;         

      这个即为当前下载的webpack的版本号。webpack版本号是4.X之后，就需要再用npm install webpack webpack-cli -g这个命令安装webpack-cli依赖。成功的标识就是可以显示出来webpack-cli的版本号

  2、全局安装vue-cli：用npm install -g vue-cli  或者 npm install --global vue-cli,vue-cli的版本号在黑窗口显示如下

;

 

  3、存放项目模板的位置：在自己的盘符中建立一个文件夹，用来存放下载的模板。然后进入到这个文件夹，用vue init webpack vue_demo（自己的项目名称） 对vue进行初始化，默认提供了很多关于webpack配置，更加方便跨域和图片等文件在打包过程中的配置优化；然后会出来很多创建项目时会出现的一些问题，可以根基自己的情况选择。默认情况的话可以直接点击enter进入下一项。

4、到此vue-cli安装成功。你可以根据接下来的步骤继续操作，当npm run dev(npm run start)成功时在浏览器中输入http//localhost:8080会出现vue如下界面。

 

5、如果最后一步不成功的话，极有可能就是端口号被占用。这个时候你可以去到config文件下找到index.js,然后改变端口号。下载的过程中尽量不要使用cnpm，因为在安装vue-cli时，cnpm和npm会有一些差距。