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] });
   }