vue全家桶的搭建我就不多說了，百度一堆

1.sass的引用

npm install sass-loader node-sass --save-dev

然後進入build文件下的webpack.base.conf.js中module.exports對象中修改resolve，修改如下

resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘, ‘.css‘, ‘.scss‘ ],
    alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘,
      ‘@‘: resolve(‘src‘),
      ‘style@‘: resolve(‘src/assets/style‘)
    }
  },
 

然後在組件HelloWorld中引入

<style scoped lang="scss">
@import ‘~style@/index‘;
h1, h2 {
  font-weight: normal;
  background-color: $bgColor;
}

然後就可以了，so easy

2.後臺請求我用的是axios，一般按照百度上安裝就好了，需要註意的是ie會報錯，下載個promise依賴就可以了

3.接下來就是一個手機適配rem布局的插件了，我是很懶，懶到連rem計算都不想的 所以我選擇了阿裏的lib-flexible + px2rem-loader的一個自動適配手機端並且可以幫我計算出rem值的一個插件，感覺很適合我，首先安裝

1） npm i lib-flexible --save

2） 在main.js中引入

import ‘lib-flexible/flexible‘

　3） 在入口文件index.html中增加meta標簽

<meta name="viewport" content="width=device-width, initial-scale=1.0">

　4） 安裝px2rem-loader

npm install px2rem-loader

　5）配置px2rem-loader，在build文件夾中找到utils.js，按照以下紅色箭頭配置

var px2remLoader = {
    loader: 
 
‘px2rem-loader‘,
    options: {
      remUnit: 64//設計稿寬度/10
    }
  };

  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, px2remLoader];//添加px2rem 插件
    if (loader) {
      loaders.push({
        loader: loader + ‘-loader‘,
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

6） 例子

代碼如上，頁面效果如下，設計稿是多少px直接寫就好了，no是不讓編譯成rem

教程到此完畢

vue的項目開始前的工作