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


一、安裝 vue-cli

1、首先需要安裝node和npm

  不做過多講解,可以參考 https://www.cnblogs.com/kellyPan/p/9653609.html 安裝

2、使用npm安裝npm-cli

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

  

 

  因為在指定文件夾打開,因此不用再選擇路徑,可直接輸入命令,

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

  

 

 

二、生成項目模板

1、vue init webpack vuedemo

  其中webpack是模板名稱,因為是需要webpack的打包功能;

  vuedemo是項目名稱;

2、構建過程:

   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

3、cd vuedemo 進入到項目當中

4、安裝依賴庫:

   npm install 

5、啟動項目:

   npm run dev

   到這里操作無誤的話是可以正常啟動,之后就是踩坑::::)

三、使用sass/scss工具,安裝依賴

1、安裝依賴

  如果是 常規 的,執行 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)

  

 

2、解決方法:npm install sass sass-loader@6.0.6

  可以在安裝時加上@符號選定版本:

  

  但是運行項目后發現,還會報錯:

  

 

3、此時,可以根據提示安裝依賴: npm install node-sass

  

 

四、安裝后啟動項目,問題解決!!

  

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM