完整又详细的vue-cli安装步骤

vue-cli脚手架模板是基于node下的npm来完成安装的因此首先须要安装node

一、安装node，vue运行须要基于npm必定的版本，因此首先升级npm到最新的版本，在安装的过程当中能够根据我的

喜爱使用淘宝的镜像，可是要先安装cnpm（速度和稳定性都比较好）

二、在目标文件夹下打开终端

三、执行cnpm install vue-cli -g 全局安装

 

 

运行vue查看安装是否成功

 

 

四、运行vue init webpack(注：模板名称) sell2(注：项目名称)

 

 

五、进入项目文件夹下执行 cnpm install    来安装下载到模板中的package.json中的依赖，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件

 

 

六、因为依赖项很是的多编辑器在检索module文件时会很是的耗内存，因此在用webstorm编辑器启动项目的时候咱们每每会在node-module文件夹右键去阻止检索该文件

 

 

注：webstorm一打开就卡死了，没办法操做文件夹这种状况的解决方法为，首先在文件夹形式下打开删除node-modules文件夹，而后进行阻止检索的方法，而后在从新cnpm install就好*（这种方法须要安装完依赖项先运行一次而后删除node_modules子文件，webstorm打开项目，禁止检索node_ module文件夹，而后在删除该文件夹，从新安装便可）

 

七、运行项目执行 npm run dev  (注：此时不能用cnpm来运行，必须是npm)

八、将须要的资源放进项目

 

 

九、咱们须要用到路由功能  因此须要安装vue-router

安装方法：vnpm install vuve-router --save

十、在build/devs-erver.js下编写自定义变量和路由功能

 

 

这样在运行项目下就能够获得本身想要的json数据，以下：

 

 

 

这样路由就配置成功，而且获得了本身想要的数据

十一、在写代码以前如今html文件下引入初始化样式（保持样式的统一和美观）

 

 

十二、调用组件的方式

 

 

1三、须要用到sass（我的需求），因此安装sass-loader

安装方法：cnpm install sass-loader --save-dev

Pakcage.json文件下回生成sass-loader的版本信息

因为sass-loader是依赖于node-sass因此咱们还要安装node-sass

安装方法：cnpm install node-sass --save-dev

此时能够在模块中定义scss来书写scss代码，还能够新建*.scss文件,而且能够利用

@import  “../路径”; 来调用其余的scss文件和已经定义好的scss方法,

利用@include 方法名（参数）; 来调用

1四、须要用到ajax请求,利用vue-resource

安装方法：cnpm install vue-resource--save 安装完成会在package.json中生成版本信息

使用方法以下：

注意：vue官方不在继续维护vue-resource，并推荐你们使用 axios。