1, flexible installation and postcss-px2rem
Under adaptive development approach can still be so: the amount to you in the design view of the pixel (px) is how much you can write how much px. You easily Oh development projects
There are pictures code straightforward
npm install the following two things at the same time, you can also be installed separately.
npm i lib-flexible postcss-px2rem --save
First introduce flexible effects and action
flexible page will automatically label according to the screen, a dynamic property control value === initial-scale, maximum-scale, minimum-scale and other> device scaling ratio
iphone6 / 7/8 the font-size 75px is shown in FIG.
As shown in Fig
font-size at Pixel is 82.2px (PS: Pixel is a Google phone, of course, this is not the point.)
postcss-px2rem use as follows:
postcss-px2rem px will convert REM , REM unit for adapting different widths of the screen, is calculated according to the results of the font-size value tag, 1rem = font-size value html tag.
As follows:
full of px as a unit, but may still be adaptive, so it is easy to develop, you amount to in the design view of the pixel (px) px is how much you can write
the above class .click_btn run in a Web page automatically converted to the corresponding px rem.
After understanding the role, then we start to do it!
The introduction of lib-flexible
The introduction of lib-flexible in the project entry file main.js
import 'lib-flexible'
Note (important): Due to flexible dynamically add tags to the page header, so be sure to please the directory public / index.html in this tab delete or comment! ! !
as follows:
Configuring postcss-px2rem
vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多，将一些默认配置进行了更好更严密，让开发变得更高效的封装。
px2rem的配置放在vue-cli3 项目中vue.config.js中。
vue-cli3创建的项目是没有vue.config.js的，但是最后你开发完了项目也要打包的，到时候也得手动创建这个文件！
手动在项目根目录创建vue.config.js
完整的vue.config.js的代码我放在本文末尾，直接复制过去可以使用。
你需要配置的只有一个值(上图中紫色圈圈)：
remUnit 这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把remUnit设置为75（设计图宽度的十分之一），这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
如果你引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem
你可以将remUnit的值设置为设计图宽度（这里假设为750px）75的一半 ==> 37.5，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。
下面是vue.config.js，复制过去可直接使用
module.exports = {
// 基本路径
baseUrl: process.env.NODE_ENV === 'production' ? './' : './',
// 输出文件目录
outputDir: 'dist', // 默认dist
// 用于嵌套生成的静态资产（js,css,img,fonts）目录
// assetsDir: '',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
indexPath: 'index.html', // Default: 'index.html'
filenameHashing: true,
// 构建多页时使用
pages: undefined,
// eslint-loader是否在保存的时候检查
lintOnSave: true,
// 是否使用包含运行时编译器的Vue核心的构建
runtimeCompiler: false,
// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
transpileDependencies: [],
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
},
// 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: config => {
/*config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
// 修改它的选项...
return options
})*/
},
// css相关配置
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
css: {},
postcss: {
plugins: [
//remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
//假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
require('postcss-px2rem')({
remUnit: 75
})
]
}
},
},
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
open: true,
hotOnly: false,
proxy: null, // 设置代理
before: app => {},
},
// PWA 插件相关配置
pwa: {},
// 第三方插件配置
pluginOptions: {
// ...
}
}
