深圳华强北商业圈,广州seo成功案例,西安网页设计工作室,迎访问中国建设银行网站-vue3vite 发布自定义组件到npm 初始化项目编写组件配置打包组件上传到npm测试组件库 初始化项目
// 创建项目
pnpm create vite vue-test-app --template vue-ts// 运行项目
cd vite vue-test-app
pnpm install
pnpm run dev编写组件
1、根目录下创建packages目录作为组件的开… vue3vite 发布自定义组件到npm 初始化项目编写组件配置打包组件上传到npm测试组件库 初始化项目
// 创建项目
pnpm create vite vue-test-app --template vue-ts// 运行项目
cd vite vue-test-app
pnpm install
pnpm run dev编写组件
1、根目录下创建packages目录作为组件的开发包目录下的index.ts文件作为整个组件库的出口文件导出组件。
//index.ts
import type { App } from vue
import MyButton from ./Button
import MyTag from ./Tag// 所有组件列表
const components [MyButton,MyTag
]// 定义 install 方法
const install (app: App): void {// 遍历注册所有组件/*component.__name ts报错Argument of type string | undefined is not assignable to parameter of type string.Type undefined is not assignable to type string.ts(2345)解决方式一使用// ts-ignore解决方式二使用类型断言 尖括号语法(component.__name) 或 as语法(component.__name as string)*/components.forEach(component app.component(component.__name as string, component))
}export {MyButton,MyTag
}const VueTestUI {install
}export default VueTestUI2、编写组件创建packages/Button目录在该目录下创建Button.vue和index.ts文件。
// Button.vue
templatebutton classMyButton typebutton我是一个按钮组件/button/templatescript langtsexport default {name: MyButton, //组件名称必须设置data () {return {}},methods: {},filters: {},created () {}}
/scriptstyle.MyButton {color: red;}
/style// index.ts
import type { App } from vue
import MyButton from ./Button.vue// 使用install方法在app.use挂载
MyButton.install (app: App) {app.component(MyButton.__name as string, MyButton) //注册组件
}export default MyButton配置打包
1、修改vite.config.ts配置
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import path from path// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],base:/,build:{lib:{entry: path.resolve(__dirname, ./packages/index.ts), //指定组件编译入口文件name: vueMoUI,fileName: vue-mo-ui},//库编译模式配置rollupOptions: {external: [vue, swiper, vuepic/vue-datepicker, qrcode],output: {// format: es, // 默认es可选 amd cjs es iife umd systemexports: named,globals: { //在UMD构建模式下为这些外部化的依赖提供一个全局变量vue:Vue,// vue-router: VueRouter, // 引入vue-router全局变量否则router.push将无法使用swiper: Swiper,vuepic/vue-datepicker: VueDatePicker,qrcode: qrcode}}},/** 设置为 false 可以禁用最小化混淆或是用来指定使用哪种混淆器。默认为 Esbuild它比 terser 快 20-40 倍压缩率只差 1%-2%。注意在 lib 模式下使用 es 时build.minify 选项不会缩减空格因为会移除掉 pure 标注导致破坏 tree-shaking。当设置为 terser 时必须先安装 Terser。yarn add terser -D*/minify: terser, // Vite 2.6.x 以上需要配置 minify: terser, terserOptions 才能生效terserOptions: { // 在打包代码时移除 console、debugger 和 注释compress: {/* (default: false) -- Pass true to discard calls to console.* functions.If you wish to drop a specific function call such as console.info and/orretain side effects from function arguments after dropping the functioncall then use pure_funcs instead*/drop_console: true, // 生产环境时移除consoledrop_debugger: true},format: {comments: false // 删除注释comments}}}
})
2、执行打包pnpm run build会在dist文件夹下生成如下文件 3、修改package.json
//package.json{name: vue-mo-ui,private: false,version: 0.0.0,author: FenceRain,description: 组件发布npm练习,type: module,license: MIT,files: [dist],main: ./dist/vue-mo-ui.umd.cjs,module: ./dist/vue-mo-ui.js,exports: {./dist/style.css: ./dist/style.css,./css: ./dist/style.css,.: {import: ./dist/vue-mo-ui.js,require: ./dist/vue-mo-ui.umd.cjs}},scripts: {dev: vite,build: vue-tsc vite build,preview: vite preview},dependencies: {terser: ^5.19.2,vue: ^3.3.4,vue-mo-ui: ^0.0.0},devDependencies: {types/node: ^20.5.7,vitejs/plugin-vue: ^4.2.3,typescript: ^5.0.2,vite: ^4.4.5,vue-tsc: ^1.8.5}
}
组件上传到npm
1、需要先在npm官网注册自己的npm账户链接https://www.npmjs.com/ 2、查询是否已存在包名可以在npm官网查也可以使用 npm view 包名 3、上传包必须使用npm官方源如果配置的是其他镜像需要修改回来
查看当前源npm config get registry切换为npm源npm config set registry https://registry.npmjs.org
4、添加自己的账户
npm lgoin 回车按照提示操作登录完成之后可以通过npm who am i查看是够登录成功出现自己的账号即成功
5、上传包没有报错就是上传成功了可以登录npm查看到自己的包
npn publish测试组件库
1、安装组件
pnpm install vue-mo-ui2、导入使用
script setup langts
import {MyButton, MyTag} from vue-mo-ui
/scripttemplateMyButton/MyButtonMyTag/MyTag
/templatestyle scoped/style
3、如果样式没有加载就在main.ts中导入组件的样式文件
import ../node_modules/vue-mo-ui/dist/style.css
