公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧.以下记录我的项目框架搭建及填坑方案. 搭建可以参考我的另一篇文章vue-cli 3.0 搭建项目流程,这里就不再另外说明了.下面说明项目搭建成功后的适配方案. 第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible…

echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的一个小的echarts demo,我在使用npm的时候对比了echarts和vue-echarts两个依赖,最后决定使用echarts依赖包,因为它更接近原生,使用现实更小,如果对vue生命周期比较了解,那就更容易操作.下面讲一下做出这样一个echarts图. 一 基础的echarts图表制作 1.…

当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vue.config.js中 添加     lintOnSave: false,  false不能加引号 然后新建 .eslintignore    在根目录下 添加   然后重新启动 *.vue *.js 参考地址有 https://blog.csdn.net/weixin_44678104/arti…

2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...(config.dev.useEslint ? [createLintingRule()] : []),rules: [ // ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: "…

1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module.exports = { //configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方,你在这里设置,会新建或者覆盖 webpack 默认配置. //webpack ProvidePlugin 的含义是创建一个全局的变量,使这个变量在 webpack 各个模块内都可以…

需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-loader插件将第三方ui库的px转换成rem单位. (1) npm install px2rem-loader --save-dev 安装插件(2)然后在vue-cli项目找到built/utils文件,在里面加上以下代码: var px2remLoader = { loader: 'px2rem…

背景 在项目使用lib-flexible还有postcss-px2rem实现移动端适配,当我们引入第三方的样式组件库,发现一个问题.那些组件库的样式都变小了. 问题原因 变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.…

1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1.如果安装过旧版的VUE CLI需要先卸载掉 //三选一即可 npm uninstall vue-cli -g npm uninstall vue-cli -g yarn global remove vue-cli 2.VUE CLI3需要node.js8.9版本及以上 官方链接>> 2.vue…

最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX,避免被转成rem 可以参考一下这篇文章vue中的适配:px2rem 在webpack.base.conf.js中 vuxLoader中配置以下代码 { name: 'vux-ui' }, { name: 'after…

前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘flexible的解决方案,实现了个简单的demo. 一句话总结 flexible动态获取设备宽度和dpr,为html元素添加两个属性:data-fontsize(设备宽度/10),data-dpr(安卓均为1,ios不同设备为2或3),同时设置meta标签的scale(1/dpr).你只需要为需要适配的元素设置…