mdesign-vue
v0.0.63
Published
1. 注意修改 main.js,注册插件,引入样式文件 import "@arco-design/web-vue/dist/arco.less"。
Downloads
81
Readme
使用说明
注意修改 main.js,注册插件,引入样式文件 import "@arco-design/web-vue/dist/arco.less"。
注意 vite.config.js 中的 css 配置项,需要从 mdesign-vue/theme 内导出 createThemeFiles 生成 tokens 对应的 less 和 js 文件后,使用 getDefaultTokens 获取默认的主题,然后应用。
ps. createThemeFiles 需要另起文件直接 node 执行一下或者其他方法亦可,确保在调用 getDefaultTokens 前 md-theme.js 已生成,否则无效果。
在项目中用到的颜色,尽可能的使用包导出来的 token 值。
参考:
// 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")