因为公司有个项目需求，手机端的。之前就写了一个一样的项目，只不过是用原生的写的，心想刚写了个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的更多相关文章

  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. Ubuntu上使用过的命令，Linux常用命令，mount 硬盘挂载， ls 列表list命令，cp 复制copy命令，mkdir 创建文件夹 ，nano 编辑器，cat 文档合并，chmod 文件权限，ssh win10连接ubuntu服务器的步骤

    man 帮助 > man ls # ubuntu的帮助 tar.gz 压缩解压 > tar -zcvf yzn.tar.gz /home/yzn # 压缩 > tar -zxvf y ...

  2. [Code+#4]最短路 （最短路）

    [Code+#4]最短路 题目背景 在北纬 91° ,有一个神奇的国度,叫做企鹅国.这里的企鹅也有自己发达的文明,称为企鹅文明.因为企鹅只有黑白两种颜色,所以他们的数学也是以二进制为基础发展的. 比如 ...

  3. unity C# 获取有关文件、文件夹和驱动器的信息

    class FileSysInfo { static void Main() { // You can also use System.Environment.GetLogicalDrives to ...

  4. 洛谷 P2630 图像变换

    P2630 图像变换 题目描述 给定3行3列的图像各像素点灰度值,给定最终图像,求最短.字典序最小的操作序列. 其中,可能的操作及对应字符有如下四种: A:顺时针旋转90度: B:逆时针旋转90度: ...

  5. Thumb指令集与ARM指令集的差别

    Thumb指令集          Thumb指令能够看做是ARM指令压缩形式的子集.是针对代码密度[1]的问题而提出的.它具有16为的代码密度.Thumb不是一个完整的体系结构,不能指望处理程序仅仅 ...

  6. Linux系统的LOG日志文件及入侵后日志的清除

    UNIX网管员主要是靠系统的LOG,来获得入侵的痕迹.当然也有第三方工具记录入侵系统的 痕迹,UNIX系统存放LOG文件,普通位置如下: /usr/adm - 早期版本的UNIX/var/adm -  ...

  7. js阻止默认事件与js阻止事件冒泡

    e.stopPropagation(); //阻止事件冒泡 功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e &am ...

  8. 让透明div里的文字不透明

    最近在工作中遇到一个问题,我在div里写上文字,当我把div变为半透明的时候,里面的文字也会随之透明.情况如下: <div class="box"> 这是一段不应该透明 ...

  9. Linux150个常用指令

    线上查询及帮助命令(2个) 文件和目录操作命令(18个) 查看文件及内容处理命令(21个) 文件压缩及解压缩命令(4个) 信息显示命令(11个) 搜索文件命令(4个) 用户管理命令(10个) 基础网络 ...

  10. Noip 2016 Day1 题解

    老师让我们刷历年真题, 然后漫不经心的说了一句:“你们就先做做noip2016 day1 吧” ...... 我还能说什么,,,,,老师你这是明摆着伤害我们啊2333333333 预计分数:100+2 ...