安装配置lib-flexible
一、Lib-flexible
-
cmd命令行执行命令:
npm i lib-flexible --save -
在项目入口文件 main.js 里 引入 lib-flexible
import ‘lib-flexible/flexible’ -
在项目根目录的 index.html 中添加如下 meta标签
pxtorem
-
实际项目中需要将px转成rem
命令行中执行安装:npm install px2rem-loader -
在Vue-cli生成的webpack中进行配置,注意3.0以上的脚手架需要在Vue.config.js中配置
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //75按照750设计图尺寸设计
}
//在generateLoaders方法中添加px2remLoader
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
以上配置全部完成后,重启项目
3.0以下的版本启动方式 npm run dev
3.0以上的版本启动方式 npm run serve