Use the Vue component library to implement publishing to npm

This article introduces in detail how to publish the Vue component library to npm and share code examples. Interested friends can refer to it for reference.

Made a set of my own component library and published it on npm. For the project code, see https://github.com/hamger/hg-vcomponents

Preliminary preparation

• Have an npm account

• Installed vue-cli

Build the project

vue init webpack hg-vcomponents
cd hg-vcomponents
cnpm install

Directory Structure

- vue-flag-list
  + build
   + dist // 存放发布到npm的代码
   - src
     - components // 存放组件源代码 和 README.md
      - arrows
         arrows.vue
         README.md
       - round
        round.vue
         README.md
      index.js // 组件导出文件
    - examples // 存放组件的 demo
      arrows.vue
       round.vue
       index.vue // 组件 demo 的入口
     - router
       index.js // 引入 examples 下的组件，并配置路由
     App.vue
     main.js
   ...

For details of the internal code, please see GitHub. If it is helpful to you, please give it a star.

Project configuration

In order to enable the project to be uploaded to npm, some places need to be configured.

build/webpack.base.conf.js

entry: {
  app: process.env.NODE_ENV === 'production'
   ? './src/components/index.js' // 生产模式下导入文件
   : './src/main.js' // 开发模式下导入文件
},

package.json

"private": false, // 因为组件包是公用的，所以 private 为 false
"main": "dist/hg-vcomponents.min.js", // 导出文件名，即 import 引入的文件

.gitignore

The files in the dist folder are files to be exported, so remove dist/ in the .gitignore file so that the packaged files will be updated when uploading the code.

Development and Production

Due to the configuration of webpack.base.conf.js, the development and production of the project are independent.

Use npm run dev to enter the development environment, and you can see the demo of the component for easy debugging. Use npm run build to package the component library.

Publish to npm

When you are logged in to npm, enter the command line in the root directory (perform the same operation every time you update the code)

npm version patch
npm publish

Done! Now you can use npm install hg-vconponents to download the component library you wrote elsewhere.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of using vue-cli scaffolding to initialize the project structure under the Vue project

Vue is implemented by combining vue-i18n Multi-language switching method of background data

$set and array update method in vue.js_vue.js

The above is the detailed content of Use the Vue component library to implement publishing to npm. For more information, please follow other related articles on the PHP Chinese website!