Vue移动端flexible.js+MuseUi
因为公司有个项目需求，手机端的。之前就写了一个一样的项目，只不过是用原生的写的，心想刚写了个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)
......
学无止境，不要满足于现状
Vue移动端flexible.js+MuseUi的更多相关文章
- vue移动端flexible.js结合Muse-ui使用和vux的小坑
因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...
- 关于Vue移动端框架（Muse-UI）的使用（说明书，针对不愿看文档的童鞋）
一.安装 1.npm安装 npm i muse-ui -S 或者 CDN安装 <link rel="stylesheet" href="https://unpkg. ...
- vue 的rem 配置和flexible.js的应用
1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动 ...
- vue脚手架搭建移动端项目--flexible.js
通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...
- vue.js移动端配置flexible.js
前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...
- vue-cli配置移动端自适应flexible.js
第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入li ...
- 移动端自适应：flexible.js可伸缩布局使用
http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现 ...
随机推荐
- 添加本地 yum源
添加本地 yum源 yum-updatesd.conf yum的主配置文件 [root@zhou ~]# cd /etc/yum.repos.d/ [root@zhou yum.repos.d]# ...
- 5、Go if else 条件判断
package main import "fmt" func main(){ //注:在Go里面没有三元表达式”?:”,所以你只能使用条件判断语句. //示例一 if 7%2==0 ...
- screen---管理会话
Screen是一款由GNU计划开发的用于命令行终端切换的自由软件.用户可以通过该软件同时连接多个本地或远程的命令行会话,并在其间自由切换.GNU Screen可以看作是窗口管理器的命令行界面版本.它提 ...
- 结合Vue 的滚动底部加载
项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo 核心Dom结构 <body> <div id="Content"> <div> & ...
- Markdown编辑器 常用语法
一.标题 示例: # 1这是一级标题 ## 2这是二级标题 ### 3这是三级标题 #### 4这是四级标题 ##### 5这是五级标题 ###### 6这是六级标题 效果如下: 1这是一级标题 2这 ...
- 紫书 习题 10-8 UVa 10622（gcd）
把这个数质因数分解然后求因子个数的gcd就ok了. 一些细节 (1)这道题的质因数不需要存下来,每一次做完取一次gcd就ok了 (2)判断奇偶用ans & 1的时候要加括号, 位运算要注意括号 ...
- ASP.NET WEB API微信支付通知接口，返回xml数据，微信服务器不识别问题
原文:ASP.NET WEB API微信支付通知接口,返回xml数据,微信服务器不识别问题 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MrTra ...
- 【习题 8-17 UVA - 11536】Smallest Sub-Array
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法. 考虑一个1..i的窗口. 里面在到达了i位置的时候恰好有1..k这些数字了. 为了更接近答案. 显然可以试着让左端点变成2 ...
- Java基础学习总结（14）——Java对象的序列化和反序列化
一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存 ...
- Android实战简易教程-第二十六枪（基于ViewPager实现微信页面切换效果）
1.头部布局文件top.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...