在vue2.x项目使用flexible.js和sass

1.首先创建一个vue项目：

vue init webpack myproject

2.安装完成后进入项目

cd myproject
npm install

3.使用flexible.js适配

安装lib-flexible：

npm install lib-flexible --save

在main.js里引入：

import 'lib-flexible/flexible'

4.将px自动转为rem

安装postcss-px2rem：

npm install postcss-px2rem --save-dev

在webpack.dev.conf.js的plugins里添加代码：

new webpack.LoaderOptionsPlugin({
  vue: {
    postcss: [require('postcss-px2rem')({remUnit: 75})]
  },
})

remUnit的值可根据设计稿自行修改，一般750的图就设置成75，这样写750px就正好是100%宽度。

5.使用sass

安装依赖：

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

在webpack.base.conf.js的rules里添加代码：

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

在.vue文件里：