澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-05-04 09:49 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

vue移动端自适应布局

Vue三:脚手架配置

与原来的vue-cli 二.x本子区别的是:假如运用新型版本的@vue/cli起头化vue项目时,通常看不到webpack的配制文件。而在原本的二.x版本,大家能够在utils.js中轻轻巧松配制px贰rem互为表里配置。

原文: juejin.im

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

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'

二. 在项目进口文件main.js中引进lib-flexible

import 'lib-flexible/flexible.js'

布置目标

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

三.在项目public目录的index.html尾部到场手提式无线电话机端适配的meta的代码
  1. 使用手淘flexible布局,字体须要依靠dpr看来改换大小
  2. 选拔postcss-px2rem自动调换页面中的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

肆.在根目录下开创配制文件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地址)

注:

一.remUnit在此处要基于lib-flexible的规则来配制,如若你的设计稿是750px的,用75就恰恰好。

二.当你遇上一px的边框时,平时轻易开掘页面缺点和失误部分边框,那时你能够运用/no/语法来遮掩该属性转变,比如

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

三.是因为字体的特殊性,大家在编写翻译font-size属性时,平常不使用rem单位,那时候你能够这么使用:

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

5.配置px2rem-loader

原生配置:

然后在main.js使用

在vue-cli生成的webpack 配置中,vue-loader 的options和别的样式文件loader 最终都以由build/untils.js里的一个办法生成的。

1. 安装
import 'lib-flexible'

大家只必要在cssLoader前边加上一个px二remLoader就可以,px二rem-loader的remUnit 选项意思是一rem=稍微像素,结合lib-flexible,大家将px二remLoader的option.remUnit 设置成设计稿宽度的10%,这里我们只要设计稿的上升的幅度为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
})
})
}

设置css文件打包插件

cnpm i -D MiniCssExtractPlugin css-loader

到此处只是调用,剩下的施用格局下边化解。

6.再度起动项目就可以

安装lib-flexible:

cnpm i -S lib-flexible

消除难点二

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

cnpm i -D postcss postcss-loader postcss-px2rem

第一运转以下命令

二. 在类型进口文件main.js中引进lib-flexible

main.js

import'lib-flexible/flexible.js';

npm i postcss-loader postcss-px2rem -D

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:vue移动端自适应布局

关键词: 澳门威利斯人 VUE