vue3新建组件库项目并上传到私库

创建vue3项目,步骤省略

nexus配置

访问 http://192.168.0.9:8081/

账号密码 admin Yanfabu01!

参考网址 https://www.jb51.net/javascript/3178205jj.htm

项目满足的条件

tsconfig.json\]中 添加"baseUrl": "." ![](https://i-blog.csdnimg.cn/direct/49867a25c2154c508bfab0c6adfbe977.png) \[package.json\]中 添加 "private": false, "main": "/packages/index.js" ![](https://i-blog.csdnimg.cn/direct/7a907aa49d234edfbdf94b404164ce12.png) 新建packages文件夹,编写组件 ![](https://i-blog.csdnimg.cn/direct/b540e7cd50744c8c8c091782648de63f.png) index.js代码 ```javascript import { version } from '../package.json' import TyInput from './input/tyInput.vue' import TyButton from "./button/tyButton.vue"; const components = [TyInput, TyButton] const install = function(Vue, opts = {}) { components.forEach(component => { Vue.component(component.name, component) }) } /* istanbul ignore if */ if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { version, ...components, install } ``` package.json中代码 ```javascript { "name": "tuyang-ui-plus", "version": "1.0.0" } ``` 建立组件tyButton,新建button文件夹,下面建立tyButton.vue和index.js tyButton.vue代码 ```javascript ``` index.js中代码 ```javascript // 导入组件 import TyButton from 'tyButton' TyButton.install = function(Vue) { Vue.component('TyButton', TyButton) } export default TyButton ``` 项目中测试组件是否好用,src文件下新建index.vue ```javascript ``` # 组件库发布命令 ## 设置本地仓库镜像源 npm config set registry http://192.168.0.9:8081/repository/tuyang-npm-group/ ## 登录本地仓库 npm login --registry=http://192.168.0.9:8081/repository/tuyang-npm/ username:admin password:Yanfabu01! email:xxxxx ## 发布到本地仓库 npm publish --registry=http://192.168.0.9:8081/repository/tuyang-npm/ ## 查看组件 浏览器访问 http://192.168.0.9:8081/ # 组件安装及使用 1. npm install tuyang-ui-plus 2.main.js中引入 import tuYangUiPlus from 'tuyang-ui-plus' app.use(tuYangUiPlus)

相关推荐
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ2 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了2 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
神仙别闹4 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
HuaHua的世界6 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
H5开发新纪元6 小时前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
icefiresong248 小时前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js
tjh000110 小时前
vue3+TS 手动实现表格滚动
前端·javascript·vue.js
章若楠圈外男友10 小时前
修改了Element UI中组件的样式,打包后样式丢失
前端·vue.js
86Eric11 小时前
Vue 中 使用 Mixins 解决 多页面共用相同组件的相关问题
前端·javascript·vue.js·mixins·公用组件