vue cli 框架搭建

Christine發表於2017-11-20

vue cli 框架搭建
在建立專案前,我們需要先確認node ,npm , webpack等環境是否存在,如果沒有的話,我們需要先將環境配置完整後再進行專案的建立!


驗證node是否安裝:          

node -v
複製程式碼

驗證npm是否安裝:

npm -v
複製程式碼

安裝node:

windows 安裝包(.msi)

32 位安裝包下載地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安裝包下載地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

安裝webpack:

 $ npm install webpack -g
複製程式碼

安裝npm:

現在安裝node就會自帶npm的安裝,並不需要另外安裝

git下載地址:

$ git clone --recursive git://github.com/isaacs/npm.git  
複製程式碼

(一般npm環境下載速度較慢。可以下載淘寶映象cnpm來提高速度,但有時兩者下載的檔案版本會有細微差別)

淘寶映象: http://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
    版權所有,歡迎保留原文連結進行轉載:) 
複製程式碼

如果你對我對文章感興趣或者有些建議想說給我聽?,也可以新增一下微信哦!

vue cli 框架搭建
如果親感覺我的文章還不錯的話,可以一下新增關注哦!

-----再或者感覺我的文章對您有所幫助,可以掃描二維碼打賞一下我呦!這樣我會更有動力給大家提供更優質的文章哦! 謝謝您!!!

vue cli 框架搭建

最後:
        祝各位工作順利!
                        -小菜鳥Christine複製程式碼

相關文章