招投标网站建设,网站开发业务好做吗,专业手机网站建设价格明细表,注册网站有什么用npm发布vue3自定义组件库
创建项目
vue create test-ui自定义组件
创建自定义组件#xff0c;组件名称根据你的需求来#xff0c;最好一个组件一个文件夹#xff0c;下图是我的示例。 src/components 组件和你写页面一样#xff0c;所谓组件就是方便实用#xff0c;不…npm发布vue3自定义组件库
创建项目
vue create test-ui自定义组件
创建自定义组件组件名称根据你的需求来最好一个组件一个文件夹下图是我的示例。 src/components 组件和你写页面一样所谓组件就是方便实用不用重复搬动页面到不同的项目可以直接install到你本地的项目下图是一个示例。 编写完组件后你可以在App.vue里测试一下是否可以正常使用
准备发布
组件封装
在components目录下新建index.js文件,把你想发布的组件写在里面
组件打包配置
修改package.json文件配置打包命令 –target lib 关键字 指定打包的目录 –name 打包后的文件名字 –dest 打包后的文件夹的名称
开始打包
执行打包命令
npm run package打包完之后项目目录下就会多出一个cjulyUI文件夹存放的是打包后的文件
初始化打的包的package.json
进入打的包目录下然后执行初始化命令执行完之后会在包下生成一个package.json文件。
cd .\cjulyUI\
npm init -y定义要发布的组件库的名称
在打的包下修改刚生成的package.json文件中的name值此值就是要发布的组件库的名称切记组件库的名称在npm是没有人发布过的否则无法发布。 https://www.npmjs.com/
注册npm账户
https://www.npmjs.com/signup 注册完之后在本地登录
# 切换到npm地址
npm config set registryhttps://registry.npmjs.org
# 登录然后输入你的账号密码邮箱及验证码
npm login发布及使用
发布
在已打包的目录下执行发布命令
npm publish使用
在你想使用此组件库的项目中安装并引入即可使用
安装组件库
npm install cjuly-uimain.js中全局引入
# vue2引入
import cjuly-ui from cjuly-ui
Vue.use(cjuly-ui);# vue3引入
import cjuly-ui from cjuly-ui
createApp(App).use(cjuly-ui).mount(#app)像element一样直接使用即可
更新组件库
在组件库项目中的打包的目录下执行以下命令
npm version patch
npm publish
