mdesign-vue

使用说明

1. 注意修改 main.js，注册插件，引入样式文件 import "@arco-design/web-vue/dist/arco.less"。

2. 注意 vite.config.js 中的 css 配置项，需要从 mdesign-vue/theme 内导出 createThemeFiles 生成 tokens 对应的 less 和 js 文件后，使用 getDefaultTokens 获取默认的主题，然后应用。

   ps. createThemeFiles 需要另起文件直接 node 执行一下或者其他方法亦可，确保在调用 getDefaultTokens 前 md-theme.js 已生成，否则无效果。

3. 在项目中用到的颜色，尽可能的使用包导出来的 token 值。

4. 参考：

// vite.config.js
import createThemeFiles from "mdesign-vue/theme"
import getDefaultTokens from "mdesign-vue/token"
import * as COLORS from "./md-theme"

createThemeFiles("tokens.json")
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: getDefaultTokens(COLORS),
        javascriptEnabled: true,
      },
    },
  },
  plugins: [vue(), vueJsx()],
})
// main.js
import { createApp } from "vue"
import ArcoVueIcon from "@arco-design/web-vue/es/icon"
import App from "./App.vue"
import MdesignVue from "mdesign-vue"
import "@arco-design/web-vue/dist/arco.less"

const app = createApp(App)
app.use(ArcoVueIcon)
app.use(MdesignVue)
app.mount("#app")