npm i cnhis-design-vue@[版本号]
# or
yarn add cnhis-design-vue@[版本号] #推荐
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import 'cnhis-design-vue/es/packages/index.css';
import cui from 'cnhis-design-vue';
const app = createApp(App);
app.use(cui).mount('#app');
组件现在支持了自动按需引入, 但是样式文件需要额外的处理
# 安装自动导入样式的插件
npm i -d vite-plugin-style-import
// vite.config.ts
import { defineConfig } from 'vite';
import { createStyleImportPlugin } from 'vite-plugin-style-import';
export default defineConfig({
plugins: [
// ...otherPlugins
createStyleImportPlugin({
libs: [
{
libraryName: 'cnhis-design-vue',
esModule: true,
ensureStyleFile: true,
resolveStyle: name => {
return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
}
}
]
})
]
});
// main.ts
import 'cnhis-design-vue/es/components/index.css';
处理方法, 将 cnhis-design-vue 从 vendor 包中移除 (没有出现此问题则不需要)
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
// ..otherOptions
output: {
dir: './dist',
manualChunks: {
'cnhis-vendor': ['cnhis-design-vue']
}
}
}
}
});