基於vue-cli，sass，vant的移動端項目

項目架構

開始

vue init webpack    項目名稱         //新建項目,cd進入新項目

npm install axios                    //先安裝！

npm install --save axios vue-axios   //然后！

npm install vuex --save              //安裝vuex

npm i vant -S                        //安裝vant，Ui框架，選擇性安裝

npm install babel-plugin-import -D            // 與vant是綁定安裝關系

配置babelrc文件

 "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import", [{ "libraryName": "vant","libraryDirectory":"es","style": true }]

]

然后可以在模塊中引入或全局引入，本人采用全局引入

import { Button } from 'vant'

Vue.use(Button)

 

 

npm install --save-dev node-sass sass-loader  //安裝sass

npm install mockjs                          //選擇性安裝，mock數據

 

打開webpack.base.config.js在loaders里面加上

  {
     test: /\.scss$/, loaders: ["style", "css", "sass"] },

 

全局引入sass


單獨引入

<style lang="scss" scoped="" type="text/css"></style>

注：sass的變量要是想引入全局，先創建文件assets/css/all.scss

npm install sass-resources-loader --save-dev

在項目build文件夾里找到utils.js ，定位到下邊代碼

return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } 

把上面這句scss: generateLoaders('sass'),改成如下

scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/css/all.scss')//這里按照你的文件路徑填寫 } } )

然后重新啟動

配置main.js文件

 api聯合config進行抽離，應用了axios,promise,await,async達到在外同步執行，公共函數內異步請求的效果,