Vue antdv 定制主题配置(高低版本配置问题)

vue

一、简介

  • 在使用 ant-design-vue 时,需要修改一下全局的主题颜色,按照官方的配置流程配置失败,应该是版本问题。

二、安装 antdv

  • 安装 ant-design-vue

  • $ npm i --save ant-design-vue

  • main.js 中配置,完整引入

    import Vue from 'vue'

    import App from './App.vue'

    import router from './router'

    import store from './store'

    // 引入 antdv

    import Antd from 'ant-design-vue';

    // 这里引入的是 css 文件,后面需要自定义主题的话,需要换成 less 文件

    import 'ant-design-vue/dist/antd.css';

    // import 'ant-design-vue/dist/antd.less';

    Vue.config.productionTip = false

    // 注册 antdv

    Vue.use(Antd);

    new Vue({

    router,

    store,

    render: h => h(App)

    }).$mount('#app')

  • 使用按钮,这是默认样式

    <template>

    <!-- 使用按钮 -->

    <a-button type="primary">Primary</a-button>

    </template>

    三、自定义主题样式

    • antdv 的样式使用了 Less 作为开发语言,所以需要安装 Less 环境。

    • 参考 - 官方自定义主题文档

    • 参考 - 所有样式变量

    • 参考 - 以下是一些最常用的通用变量

      @primary-color: #1890ff; // 全局主色

      @link-color: #1890ff; // 链接色

      @success-color: #52c41a; // 成功色

      @warning-color: #faad14; // 警告色

      @error-color: #f5222d; // 错误色

      @font-size-base: 14px; // 主字号

      @heading-color: rgba(0, 0, 0, 0.85); // 标题色

      @text-color: rgba(0, 0, 0, 0.65); // 主文本色

      @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色

      @disabled-color: rgba(0, 0, 0, 0.25); // 失效色

      @border-radius-base: 4px; // 组件/浮层圆角

      @border-color-base: #d9d9d9; // 边框色

      @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

    • 创建 vue.config.js,加入下面配置,注意查看一下 package.json 中 less-loader 版本,根据版本选择对应的配置:

      // less-loader >= 6.0.0 (例如 less-loader@6.0.0)

      module.exports = {

      css: {

      loaderOptions: {

      less: {

      lessOptions: {

      // If you are using less-loader@5 please spread the lessOptions to options directly

      modifyVars: {

      // 这里就是样式变量的名称以及对应的值,可以按照上面提供的官方文档进行配置

      'primary-color': '#41B883',

      'link-color': '#41B883',

      'border-radius-base': '2px'

      },

      javascriptEnabled: true

      }

      }

      }

      }

      }

      // less-loader < 6.0.0 (例如 less-loader@5.0.0)

      module.exports = {

      css: {

      loaderOptions: {

      less: {

      // If you are using less-loader@5 please spread the lessOptions to options directly

      modifyVars: {

      // 这里就是样式变量的名称以及对应的值,可以按照上面提供的官方文档进行配置

      'primary-color': '#41B883',

      'link-color': '#41B883',

      'border-radius-base': '2px'

      },

      javascriptEnabled: true

      }

      }

      }

      }

    • main.js 中配置,css 文件调整为 less 文件

      import Vue from 'vue'

      import App from './App.vue'

      import router from './router'

      import store from './store'

      // 引入 antdv

      import Antd from 'ant-design-vue';

      // 这里引入的是 css 文件,后面需要自定义主题的话,需要换成 less 文件

      // import 'ant-design-vue/dist/antd.css';

      import 'ant-design-vue/dist/antd.less';

      Vue.config.productionTip = false

      // 注册 antdv

      Vue.use(Antd);

      new Vue({

      router,

      store,

      render: h => h(App)

      }).$mount('#app')

    • 重新运行项目,查看效果

以上是 Vue antdv 定制主题配置(高低版本配置问题) 的全部内容, 来源链接: utcz.com/z/376362.html

回到顶部