vue-cli+webpack構建vue項目和使用sass報錯填坑

1、安裝 vue-cli

一、首先須要安裝node和npm

　　不作過多講解，能夠參考 http://www.javashuo.com/article/p-dqqlkabt-kw.html 安裝

二、使用npm安裝npm-cli

　　打開要建項目所在的文件夾，點擊空白處按住 shift + 鼠標右鍵，打開 Powershell窗口進行接下來的操做

　　

 

　　由於在指定文件夾打開，所以不用再選擇路徑，可直接輸入命令，

 　　輸入命令安裝npm -cli：npm install --global vue-cli

　　

 

 

2、生成項目模板

一、vue init webpack vuedemo

　　其中webpack是模板名稱，由於是須要webpack的打包功能；

　　vuedemo是項目名稱；

二、構建過程：

　　　Project description :項目描述　　y

　　　Author: 做者　　y

　　　Vue build：打包方式（建議選擇第二個）　　y　　

　　　install vue-loader　　y

　　　Use ESLint TO lint your code? 是否使用ESL代碼檢測　　n

　　　Pick an ESLint preset?  standard 　　　n

　　　Setup unit tets with Kara + mocha?  是否安裝單元測試　　n

　　　Setup e2e tests with Nightwatc? 是否安裝e2e測試 　　n

三、cd vuedemo 進入到項目當中

四、安裝依賴庫：

　　　npm install 

五、啓動項目：

　　　npm run dev

　　　到這裏操做無誤的話是能夠正常啓動，以後就是踩坑：：：：）

3、使用sass/scss工具，安裝依賴

一、安裝依賴

　　若是是 常規 的，執行 npm install style-loader css-loader style-loader --save-dev 安裝依賴就行。

　　若是是 less 的，執行 npm install less less-loader --save-dev 安裝依賴就行。

　　若是是 sass 的，執行 npm install sass sass-loader --save-dev 安裝依賴就行。

　　若是都用，能夠所有安裝，可是在安裝sass要注意版本問題！！！！！！

　　由於sass版本太高，會報錯：（this.getResolve is not a function）

　　

 

二、解決方法：npm install sass sass-loader@6.0.6

　　能夠在安裝時加上@符號選定版本：

　　

　　可是運行項目後發現，還會報錯：

　　

 

三、此時，能夠根據提示安裝依賴： npm install node-sass

　　

 

4、安裝後啓動項目，問題解決！！