vue封装组件发布到npm -- 保姆级教程

1. 初始化Vue项目

vue create XXX  （工程名字）

2. 运行项目

npm run serve

3. 组件封装

1. 首先在 src 目录下面新建一个 package 文件夹，用来存放所有需要上传的组件。
2. 编写好组件本身的代码，写完之后可以引用到 App.vue 组件里面验证一下，看是否组件可用。
3. 在上面新建好的 package 文件夹目录下新建 index.js 入口文件，存放注册组件的相关代码如下。

   import xxxx from "../xx/xx/xx.vue"; // 引入封装好的组件
   const coms = [xxxx]; // 如果有多个其它组件,都可以写到这个数组里
    
   // 遍历可以批量组件注册
   const install = function (Vue) {
     coms.forEach((com) => {
       Vue.component(com.name, com);
     });
   };
   
   export default install; // 这个方法使用的时候可以被use调用
   

4. 组件打包

1. 在根目录下面 package.json 文件的 scripts 配置项中，配置打包命令：

   "package": "vue-cli-service build --target lib ./src/package/index.js --name changeTextColor-ui --dest changeTextColor-ui"
   

   

   这里对打包的几个命令做一下解释：
   ● vue-cli-service build 是他自带的打包命令
   ● --target lib + 路径 指定打包的目录，即 package 文件夹下面的入口文件
   ● --name 打包后的文件名字
   ● --dest 打包后的文件夹的名称

2. 执行打包命令

   npm run package    // package是对应的配置项的名称，可以随便取
   

   这里需要注意，我们需要进入package 文件夹中来执行此命令，不然就会报如下错误

   Failed to resolve lib entry: ./src/package/index.js. Make sure to specify ...
   

   打包后会在根目录下面生成如下文件（我没有写样式，所以没有生成 .css文件）
   

5. 组件发布

1. 首先，想要发布到 npm 里，还需要新建一个文件夹，这个是用来存放上一步打包后需要进行发布的文件，并且在下面初始化一个packages.json，这里我的文件夹结构如下，如果打包的有 .css 文件也是需要上传的，我这里没有写css。

   这里的 packages.json 文件不需要自己创建，直接进入 packages 文件夹如下执行命令

   npm init -y
   

   

2. 将自己需要发布的文件放进且初始化后，就需要注意看 packages.json 文件里面的配置项是否正确，并且可以继续配置需要的信息。

3. 需要发布的文件夹配置好了之后，就是需要有一个npm账号，如果没有去注册，要注意记住用户名、密码和邮箱，一会发布的时候会用到。然后需要配置的就是源必须是npm。需要配合nrm使用更方便。
   还是在需要打包的 packages 文件夹下

   npm i nrm -g   //  安装 nrm
   
   nrm ls    // 列出当前所有源的列表
   
   nrm use npm    // 切换使用到 npm 源
   

4. 登录 npm，填入登录信息和邮箱验证后即可登录成功

   npm login
   

5. 发布到远程仓库

   npm publish
   

这里需要注意，你发布时，刚刚初始化的 package.json 文件的 name 名字不能有大写或重名否则也会报错，改为合法包名且不重复的包名即可。

6. 全局注册

1. 发布成功之后，可以在 npm 中查看安装命令
   

   因为是外网，所以有时不会刷新那么快，多刷几次即可看到自己发布的组件

   

2. 找到安装命令后，即可在全局注册使用该组件了，使用方法可以参照 element-ui
   在main.js文件中

   import Vue from 'vue'
   import App from './App.vue'
   // 先引入组件
   import changetextcolorui from 'changetextcolor-ui'
   // 全局使用组件
   Vue.use(changetextcolorui)
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
   }).$mount('#app')
   

3. 在App.vue 中测试一下（注意组件名对应初始组件中的name）

   <template>
     <div id="app">
       <changeTextColor></changeTextColor>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App',
   }
   </script>
   
   <style>
   </style>