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文件里:
<style lang="scss">
这样就可以使用sass了~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。