npm publishes vue3 custom component library--method one

npm releases vue3 custom component library

Create project

vue create test-ui

Custom component

Create a custom component. The component name is based on your needs. It is best to have one component per folder. The picture below is my example.
The src/components
Insert image description here
component is the same as when you write a page. The so-called components are convenient and practical. You don't need to repeatedly move the page to different projects. You can install it directly into your local project. The picture below is an example.

After writing the component, you can test whether it can be used normally in App.vue
Insert image description here

Ready for release

Component encapsulation

Create a new index.js file in the components directory and write the components you want to publish in it.
Insert image description here

Component packaging configuration

Modify the package.json file and configure the packaging command
–target lib keyword to specify the directory for packaging
–name the name of the packaged file
–dest the name of the packaged folder
Insert image description here

Start packing

Execute packaging command

npm run package

After packaging is completed, there will be an additional cjulyUI folder in the project directory, which stores the packaged files.
Insert image description here

Initialize the package.json of the package

Enter the package directory and execute the initialization command. After execution, a package.json file will be generated under the package.

cd .\cjulyUI\
npm init -y

Insert image description here

Define the name of the component library to be published

Modify the name value in the newly generated package.json file under the package. This value is the name of the component library to be published. Remember that no one has published the name of the component library in npm, otherwise it cannot be published.
Insert image description here
https://www.npmjs.com/

Register npm account

https://www.npmjs.com/signup
Insert image description here
Log in locally after registration

# 切换到npm地址
npm config set registry=https://registry.npmjs.org
# 登录，然后输入你的账号，密码，邮箱及验证码
npm login

Publish and use

release

Execute the publish command in the packaged directory

npm publish

use

Install and introduce it into the project you want to use this component library to use

Install component library

npm install cjuly-ui

Globally introduced in main.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')

Just use it directly like element
Insert image description here

Update component library

In the packaged directory in the component library project , execute the following command:

npm version patch
npm publish