在上一步创建好“webpack”模板项目后，需要修改一下项目配置
src/app.vue设置
首先是把src/app.vue中的logo去掉
然后根据需要去除浏览器的一些默认样式
src/main.js设置
由于要做移动端开发适配,因此在main,js中导入rem转px函数公式,本人在src下新建了config目录,并在config目录下新建了rem.js文件
导入rem.js
src/config/rem.js
rem.js里主要就是rem转px函数公式
(function () {
function a() {
var b = document.documentElement.clientWidth;
b = b > 750 ? 750 : b; //750是设计稿大小,如果页面是1920请写1920
var c = b / 750 * 100;
document.getElementsByTagName("html")[0].style.fontSize = c + "px"
}
a();
window.onresize = a
})();
这样rem文件就已经启用了,然后是路由配置
src/router配置(路由配置)
在src/router/index.js下配置路径,可根据需要配置,由于本次项目只有Home和Detail页面,因此只配置了两个
index.js
自建页面文件夹src/pages
咱们把页面文件统一放在pages,新建home.vue和detail.vue文件
根目录下的index.html配置
再加入以下代码,完成移动端配置
- 常见content参数
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放 0为禁止
安装插件 px2rem-loader
为了方便我们在开发时自动把px转化成rem,我们安装一个px2rem-loader插件,如果心算能力强的小伙伴可以不用装
cmd或git中输入cnpm install px2rem-loader即可安装
配置build/utils.js
build/utils.js中可以配置px2rem-loader的相关参数,本文在此配置为每rem为50px,如图配置:
build/utils.js
代码:
var px2remLoader = {
loader:'px2rem-loader',
options:{
remUnit: 50
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
- 该插件可以使用注释/no/来取消局部的px转换成rem
如:
width: 20px; /*no*/
自此,项目搭建配置完毕
Q1:如果我想这个px2rem作用到全局assets里面的CSS样式怎么配置呢？
需要安装另一个插件postcss-pxtorem。
1、在全局下安装插件：
npm install -D postcss-pxtorem
2、然后会生成一个js文件：
在文件中需要进行配置：
'postcss-pxtorem': {
rootValue: 16, //设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: ['*']
}
配置完之后，在css文件中可以写随便一个px单位的属性值来测试。
然后重启项目测试一下。
欢迎点赞收藏,希望本文能帮助到您,感谢您的支持
