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複製代碼