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

二.在品种进口文件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. 设置postcss和scss还有less,不是本身神经病,是援引插件和私家习惯。
  6. 转移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:
澳门葡京 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

vue移动端自适应布局。mian.png

注:

一.remUnit在那里要依据lib-flexible的平整来配制,假诺你的设计稿是750px的,用7五就正好好。

②.当您超过一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里的1个办法生成的。

lib-flexible引进完结,上边引进方便一个插件px二rem-loader
接下去引进开辟用的 px转rem插件

1. 安装
import 'lib-flexible'

我们只供给在cssLoader前面加上二个px2remLoader就能够,px2rem-loader的remUnit
选项意思是一rem=稍微像素,结合lib-flexible,我们将px二remLoader的option.remUnit
设置成设计稿宽度的一成,那里我们只要设计稿的幅度为750px
,并将px贰remLoader 放进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

四. 在根目录下开创配制文件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*/其1注释。那样技艺依据dpr退换字体大小。chrome的移位端调节和测试工具不扶助dpr改换,所以能够手动改动dpr查看效果。

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

消除难点4

澳门葡京 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的也在那里引进以管教质量。

相关文章

发表评论

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

*
*
Website