vue cli 框架搭建

在建立项目前，咱们须要先确认node ，npm , webpack等环境是否存在，若是没有的话，咱们须要先将环境配置完整后再进行项目的建立！

---

验证node是否安装:          

node -v
复制代码

验证npm是否安装：

npm -v
复制代码

安装node:

windows 安装包(.msi)

32 位安装包下载地址 : nodejs.org/dist/v4.4.3…

64 位安装包下载地址 : nodejs.org/dist/v4.4.3…

安装webpack:

$ npm install webpack -g
复制代码

安装npm:

如今安装node就会自带npm的安装，并不须要另外安装

git下载地址：

$ git clone --recursive git://github.com/isaacs/npm.git  
复制代码

（通常npm环境下载速度较慢。能够下载淘宝镜像cnpm来提升速度，但有时二者下载的文件版本会有细微差异）

淘宝镜像： npm.taobao.org/

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码

安装vue框架

$ npm install vue
复制代码

安装vue脚手架: vue-cli

$ cnpm install vue-cli -g
复制代码

检测vue版本：

$  vue --version
复制代码

下面就能够开开心心的使用webpack 搭建项目实例喽！！！

webpack完整版：

$ vue init webpack demo
复制代码

webpack 简约版：

$ vue init webpack-simple demo
复制代码

进入项目目录：

$ cd demo
复制代码

下载安装依赖：

$ cnpm install 
复制代码

下载完成后启动vue项目：

$ npm run dev
复制代码

下载安装vue router:(如今建立项目时会提示是否安装router，回复y便可)

$ npm install vue-router --save
复制代码

下载安装Sass (关于sass/less在vue中的配置和使用会在接下来的文章详细说明)

$ npm install node-sass --save-dev  
$ npm install sass-loader --save-dev
复制代码

下载安装Less

$ npm install less --save-dev  
$ npm install less-loader --save-dev 
复制代码

下载安装axios:

$ npm install axios --save
复制代码

下载vue ui框架iview：

$ npm install iview --save
复制代码

项目打包：

$ npm run build
复制代码

** 完 **

---

做者：晴天de雨滴    
    出处：https://juejin.im/post/5a125827518825293b4fea8a
    版权全部，欢迎保留原文连接进行转载：) 
复制代码

若是你对我对文章感兴趣或者有些建议想说给我听👂，也能够添加一下微信哦！

最后：
        祝各位工做顺利！
                        -小菜鸟Christine复制代码