vue移动端自适应布局

Vue三:脚手架配置

与原本的vue-cli
二.x版本区别的是:假如采纳最新版本的@vue/cli初步化vue项目时,常常看不到webpack的配制文件。而在原本的二.x版本,大家得以在utils.js中轻轻易松配制px二rem休戚相关铺排。

原文:
juejin.im

本篇作品引自
http://blog.csdn.net/z1712636234/article/details/77881685;

2018年1月23日 18:27:19
好久不见笔者的小伙伴们,从毕业到插手参预职业早就7个月了,这段日子过的很有含义哈哈
在座职业为了神速上手项目那多少个月都是9玖陆,学到了
多数好东西,接下去的光阴不加班我就早晨赶回把他们享受出去,摸摸哒~

1. 安装

基于vue-cli配置
接下来利用vux的webpack配置

1.安装lib-flexibl
npm i lib-flexible –save


安装lib-flexible:

npm i -S lib-flexible

npm i -D postcss postcss-loader postcss-px2rem

npm i vue-cli -g // 如果还没安装
vue init airyland/vux2 projectPath

cd projectPath
npm i

2.在类型进口文件main.js中引入lib-flexible
import ‘lib-flexible/flexible.js’

移动端自适应
发源手淘的 flexible

二. 在品种进口文件main.js中引进lib-flexible

import ‘lib-flexible/flexible.js’

安排目的

三.在品种根目录的index.html 底部参预手提式有线话机端适配的meta的代码
<meta name=”viewport” content=”width=device-width,
initial-scale=1.0″>

cnpm i lib-flexible -S
cnpm install px2rem-loader -S-d

三.在项目public目录的index.html底部出席手提式无线电话机端适配的meta的代码
  1. 使用手淘flexible布局,字体须求根据dpr看来退换加大小
  2. 运用postcss-px贰rem自动转变页面中的rem,但是字体不调换,border利用壹px方案化解也不转变
  3. 活动抬高浏览器包容前缀
  4. 采取fastclick消除点击延迟难题
  5. vue移动端自适应布局。安装postcss和scss还有less,不是本身神经病,是援引插件和个人习惯。
  6. 改变vux的px为PX,因为weUI未有运用rem,使用的是em和px,不过又不能够把它的px给调换到rem,而且vux还有1个一px.less,也无法把它的px调换来大写。不过浏览器不管px是大大小小写,都能根据px解析。

4.安装px2rem-loader
npm install px2rem-loader

在档案的次序入口文件 main.js 里 引进 lib-flexible

4.在根目录下创制配制文件vue.config.js,并配制如下消息

vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins: [require('postcss-px2rem')({
                    remUnit: 75
                })]
            }
        }
    }
}

res:
澳门葡京 1

消除难题1

选拔flexible插件时
会自动把px调换来rem单位。在vue-cli中设置过lib-flexible之后
,将px调换来rem,大家将利用px二rem以此工具, 它有webpack的loader:
https://github.com/Jinjiang/px2rem-loader
(这是px2rem-loader的github地址)

// main.js
import ‘lib-flexible’

澳门葡京 2

mian.png

注:

一.remUnit在那边要依赖lib-flexible的条条框框来配制,假如你的设计稿是750px的,用7伍就正好好。

2.当你相逢一px的边框时,平常轻巧开掘页面缺点和失误部分边框,那时你能够使用/no/语法来遮掩该属性转变,比如

border: 1px solid red; /*no*/

叁.出于字体的特殊性,大家在编写翻译font-size属性时,经常不利用rem单位,那时候你可以如此使用:

font-size: 24px; /*px*/
npm i lib-flexible -S

5.配置px2rem-loader

解决后到开拓者工具查看根节点有没有增加data-dpr=”一”来推断是还是不是引进成功

原生配置:

然后在main.js使用

在vue-cli生成的webpack 配置中,vue-loader 的options和任何样式文件loader
最后都是由build/untils.js里的八个办法生成的。

lib-flexible引入完成,上面引进方便贰个插件px贰rem-loader
接下去引进开垦用的 px转rem插件

1. 安装
import 'lib-flexible'

