一、整体框架准备
- 首先打开 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;
- 在components目录下新建components.ts文件,代码如下
import Button from './button/Button';
export default [
Button
];
export { Button };
- 在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
};
二、安装一些必要的打包工具以及对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';
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'
}
}
}
}
});
- 这样其实已经可以了,但是typescript方面可能还有一些问题,我们要配置一下tsconfig.json文件
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"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" }]
}