拆解Vue组件打包并发布到npm中的全流程，打造个人npm库

Vue组件的打包与发布之路

搭建Vue项目

我们首先从零开始搭建一个vue项目，使用vue-cli3来搭建。

创建Vue项目

vue create vue-component

修改package.json

{
  "name": "vue-component",
  "version": "1.0.0",
  "description": "A Vue component",
  "main": "dist/index.js",
  "scripts": {
    "build": "vue-cli-service build --target lib --name vue-component --dest lib"
  },
  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.12"
  }
}

添加组件

在src目录下新建一个components文件夹，并在其中创建一个组件文件，如MyComponent.vue。

编写组件代码

<template>
  <div>
    <h1>My Component</h1>
    <p>This is a Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

注册组件

在src/main.js中注册组件。

import MyComponent from './components/MyComponent.vue'

export default {
  name: 'app',
  components: {
    MyComponent
  }
}

运行项目

npm run serve

打包组件

npm run build

发布组件

npm publish

使用组件

在另一个Vue项目中，可以安装组件。

npm install vue-component

然后在项目中使用组件。

import MyComponent from 'vue-component'

export default {
  name: 'app',
  components: {
    MyComponent
  }
}

组件的版本控制

npm version patch

这样就完成了Vue组件的打包与发布，以及组件的使用。