Cnhis-design-vue NPM

安装

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. 按需引入

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

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

3.FAQ

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

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

安装

1.全局引入

2. 按需引入

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

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

3.FAQ

3.1 项目打包后样式丢失