记录vue2+ant-design-vue框架换肤

最新推荐文章于 2024-07-23 21:45:00 发布

毅争晨夕

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量376

点赞数 5

文章标签： vue.js 前端 javascript 前端框架 css anti-design-vue

本文链接：https://blog.csdn.net/qq_45649849/article/details/140549908

版权

最近接手了个项目，要进行一个换肤，用的vue2加ant-design-vue组件，仿网上的进行写了下换肤，自己记录一下。

因为这个项目没有less,我需要下载一下，最开始下载的是版本less，然后运行报错了，就换成了指定版本：

"less": "^2.7.2",

"less-loader": "^5.0.0",

此框架要换肤，还要用到它： "antd-theme-generator": "^1.2.11",

然后要在man.js引入下面文件，因为我的项目是按需引入的，而且是一个单独文件，但引入方法一样.

//测试换肤
import "ant-design-vue/dist/antd.less"

引入完成后，还要在config里面进行配置这些东西

module.exports = {
    dev:{
     ...// 项目自定义的api路径  
    },
    //与dev同级别下
    css: {
     loaderOptions: {
      less: {
        // lessOptions: {   //如果less在5以上吧可能要打开此设置
          javascriptEnabled: true,    //主要是他
          //  // modifyVars: {
          //     // 初始化可直接覆盖变量
          //  //        'theme-color': '#1890FF',
          //  //},
          // 兼容 less-loader 3.x
          // math: "always",
        // }  //如果less在5以上吧可能要打开此设置
      }
     }
    },

}

我看网上生效要设置style为true，我在我的 .babelrc 文件里面把下面的style设置为了true,

依据网上的方法(Teln_小凯)，然后在src目录下创建一个theme文件夹，然后按照下面展示的内容依次创建。

一：cus-theme.less文件内容如下：


.ant-layout-header {
    background-color: @header-back-color;
    .header-item:hover{
        background-color: @header-item-hover-color;
    }
}

二：variables.less内容如下：

//插件默认主题变量+这些变量必须在themejs里面定义好
@primary-color: #1890ff; // 全局主色
//自定义样式
@header-item-hover-color:blue;//头部项浮动颜色
@header-back-color:#1890ff;//头部底色

三：theme.js文件内容如下

const fs = require("fs");
const path = require('path');
 
 
const { generateTheme } = require('antd-theme-generator');
const options = {};
//生成的theme.less文件的位置
const outputFilePath = path.join(__dirname, '../../../static/theme.less');
//自定义样式
const cusCssFilePath = path.join(__dirname, '../cus-theme.less');
 
generateTheme({
  //node_modules中antd的路径
  antDir: path.join(__dirname, '../../../node_modules/ant-design-vue'), 
  //styles对应的目录路径,需要和下面的variables.less在一个文件夹
  stylesDir: path.join(__dirname, '../'), 
  //less变量的入口文件，variables.less里面定义的变量，必须在themeVariables里面定义
  varFile: path.join(__dirname, '../variables.less'), 
  //您要动态更改的变量列表
  themeVariables: ['@primary-color', '@header-item-hover-color', '@header-back-color'], 
  outputFilePath: outputFilePath,
  customColorRegexArray: [/^color\(.*\)$/],
})
  .then(res => {
    console.log('主题成功');
    //自定义样式与ant主题样式合并
    //读取提取过的ant样式
    const themeCss = fs.readFileSync(outputFilePath).toString();
    //读取自定义的CSS
    const cusCss = fs.readFileSync(cusCssFilePath).toString();
    fs.writeFileSync(outputFilePath, themeCss + cusCss);
    //重新覆盖themeCss
    console.log(`主题成功. OutputFile: ${outputFilePath}`)
  })
  .catch(res => {
    console.log('配置主题失败');
  });

然后要在我们的index.html里面进行配置内容

  <body>
    <div id="app"></div>

    <!--主要是下面这些内容-->
    <link rel="stylesheet/less" type="text/css" href="/static/theme.less" />
    <script>
      window.less = {
        async: false,
        env: "production",
      };
      // document.getElementById('app').style.setProperty('--color',             
      // '$store.state.headerColor')
    </script>
    <script type="text/javascript"     
      src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
    <!-- <script type="text/javascript" src="/static/less.min.js"></script> -->


  </body>

此时我要把启动命令换一下,主要是&&前面的命令，后面webpack~那些是项目本身的(根据项目自定义)。

    "dev": "node src/theme/js/theme.js && webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node src/theme/js/theme.js && node build/build.js"

启动项目完成后会发现在static下有个theme.less文件

如果启动报错，可能是less版本不对或者antd-theme-generator版本不对，根据项目版本可以下载对应的指定版本（npm install antd-theme-generator@1.2.11 --save）,不要忘了重新npm i 一下。

为了确保在本地能够持久化，我用store和本地存储，

const state = {
    headerColor: localStorage.getItem('headerColor')  ? localStorage.getItem('headerColor') : '#474c5a',
}

mutations:{
    //测试换肤
    setHeaderColor (state, val) {
        state.headerColor = val
        localStorage.setItem('headerColor', val)
    },
},
actions: {
    updateHeaderColor (context, color) {
       context.commit('setHeaderColor', color);
    },
}

我直接把颜色绑定到了全局上（App.vue）里面（省事）

为了求稳然后在app.vue里面又做了监听

data(){
      return{
        color1:'#5784BC',
      }
    },
    //测试换肤
    watch:{
      "$store.state.headerColor":{
      handler(val,oldval){
        this.color1=val;
      },
      immediate:true
    },
    },

剩下的就是用颜色选择器了，这个组件我用的版本低没有颜色选择器为了方便，我用了elementUi的。

<div>
    <span>主题色选择：</span>
    <el-color-picker
       v-model="color1"
       @change="changeColor"
    ></el-color-picker>
</div>

  data() {
    return {
      color1:"#2F9B78",
    }
  }
//...//
methods:{

   changeColor(color) {
      this.color1 = color;
      this.$store.commit("setHeaderColor", color);
      window.less.modifyVars({
        "primary-color": localStorage.getItem("headerColor")
          ? localStorage.getItem("headerColor")
          : color,
        //或者这样写也行 "primary-color":this.$store.state.headerColor,
        "header-item-hover-color": localStorage.getItem("headerColor")
          ? localStorage.getItem("headerColor")
          : color,
        "header-back-color": localStorage.getItem("headerColor")
          ? localStorage.getItem("headerColor")
          : color,
      });
      this.$message.success("配置成功")
    },

}

此时此刻我发现可以完成换肤了，但这是老项目，本身没有增加这个功能，之前颜色都是写死的，我找到了我项目中的base.css文件(相当于全局文件吧)，把一些字体颜色什么换成了var(--color)。

然后我在界面写入颜色的时候用的动态:var(--color),比如 color:var(--color);

看着网上的一些方法进行编写，然后报错了进行依次处理，就这样完成了。

毅争晨夕

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
记录vue2+ant-design-vue框架换肤

如果启动报错，可能是less版本不对或者antd-theme-generator版本不对，根据项目版本可以下载对应的指定版本（npm install antd-theme-generator@1.2.11 --save）,不要忘了重新npm i 一下。此时此刻我发现可以完成换肤了，但这是老项目，本身没有增加这个功能，之前颜色都是写死的，我找到了我项目中的。然后要在man.js引入下面文件，因为我的项目是按需引入的，而且是一个单独文件，但引入方法一样.最近接手了个项目，要进行一个换肤，用的vue2加。
复制链接

扫一扫