天津先进网站建设指导,网站建设案例基本流程,制作二维码的软件,企业画册设计印刷制作公司需要所以研究了一下怎么部署安装#xff0c;比较简单 先下载个vue项目 不用安准路由#xff0c;pinna 啥的#xff0c;只需要一个最简单的模版 删掉App.vue 中的其它组件 npm create vuelatest 开始写自定义组件 新建一个el-text 组件, name是重点#xff0c;vue3中… 公司需要所以研究了一下怎么部署安装比较简单 先下载个vue项目 不用安准路由pinna 啥的只需要一个最简单的模版 删掉App.vue 中的其它组件 npm create vuelatest 开始写自定义组件 新建一个el-text 组件, name是重点vue3中也得这么导出name属性 script
export default {name: elText,
}
/script
templatediv我是一个text组件{{ title }}button clickhandleClick按钮/button/div
/template
script setup
import {ref} from vue
let title ref(123)
let handleClick () {title.value 我的test
}
/script 新建index.js 导出自己写的组件 import elText from ./el-text.vueconst comment [elText]const install function (App) {comment.forEach((item) {App.component(item.name, item)})
}
// 判断是否直接引入文件如果是就不用调用Vue.use()
if (typeof window ! undefined window.Vue) {install(window.Vue)
}
export default install
测试自己写的组件有没有问题 vite 打包配置 name 名自己起就行了 import {fileURLToPath, URL} from node:urlimport {defineConfig} from vite
import vue from vitejs/plugin-vue
import path from node:path// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url)),},},build: {lib: {entry: path.resolve(__dirname, ./src/components/index.js),name: smart-process,fileName: process,},rollupOptions: {external: [vue],output: {globals: {vue: Vue,},},},},
}) 配置完成后执行 npm run build 配置package.json privite 必须是false文件地址也要写对 npm 发布
npm 网址 前提 npm 代理地址要用 npm官方镜像 npm login
// 登录成功后
npm publish使用
新建一个vue项目
npm i smart-process引入我自己部署的插件并使用 这里直接使用在smart-process 中开发的el-text组件 效果图