我们只供给在cssLoader后边加上3个px二remLoader就能够,px二rem-loader的remUnit
选项意思是一rem=有点像素,结合lib-flexible,大家将px2remLoader的option.remUnit
设置成设计稿宽度的一成,这里我们即便设计稿的增进率为750px
,并将px2remLoader 放进loaders数组中
const px2remLoader = {
loader: ‘px2rem-loader’,
options: {
remUnit: 75
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
//小编的系列上本来的是const loaders = options.usePostCSS ? [cssLoader,
postcssLoader] : [cssLoader],将她替换来上边包车型大巴就足以了
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + ‘-loader’,
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

// build/utils.js
var cssLoader = {
loader: ‘css-loader’,
options: {
minimize: process.env.NODE_ENV === ‘production’,
sourceMap: options.sourceMap
}
}
var px2remLoader = {
loader: ‘px2rem-loader’,
options: {
remUnit: 75
}
}

// …

安装css文件打包插件

cnpm i -D MiniCssExtractPlugin css-loader

到那边只是调用,剩下的应用办法下边消除。

陆.再次开动项目就可以

放进 loaders 数组中

安装lib-flexible:

cnpm i -S lib-flexible

斩草除根难题2

// utils.js
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,
px2remLoader] : [cssLoader, px2remLoader]
// …

澳门葡京 3

utils.png

安装postcss和postcss-loader和postcss-px2rem:

cnpm i -D postcss postcss-loader postcss-px2rem

先是运转以下命令

修改配置后要求重启,然后大家在组件中写单位一向写 px , 设计稿多少就写多少
, 自动转rpx,美滋滋哈哈
消除后到开荒者工具查看css中的px是不是转换为rem来决断是不是引进成功

二. 在品种进口文件main.js中引进lib-flexible

main.js

import’lib-flexible/flexible.js’;

npm i postcss-loader postcss-px2rem -D

澳门葡京 4

三.在项目public目录的index.html底部参预手提式有线电话机端适配的meta的代码

因为主题素材三也是postcss的插件,所以一齐消除。(要是你依照vux的webpack依照的,难点3可总结)
再安装

vue.png

4. 在根目录下成立配制文件vue.config.js,并配制如下新闻

vue.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin"); 
const VueLoaderPlugin = require('vue-loader/lib/plugin'); 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const px2rem = require('postcss-px2rem');

function resolve (dir) {
    return path.join(__dirname,dir)
}
module.exports= {
    mode:"development",
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:"main.bundle.js"
    },
    resolve :{
        extensions: ['.js', '.vue', '.json',".css"],
         alias: {
           'vue$': 'vue/dist/vue.esm.js',
           '@': resolve('src'),
         }
    },
    devServer:{
        contentBase:"./dist",
        port:9000,
        open:true,
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:"./public/index.html",
            filename:"index.html"
        }),
        new CleanWebpackPlugin(['./dist']),
        new MiniCssExtractPlugin({
          filename: "color.css",
         // chunkFilename: "[id].css"
        })
    ],

    module:{
        rules:[
            { test: /\.vue$/, loader: 'vue-loader'},
            //{test:/\.css$/,use:['style-loader','css-loader']},
            {
                test:/\.css$/,
                exclude:/node_modules/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader:"postcss-loader",
                        options:{
                            plugins:()=>[ 
                                px2rem({remUnit: 75})
                            ]
                        }
                    },
                ]
            },
            {
                test:/\.js$/,
                exclude:/(node_modules|bower_components)/,
                use:['babel-loader']
            },
            {
                test:/(png|gif|jp(e)?g)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192
                        }
                    }
                ]
            }

        ]
    }
}

res:
澳门葡京 5

npm i autoprefixer -D

参考资料:

postcss-px2rem:

mini-css-extract-plugin:

{
    test: /\.css$/,
    exclude: /node_modules/,
    use: [

     MiniCssExtractPlugin.loader, 
      "css-loader",
    //   "postcss-loader"
      {
          loader:"postcss-loader",
          options:{
              plugins:()=>[ 
              px2rem({remUnit: 75})
            ]
          }
      },

    ]
},

有关autoprefixer的配备自身查,能够查阅如下小说
autoprefixer配置

Vue引进饿了么ElementUI
Element-ui
国语文档
下边教程 急迅上手

然后在build的vue-loader.conf.js配置postcss

npm i element-ui -S

//main.js
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)

//.Vue中央直机关接使用
<el-button>暗中认可按键</el-button>
<el-button type=”primary”>重要开关</el-button>

