Vue移动端flexible.js+MuseUi
2024-08-30 15:12:27
因为公司有个项目需求,手机端的。之前就写了一个一样的项目,只不过是用原生的写的,心想刚写了个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)
......
学无止境,不要满足于现状
最新文章
- 部署JProfiler监控tomcat
- 我的jQuery源码读后感
- MySQL Workbench返回所有的记录
- 9.请写出PHP5权限控制修饰符
- 【HTML】Beginner8:Table
- Nhibernate1
- Web VLC 设置 tcp 协议播放
- 关于oracle数据库(1)
- VUE 框架
- Python字符串与格式化的一点用法
- 将多张图片打包成zip包,一起上传
- centos安装系统全过程
- break语句和continue语句
- 文件夹生成zip
- java,数字,字符,字符串之间的转化
- jquery获取焦点位于的元素
- [转帖]win10 .Net Runtime Optimization Service占用大量CPU资源解决方法
- ubuntu16.04 1080ti显卡驱动安装
- 2016.5.14——leetcode-HappyNumber,House Robber
- activity启动模式launchMode区别和优化