npm仓库里有自己的组件这件事情真的泰裤辣

相信前端的小伙伴都用过第三方组件库，比如elementUI，vant，等；当我们自己封装了一个觉得很厉害很高级的组件，想要应用到其他项目；又不想copy代码；这个时候上传我们自己的一个组件库是其中一种解决方案；也能为后续的面试也能加分；没有npm账号的需要注册一个npm账号；记好用户名，邮箱等信息，第一次上传会用到；去npm官网注册账号

首先创建一个正常的vue项目就行（可使用vue ui 可视化界面创建或者命令行创建）

创建vue项目

vue create test-ui

2.启动

npm run serve

3.封装组件，可以将组件封装在某一个目录里，比如myComponents；接下来俺们封装一个最简单的组件Test.vue

<template>
    <div class="Test">
      <div>{{ text }}</div>
    </div>
</template>
  <script>
  export default {
    name: "TestX",
    props: {
      text: {
        type: String,
        default: () => '笑死了风好大，熊熊怒气冲冲'
      }
    },}
</script>

4.组件写好了，还是得看看能不能用，咱们在App.vue里测试一下子

<template>
  <div>
    <TestX text="xiaosile"></TestX>
  </div>
</template>
<script>
import TestX from './myComponents/Test.vue'
export default {
  name: "App",
  components: {
    TestX
  }, data () {
    return {
    }
  },
  methods: {
  }
}
</script>

5.可以正常显示了，然后在myComponents目录里面新增index.js文件

import TestX from '@/myComponents/Test'
const cs = [TestX]
const install = function(Vue) {
  cs.forEach(e => {
    Vue.component(e.name, e)
  })
}
export default install

简单解释下：这里的组件名用的组件的name，也就是使用的标签名；为什么要 export install，我们看Vue官网的解释

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

6.打包npm包配置,在package.json中配置打包脚本

图片.png

"buildnpm": "vue-cli-service build --target lib ./src/myComponents/index.js --name xsl-test-ui --dest xsl-test-ui"

–target lib：启动文件的路径
–name：打包后生成的文件名
–dest：打包后生成的文件夹名

7.执行命令 npm run buildnpm, 会生成xsl-test-ui的文件夹，里面有打包好的各种文件

npm run buildnpm

8.进入xsl-test-ui文件夹，执行 npm init -y 生成局部的package.json，自己定义组件库名称 name，版本号 version（每次修改需更新版本号）

npm init -y

9.修改源，如果之前有修改过npm的源需要改回来 npm config set registry=registry.npmjs.org

npm config set registry=https://registry.npmjs.org

10.如果没有登陆过需要在此时进行登录,根据提示填写自己的用户名，密码，邮箱就行了

npm login

11.执行 npm publish 推送，如果没有配置过用户会提示你进行用户密码等校验；或者提前输入 npm adduser 配置用户信息,配置完继续执行npm publish

npm publish 12.推送成功后就可以去npm仓库去看自己上传的组件了，直接搜索组件名即可,比如

图片.png

13.使用

npm install xsl-test-ui

在main.js中引入

import TestUi from 'xl-design'
Vue.use(TestUi )

自定义组件并上传到npm仓库以及下载使用

npm仓库里有自己的组件这件事情真的泰裤辣