目录结构
1、修改src为examples
2、新建、配置vue.config.js
3、新建packages、新建packages/tyx-table/index.vue
4、index.vue是一个组件,name必须有
5、tyx-table下新建index.ts用作导出组件(按需引入需要,不做按需引入则不用)
6、packages下新建index.ts用作导出组件库
7、main.ts引入测试
8、配置打包信息
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx({})],
build: {
rollupOptions: {
// 请确保外部化那些你的库中不需要的依赖
external: ['vue'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue',
},
},
},
lib: {
entry: './packages/index.ts',
name: 'vue3-table',
},
},
})
npm install @vitejs/plugin-vue-jsx -D
9、npm run build
打包后可以在main.ts中测试是否能用
查看第7步
10、package.josn配置发布信息
{
"name": "tyx-ui",
"version": "0.1.0",
"files": [
"dist/*",
"tyx-ui.d.ts"
],
"main": "dist/tyx-ui.umd.cjs",
"module": "dist/tyx-ui.js",
"private": false,
"type": "module",
"author": {
"name": "tyx",
"email": "tyx243756769@163.com"
},
"license": "ISC",
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"element-plus": "^2.7.8",
"vue": "^3.4.31"
},
"devDependencies": {
"@types/node": "^22.1.0",
"@vitejs/plugin-vue": "^5.0.5",
"@vitejs/plugin-vue-jsx": "^4.0.0",
"typescript": "^5.2.2",
"vite": "^5.3.4",
"vue-tsc": "^2.0.24"
}
}
11、根目录下npm login && npm publish
会超时,一直访问,直到成功
其他问题:
文件 "...packages/index.ts" 不在项目 ".../tsconfig.app.json" 的文件列表中。项目必须列出所有文件,或使用 "include" 模式。
解决:tsconfig.app.json中配置include
{
"compilerOptions": {
...
},
"include": ["packages/**/*.ts","**/*.vue","examples/**/*.ts", "examples/**/*.tsx", "examples/**/*.vue"]
}
--------------------------------------------------------------------------------------
npm login || npm publish超时
第一步:执行npm config set proxy false
第二步:执行npm login -d 或 npm publish -d
注意:第二步的命令执行前都需要执行一次第一步命令
有点忘了,想起来啥补充啥吧