vue2企业级项目（五）

vue2企业级项目（五）

页面适配、主题切换

1、适配

1. 项目下载插件

   npm install --save-dev style-resources-loader vue-cli-plugin-style-resources-loader
   

2. 修改vue.config.js部分内容

   const path = require("path");module.exports = {pluginOptions: {"style-resources-loader": {preProcessor: "less",patterns: [// 全局变量路径path.resolve(__dirname, "./src/styles/index.less"),],},},...
   };

3. 创建style/custom.less

   .rem(@px) {@result: unit((@px / 10), rem);
   }

4. 此时就可以在其他组件使用全局变量和全局混入函数

   <style lang="less" scoped>
   .wrap {width: .rem(100) [];color: red;background-color: @mycolor;
   }
   </style>
   

5. main.js引入最基础的flexible.js

   (function flexible(window, document) {var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;// 设置根字体大小function setRootFontSize() {var screenWidth = docEl.clientWidth || window.innerWidth || document.documentElement.clientWidth;var fontSize = screenWidth / 10; // 假设以屏幕宽度的 1/10 作为根字体大小docEl.style.fontSize = fontSize + 'px';}// 设置 viewport 的缩放比例function setViewportScale() {var scale = 1 / dpr;var metaEl = document.querySelector('meta[name="viewport"]');if (!metaEl) {metaEl = document.createElement('meta');metaEl.setAttribute('name', 'viewport');document.head.appendChild(metaEl);}metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');}setRootFontSize();setViewportScale();// 监听窗口大小变化，重新设置根字体大小和缩放比例window.addEventListener('resize', function() {setRootFontSize();setViewportScale();});
   })(window, document);
   

2、主题切换

静态更换

直接根据element-ui官方文档提供的主题生成器，生成自己的主题颜色样式包。然后下载，并在项目中引入。并删除之前原有的组件样式。

动态更换

https://www.cnblogs.com/jiaoshou/p/16178580.html

1. 下载插件

   npm install --save-dev webpack-theme-color-replacer@1.3.3
   

2. 修改vue.config.js

   const ThemeColorReplacer = require("webpack-theme-color-replacer");
   ...module.exports = [configureWebpack: {plugins: [new ThemeColorReplacer({fileName: "css/theme-colors-[contenthash:8].css",matchColors: ["#409EFF"],injectCss: true,}),],},
   ]
   

3. 切换颜色

   import client from "webpack-theme-color-replacer/client";function themeChange(color) {client.changer.changeColor({ newColors: ["" + color] });
   }