因为公司有个项目需求，手机端的。之前就写了一个一样的项目，只不过是用原生的写的，心想刚写了个vue后台管理系统，何不也用vue写，所有就没有把之前的利用过来。那么问题来了，要让手机端自适应我们该怎么做呢。

可以用阿里的移动端适配代码flexible.js。首先在命令行输入

  1. npm i lib-flexible --save

然后在全局配置文件main.js引入

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4.  
  5. // 引入
  6. import 'lib-flexible'
    ......

引入之后你会发现<html></html>标签中多了data-dpr和font-size

当然别忘了px2rem-loader，他的作用就是帮我们写的自动转成rem去适配移动设备。首先在命令行输入

  1. npm i px2rem-loade --save-dev

然后在build文件夹下的utils.js做如下配置

  1. //px转化rem
  2.    const px2remLoader = {
  3.      loader: 'px2rem-loader',
  4.      options: {
  5.        remUnit: 75 //假设设计稿是750px,这里设置为75
  6.      }
  7.    }
  8.    // generate loader string to be used with extract text plugin
  9.    function generateLoaders(loader, loaderOptions) {
  10.      const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
  11.      if (loader) {
  12.        loaders.push({
  13.          loader: loader + '-loader',
  14.          options: Object.assign({}, loaderOptions, {
  15.            sourceMap: options.sourceMap
  16.          })
  17.        })
  18.      }

配置好之后重新运行项目，你会发现Muse-UI插件的大小也跟着变化了，博主使用了时间和日期插件，真的变得贼丑，在写的过程中，日期插件不知道为啥选择年份的时候不能直接点击，点击就自动隐藏了，只能一页一页的往前翻，从而就选择不了。最后我选择了用ElementUI的日期插件，哈哈哈，有点尴尬PC插件强制用到手机端，不过没有问题。之所以插件变化，就是因为上面红色区域的px2remLoader,所以就先不使用px2emLoader，修改之后就变成如下这样的，改完之后记得重新运行项目。

  1. //px转化rem
  2.    const px2remLoader = {
  3.      loader: 'px2rem-loader',
  4.      options: {
  5.        remUnit: 75 //假设设计稿是750px,这里设置为75
  6.      }
  7.    }
  8.    // generate loader string to be used with extract text plugin
  9.    function generateLoaders(loader, loaderOptions) {
  10.      const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
  11.      if (loader) {
  12.        loaders.push({
  13.          loader: loader + '-loader',
  14.          options: Object.assign({}, loaderOptions, {
  15.            sourceMap: options.sourceMap
  16.          })
  17.        })
  18.      }

最后就是Muse-UI的引入使用了，命令行中输入

  1. npm i muse-ui -S

在全局配置文件main.js引入，当然你也可以按需引入，那就请移步到Muse-UI官网

  1. import Vue from 'vue';
  2. import MuseUI from 'muse-ui'
  3. import 'muse-ui/dist/muse-ui.css'
  4.  
  5. Vue.use(MuseUI)
    ......

学无止境，不要满足于现状

Vue移动端flexible.js+MuseUi的更多相关文章

  1. vue移动端flexible.js结合Muse-ui使用和vux的小坑

    因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...

  2. 关于Vue移动端框架（Muse-UI）的使用（说明书，针对不愿看文档的童鞋）

    一.安装 1.npm安装 npm i muse-ui -S 或者 CDN安装 <link rel="stylesheet" href="https://unpkg. ...

  3. vue 的rem 配置和flexible.js的应用

    1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动 ...

  4. vue脚手架搭建移动端项目--flexible.js

    通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...

  5. vue.js移动端配置flexible.js

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...

  6. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  7. 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

    本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...

  8. vue-cli配置移动端自适应flexible.js

    第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入li ...

  9. 移动端自适应：flexible.js可伸缩布局使用

    http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现 ...

随机推荐

  1. Mac sublime快捷键操作

    1.打开命令面板 command + shift + p 2.打开关闭side bar command + k , command + b 3.打开新sublime窗口 command + shift ...

  2. [POI2011]MET-Meteors（整体二分+树状数组）

    题意 给定一个环,每个节点有一个所属国家,k次事件,每次对[l,r]区间上的每个点点权加上一个值,求每个国家最早多少次操作之后所有点的点权和能达到一个值 题解 一个一个国家算会T.这题要用整体二分.我 ...

  3. Intel投入5亿美元提升14nm工艺CPU需求

    虽然14nm行将收尾,但是却有大量的客户在赶“末班车”,导致CPU供货告急. Intel年初宣布增加10亿美元的额外资本支出用于转向更新的.更先进的生产工具,以便增加产能,在本周的第39届纳斯达克投资 ...

  4. Laravel核心解读--HTTP内核

    Http Kernel Http Kernel是Laravel中用来串联框架的各个核心组件来网络请求的,简单的说只要是通过public/index.php来启动框架的都会用到Http Kernel,而 ...

  5. 20180929 北京大学 人工智能实践：Tensorflow笔记03

    更改的程序部分如下: 另: 难?????????????见链接: https://www.bilibili.com/video/av22530538/?p=17 + (完)

  6. ASP.NET WEB API微信支付通知接口，返回xml数据，微信服务器不识别问题

    原文:ASP.NET WEB API微信支付通知接口,返回xml数据,微信服务器不识别问题 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MrTra ...

  7. Android 连接网络数据库的方式

    以连接MS SQL(sqlserver数据库)的网络数据库为例,从当前搜集的资料来看,一共有两种方式:在Android工程中引入JDBC驱动,直接连接:通过WebService等方法的间接连接. 采用 ...

  8. Java.Lang.NoSuchMethod 错误

    项目开发.调用webservice,方法调用报了 Java.Lang.NoSucheMethod..........,印象中记得是jar包冲突,maven项目,一看,这一堆jar包...用eclips ...

  9. cocos2d-x 显示触摸操作(显示水波点击效果,用于视频演示)

    昨天刚刚參加玩游戏设计大赛, 积累了一些东西. 接下去将会逐个分享出来. 首先是显示触摸操作. 由于要演示我们的作品.使用试玩过程中, 假设没办法显示我们的触摸操作(像录制视频一样, 点击了屏幕某点, ...

  10. 换主页轮播的主题图片（4、删除）---轻开电子商务系统(企业入门级B2C站点)

    接(  换主页轮播的主题图片1 ) 文件:site/links/img0.html中的表单(第11行最后一个td) <td><if x="@{sys:canDo}" ...