用vue3+vite+ts打造一个属于自己的组件库_vue3+ts+vite常用组件

一、整体框架准备

• 首先打开 cmd，运行下面命令:yarn create vite，我们创建一个 vite 项目，选择 vue+ts 完成项目创建
• 在新建的项目根目录下创建package目录
• 在package下创建components目录
• 在components目录下面再创建一个你自己的组件目录，比如说button。
• 我们在button下面创建两个文件button.ts和Button.vue
• vue文件就写你自己的组件，ts文件代码如下，我们将这个组件暴露出去

import { App } from 'vue';

import Button from './Button.vue';

Button.install = (app: App) => {
  // 组件注册，按需引入
  app.component('Button', Button);
  return app;
};

export default Button;

1
2
3
4
5
6
7
8
9
10
11
12

• 在components目录下新建components.ts文件，代码如下

/**
 * 导出所有组件
 */
import Button from './button/Button';

export default [
  Button
];

export { Button };
1
2
3
4
5
6
7
8
9
10

• 在package目录下面新建index.ts入口文件，代码如下

import { App } from 'vue';
import components from './components/components';

// 这部分，如果你有一些配置参数要导出就可以用这个
import * as ButtonTypes from './components/button/types';

// 所有组件
export * from './components/components';

// 完整引入组件
const install = (app: App) => {
  components.forEach((component) => {
    app.use(component as unknown as { install: () => any });
  });
};

export default {
  install,
  ...ButtonTypes
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、安装一些必要的打包工具以及对vite的配置

• 首先我们下载一个插件vite-plugin-dts，yarn add vite-plugin-dts -D 这个插件可以将项目打包出库文件.d.ts。
• 我们在vite.config.ts文件里面配置一下

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path, { resolve } from 'path';

import dts from 'vite-plugin-dts';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    dts({
      insertTypesEntry: true,
      cleanVueFileName: true,
      include: ['packages/**/*']
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '~': path.resolve(__dirname, './packages')
    }
  },
  build: {
    outDir: 'lib',
    lib: {
      entry: resolve(__dirname, 'packages/index.ts'),
      name: 'CraneElement',
      fileName: (format) => `crane.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

• 这样其实已经可以了，但是typescript方面可能还有一些问题，我们要配置一下tsconfig.json文件

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "allowJs": true,
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./packages/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": [
    "node_modules"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35