ant design vueオンラインカスタム交換トピックカラー

まずdemoソースの原文アドレスを見てant design proのテーマの色の交換を見てクールな感じがしたので、最近はvueでブログのすべてのvue+ant designで作ったこのdemoを書き直したいと思っています.
1プロジェクトの作成
vue cliでプロジェクトを作成した後、次の2つのプラグインをインストールする必要があります.1つ目はuiです.2つ目は色を変えるためのプラグイン「ant-design-vue」:「^1.4.8」、「antd-theme-generator」:「^1.1.7」です.
メールでjsには必ずantdを導入する.less
import ‘ant-design-vue/dist/antd.less’ import Antd from ‘ant-design-vue’ Vue.config.productionTip = false Vue.use(Antd)
2 colorを作成する.js
ディレクトリの下にcolorを作成します.jsコンテンツは

const path = require('path');
const { generateTheme, getLessVars } = require('antd-theme-generator');
// ant-design-vue/dist/antd.less
const options = {
 antDir: path.join(__dirname, './node_modules/ant-design-vue'), //      
 stylesDir: path.join(__dirname, './src/styles'),    //      
 varFile: path.join(__dirname, './src/styles/variables.less'), //      
 mainLessFile: path.join(__dirname, './src/styles/index.less'), //      
 themeVariables: [
 '@primary-color',
 '@secondary-color',
 '@text-color',
 '@text-color-secondary',
 '@heading-color',
 '@layout-body-background',
 '@btn-primary-bg',
 '@layout-header-background'
  ],
 indexFileName: 'index.html',
 outputFilePath: path.join(__dirname, './public/color.less'),
}
generateTheme(options).then(less => {
 console.log('Theme generated successfully');
})
.catch(error => {
 console.log('Error', error);
});

3 styleの作成
srcディレクトリの下にstyleフォルダを作成する
フォルダの下にindexを作成します.less variables.less 2ファイル
ここでindex.lessが空です
variables.lessコンテンツは
@import “~/ant-design-vue/lib/style/themes/default.less”; @link-color: #00375B; @primary-color: rgb(138, 164, 182); .primary-color{ color:@primary-color }
4 htmlの変更
publicの下のindex.htmlに以下のコードを追加
注意:このコードはbodyの最後にheadに追加しないでください.

 
 
 window.less = {
 async: false,
 env: 'production'
        };
 
 

5 packageを します.json
「serve」:「node color&&vue-cli-service serve」、「build」:「node color&&vue-cli-service build」、6
window.less .modifyVars({'@primary-color':this.color,'@link-color':this.color,'@btn-primary-bg':this.color})この で を します

// @ is an alias to /src

export default {
 name: 'home',
 components: {},
 data () {
 return {
 color: ''
    }
  },
 methods: {
 click (color) {
 this.color = color
 this.huan()
    },
 huan () {
 window.less
        .modifyVars({
 '@primary-color': this.color,
 '@link-color': this.color,
 '@btn-primary-bg': this.color
        })
        .then(() => {
 console.log('  ')
        })
        .catch(error => {
 alert('  ')
 console.log(error)
        })
    }
  }
}