postcss: [
    require('autoprefixer')({
      browsers: ['iOS >= 7', 'Android >= 4.1']
    }),require('postcss-px2rem')({
      rootValue: 75, // 这里对应的是750的设计图尺寸
      selectorBlackList: ['html'],
      mediaQuery: true,
      propBlackList: ['border-radius','border'] // 如果要保持font-size不转换,替换为 ['font-size']
    })
  ]

<el-button type=”text”>文字开关</el-button>

此处自个儿的配备是依靠手淘布局方案的,自身能够有友好的适配方案。

澳门葡京 6

接下来手淘方案有字体依据dpr动态改造,所以书写CSS的时候要在后边加上注释,如下:

element.png

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

因为自个儿安插了border不调换,所以/*no*/,能够不用加,加了也不顶用。然则字体一定要运用/*px*/以此注释。这样才能依赖dpr改换字体大小。chrome的移动端调节和测试工具不支持dpr改换,所以可以手动改换dpr查看效果。

npm run dev 后显示空白修改config/index.js 中
build对象中的assetsPublicPath: ‘/’, 为 ‘./

消除难题四

澳门葡京 7

即使您是安分守纪地点一步步来的,难题四已经消除了,要是否依照来了,应该如下方法化解。
在main.js里面引进

index.png

import FastClick from 'fastclick'
FastClick.attach(document.body)

澳门葡京 ,加油宝宝们~

引进从前要设置,笔者就不写了,假若你忘了还找不到不当,真真的不切合那行。

杀鸡取蛋难点伍

本条标题不另行,难的是安装scss,用下边包车型大巴方法

npm i node-sass sass-loader scss-loader -D

消除难点陆

那是最难的,也是最烦的,weUI竟然没动用rem布局,用的px加em。
接下来经过寻找,开掘有人化解方案很鸡贼,最近开采的鸡贼方案相比较多,举个例子静音播放未有动静的点子那一个狠毒消除方案有空也足以唠唠。

题外话
微信iOS收款到账语音提醒开采总计

贴具体代码吧,如若你是依据vux的webpack安装的,只须求开采webpack.base.conf.js文件,然后把最下面包车型地铁module.exports修改为以下内容

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style',{
    name: 'after-less-parser',
    fn: function (source) {
      if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {
        source = source.replace(/px/g, 'PX')
      }
      // 自定义的全局样式大部分不需要转换
      if (this.resourcePath.replace(/\\/g, '/').indexOf('App.vue') > -1) {
        source = source.replace(/px/g, 'PX').replace(/-1PX/g, '-1px')
      }
      return source
    }
  }, {
    name: 'style-parser',
    fn: function (source) {
      if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {
        source = source.replace(/px/g, 'PX')
      }
      // 避免转换1PX.less文件路径
      if (source.indexOf('1PX.less') > -1) {
        source = source.replace(/1PX.less/g, '1px.less')
      }
      return source
    }
  }]
})

若是还是不是,那就像是此改,把module.exports的剧情改成以上内容。

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

参照文书档案

  1. vux文档
  2. npm网站
  3. 荒漠的手淘布局方案flexible
  4. vux的github
    另外:

vue+vux+es六+webpack移动端常用配备步骤

  1. 创制项目(vue项目标流水生产线就不多讲了)**

  2. cnpm install vux –save**

  3. build/webpack.base.conf.js配置:

const vuxLoader = require('vux-loader')
把第一个module.exports赋值变量**let webpackConfig** ={里面代码不动}
然后这个放在最底部去
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
})

4.安装vux-loader使用命令cnpm install vux-loader -D

5.cnpm install less less-loader –save-dev 以准确编写翻译less源码

6.cnpm install yaml-loader –save-dev 以精确实行语言文件读取

7.index.html入口页面<meta name=”viewport”
content=”width=device-width,initial-scale=1,user-scalable=0″>

8.main.js个中配备:
(要求设置重视cnpm install fastclick –save
const FastClick = require(‘fastclick’)
FastClick.attach(document.body) //去掉点击延迟300秒
(要求设置正视cnpm install axios –save
const axios = require(‘axios’)
Vue.prototype.$ajax = axios;

9.index.html在那之中引入rem自适应布局的js,有必要用jq的也在这里引入以保证品质。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website