原创前端 Boss 教程 vue10 阅读昨天 20:04:49
前言
何为 px2rem?
简介: 对于使用过 vue 的同学可能对于 px2rem 并不陌生, 它其实是一个可以 npm 到 vue 项目中的一个插件.
主要功能: vue 做移动端适配, 借助 px2rem 插件方便的将 px 单位转为了 rem.
以上对于 px2rem 的阐述可能太不官方了, 但确是最浅显易懂的.
详细的安装步骤如下
First of all, 必须要先通过 vue-cli 创建一个 vue 项目, 至于如何创建, 请看链接: 搭建 vue-cli https://www.jianshu.com/p/1626b8643676/ , 这里就不进行过多的解释了, 详情自己参考.
部署好 vue 项目后, 接下来的操作:
DOS 命令 cd 进入指定的 vue 文件目录, 再进行:
npm install px2rem-loader lib-flexible -save
在项目入口文件 main.js 中引入 lib-flexible
import 'lib-flexible/flexible.js'
在 build 下的 utils.js 中, 找到 generateLoaders 方法, 替换成:
- const px2remLoader = {
- loader: 'px2rem-loader',
- options: {
- 'remUnit': 75,
- 'baseDpr': 2
- }
- }
- // generate loader string to be used with extract text plugin
- function generateLoaders(loader, loaderOptions) {
- // 通过 usePostCSS 来标明是否使用了 postcss
- const loaders = options.usePostCSS
- ? [cssLoader, postcssLoader]
- : [cssLoader, px2remLoader];
- // 如果指定了具体的 loader 的名称
- if (loader) {
- // 向 loaders 的数组中添加该 loader 对应的加载器
- // 一个很重要的地方就是, 一个数组中的 loader 加载器, 是从右向左执行的.
- loaders.push({
- // loader 加载器的名称
- loader: loader + "-loader",
- // 对应的加载器的配置对象
- options: Object.assign({}, loaderOptions, {
- sourceMap: options.sourceMap
- })
- });
- }
总结: px2rem 插件安装也就到此结束, 可以试着写一个例子, 你会发现在移动端 F12 下调试不同机型, 相应的 px 值都被转化为了 rem. 有什么疏漏或者不懂的地方, 可以私信我, 我晚上一般都在的, Thank you!
vue-cli
来源: http://www.qdfuns.com/article/17647/deb527272dfa1c55f56fcbd42a7c2307.html