Lib-flexible is recommended as a solution for intelligent large screen adaptation

Environment set up

  1. Scaffolding creation structure
  2. The installationflexible
npm i lib-flexible
Copy the code
  1. Project entry filemain.jsThe introduction oflib-flexible; deleteindex.htmlthemetaTag, because lib-flexible will dynamically rewrite tags with JS (add attributes data-dpr, font size)
import 'lib-flexible'
Copy the code
  1. The installationpostcss-px2rem
npm install postcss-px2rem -D
Copy the code
  1. invue.config.js, the configurationpostcss-px2rem
module.exports = { css: { loaderOptions: { css: {}, postcss: { plugins: [require(' postCSs-px2rem ')({// save for 1920, 1920/10 = 192 munit: 192}),]}}},};Copy the code
  1. Looking for a./node_modules/lib-flexible/flexible.jsModify the code
// Before the change, when the screen width divided by DPR (DPR is a multiple, usually 1) is greater than 540, Then no longer ADAPTS the function refreshRem () {var width = docEl. GetBoundingClientRect (). The width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } / / modified function refreshRem () {var width = docEl. GetBoundingClientRect (). The width; if (width / dpr < 1920) { width = 1920 * dpr; } else if (width / dpr > 5760) { width = 5760 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }Copy the code

echart

Echarts configuration

  1. The introduction ofechart, download JS and put itpublic/lib/echarts.min.jsIn thevue.config.js, the configurationecharts
module.exports = { configureWebpack: Assign (config, {// externals: {echarts: "echarts"}}); externals: {echarts: "echarts"}}); }, css: { loaderOptions: { less: { lessOptions: { // modifyVars: {}, javascriptEnabled: true } }, postcss: { // options here will be passed to postcss-loader plugins: [ require("postcss-px2rem")({ remUnit: 192 }) ] } } }, publicPath: "./" };Copy the code
  1. Load on demand using the babel-plugin-equire plug-in
  • Install the babel-plugin-equire plug-in first
npm i babel-plugin-equire -D
Copy the code
  • Then configure the plug-in in babel.config.js
Module. exports = {preset: ["@vue/cli-plugin-babel/preset"], plugins: [// preset to use "equire"]};Copy the code
  • ininitEcharts.jsOn demand
// eslint-disable-next-line
const initEcharts = equireAsync(["bar", "line","legend", "title","tooltip"]);

export default initEcharts;

Copy the code
  1. mainThe global variable
import initEcharts from "./core/initEcharts.js"; Vue.prototype.$initEcharts = initEcharts; If (echarts => {const chartInstance = echarts.init(this.$refs.chart) var option = {title: {text: 'ECharts starter example '}, Tooltip: {}, Legend: {data: [' sales ']}, xAxis: {data: [' shirts' and 'sweater', 'snow spins unlined upper garment,' pants', 'high heels',' socks']}, yAxis: {}, series: [{name: 'sales' type:' line 'data: [5, 20, 36, 10, 10, 20] }] } chartInstance.setOption(option) })Copy the code