# 安装

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

## 1.全局引入

```typescript
// 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 (按需引入样式)

```shell
# 安装自动导入样式的插件
npm i -d vite-plugin-style-import
```

```typescript
// 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 (全局引入样式)

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

## 3.FAQ

### 3.1 项目打包后样式丢失

处理方法, 将 cnhis-design-vue 从 vendor 包中移除 (没有出现此问题则不需要)

```typescript
// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      // ..otherOptions
      output: {
        dir: './dist',
        manualChunks: {
          'cnhis-vendor': ['cnhis-design-vue']
        }
      }
    }
  }
});
```