vue-cli + webpack + sass 搭建一個工程化項目

環境安裝

1、首先安裝 node的環境，官網地址這裏
檢查是否安裝成功

node -v  //node的版本
npm -v   //npm是node的包管理器

如果出現 “ 不是內部或外部命令，也不是可運行的程序
或批處理文件。”需要到環境變量中進行配置
 node -v
v10.5.0
 npm -v
6.1.0

2、安裝vue-cli

由於npm的服務器在國外，網速慢而且安裝容易失敗，建議在安裝之前，先安裝國內的鏡像，比如淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完之後就可以使用 cnpm 命令了

全局安裝 vue-cli
cnpm install vue-cli -g 

創建項目

vue init webpack(基於模板) my-Project    //初始化基於webpack模板項目
cd my-Project
cnpm install  //安裝依賴
cnpm run dev //運行項目

在webpcak中配置sass

安裝sass-loader, node-sass.因爲sass-loader依賴於sass-loader
cnpm install sass-loader node-sass --save

下載安裝完之後，webpack是沒有配置sass-loader的，需要手動配置一下。
在 build 目錄下的 文件 webpack.base.conf.js 下的module規則下配置：

test: /\.scss$/,
include: '/src/',
loaders: ['style-loader', 'css-loader', 'sass-loader']

在單文件組件中引用

重新運行項目, 如果沒有編譯出錯，說明配置成功

npm run dev