cnhis-design-vue

安装

npm i cnhis-design-vue@[版本号]
# or
yarn add cnhis-design-vue@[版本号] #推荐

1.全局引入

// 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');

2. 按需引入

组件现在支持了自动按需引入, 但是样式文件需要额外的处理

2.1 样式处理方式1 (按需引入样式)

# 安装自动导入样式的插件
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`;
          }
        }
      ]
    })
  ]
});

2.2 样式处理方式2 (全局引入样式)

// main.ts
import 'cnhis-design-vue/es/components/index.css';

3.FAQ

3.1 项目打包后样式丢失

处理方法, 将 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']
        }
      }
    }
  }
});