因为公司有个项目需求，手机端的。之前就写了一个一样的项目，只不过是用原生的写的，心想刚写了个vue后台管理系统，何不也用vue写，所有就没有把之前的利用过来。那么问题来了，要让手机端自适应我们该怎么做呢。
可以用阿里的移动端适配代码flexible.js。首先在命令行输入
npm i lib-flexible --save
然后在全局配置文件main.js引入
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ // 引入 import ‘lib-flexible‘
......
引入之后你会发现<html></html>标签中多了data-dpr和font-size
当然别忘了px2rem-loader，他的作用就是帮我们写的自动转成rem去适配移动设备。首先在命令行输入
npm i px2rem-loade --save-dev
然后在build文件夹下的utils.js做如下配置
//px转化rem const px2remLoader = { loader: ‘px2rem-loader‘, options: { remUnit: 75 //假设设计稿是750px,这里设置为75 } } // generate loader string to be used with extract text plugin 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 }) }) }
配置好之后重新运行项目，你会发现Muse-UI插件的大小也跟着变化了，博主使用了时间和日期插件，真的变得贼丑，在写的过程中，日期插件不知道为啥选择年份的时候不能直接点击，点击就自动隐藏了，只能一页一页的往前翻，从而就选择不了。最后我选择了用ElementUI的日期插件，哈哈哈，有点尴尬PC插件强制用到手机端，不过没有问题。之所以插件变化，就是因为上面红色区域的px2remLoader,所以就先不使用px2emLoader，修改之后就变成如下这样的，改完之后记得重新运行项目。
//px转化rem const px2remLoader = { loader: ‘px2rem-loader‘, options: { remUnit: 75 //假设设计稿是750px,这里设置为75 } } // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + ‘-loader‘, options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) }
最后就是Muse-UI的引入使用了，命令行中输入
npm i muse-ui -S
在全局配置文件main.js引入，当然你也可以按需引入，那就请移步到Muse-UI官网
import Vue from ‘vue‘; import MuseUI from ‘muse-ui‘ import ‘muse-ui/dist/muse-ui.css‘ Vue.use(MuseUI)
......
学无止境，不要满足于现状
原文：https://www.cnblogs.com/dj1988/p/10683472.html