vue移动端自适应布局

By admin in 4858美高梅 on 2019年4月17日

Vue三:脚手架配置

与原先的vue-cli
二.x版本差异的是:假如选拔最新版本的@vue/cli开首化vue项目时,常常看不到webpack的配制文件。而在原先的2.x本子,大家得以在utils.js中轻便配制px二rem相关布署。

原文:
juejin.im

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

4858美高梅 ,2018年1月23日 18:27:19
好久不见我的同伴们,从完成学业到加入加入工作壹度7个月了,那段时光过的很有意义哈哈
参加工作为了火速上手项目那4个月都以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’

配备目标

3.在品种根目录的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-px2rem自动转换页面中的rem,但是字体不转变,border利用1px方案化解也不调换
  3. 电动抬高浏览器包容前缀
  4. 利用fastclick化解点击延迟难题
  5. 设置postcss和scss还有less,不是自作者神经病,是引用插件和私家习惯。
  6. vue移动端自适应布局。转换vux的px为PX,因为weUI未有采纳rem,使用的是em和px,可是又无法把它的px给调换到rem,而且vux还有二个一px.less,也不可能把它的px转变到大写。可是浏览器不管px是大小写,都能依照px解析。

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

在品种进口文件 main.js 里 引入 lib-flexible

四.在根目录下创办配制文件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:
4858美高梅 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’

4858美高梅 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=”1″来判定是不是引进成功

原生配置:

然后在main.js使用

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

lib-flexible引进达成,下边引进方便2个插件px2rem-loader
接下去引入开荒用的 px转rem插件

1. 安装
import 'lib-flexible'

作者们只要求在cssLoader前面加上二个px二remLoader就能够,px2rem-loader的remUnit
选项意思是一rem=稍微像素,结合lib-flexible,大家将px二remLoader的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

赶尽杀绝难题二

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

4858美高梅 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

4858美高梅 4

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

因为难点三也是postcss的插件,所以一同解决。(如若你遵照vux的webpack依照的,难题三可总结)
再安装

vue.png

四. 在根目录下创办配制文件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:
4858美高梅 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>

此处作者的安顿是基于手淘布局方案的,本人能够有温馨的适配方案。

4858美高梅 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: ‘/’, 为 ‘./

缓解难题四

4858美高梅 7

一经您是遵守下边一步步来的,难题肆早就缓解了,尽管不是鲁人持竿来了,应该如下方法消除。
在main.js里面引进

index.png

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

加油婴孩们~

引进以前要安装,小编就不写了,若是您忘了还找不到不当,真真的不适合那行。

消除难题5

那个主题素材不重复,难的是设置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的也在那里引进以保证品质。

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有