vue3.0 开发公共组件库并发布到npm

Posted 2022-02-12 郝艳峰Vip

前言

---

分享一下我自己的组件库郝艳峰的组件库
详细教程再组件库内写的很清楚
目前只有一个发送验证码的组件，后期会慢慢更新

首先 ：：就是开发自己组件库

第一步：新建一个vite–vue3.0的项目,依次执行一下命令。

如果你要更新自己的vue版本为3.0就先执行这条命令，如果不需要则忽略
npm install vue@next
安装vue-cli
npm install -g @vue/cli
采用vite初始化自己的项目  projectname 是你自己给项目起的名字
npm init vite@latest projectname --template vue
初始化完成根据提示
cd projectname
npm install
npm run dev
如此下来项目就跑起来了

第二步：编写自己的组件

先上目录结构， pages目录下就是组件的目录，里边可以放多个组件(每一个组件一个文件)

以studyDemo为例：在该文件夹下创建index.js和main.vue

• 1， index.js是注册并导出组件

//studyHello.name就是main.vue中组件的名字
import studyHello from './main.vue';
studyHello.install = Vue => Vue.component(studyHello.name,studyHello);
export default studyHello;

• 2， main.vue就是你的组件内容

<template>
  <h1> msg </h1>
</template>
<script>
export default 
//切记这个组件的name,就是你往后发布后要引用的名字，也就是index.js中导出的名字
  name: 'HelloWorld',
  props: 
    msg: String
  ,

</script>

第三步：导出自己的组件

在pages目录下新建index.js文件，这个文件就是要导出组件
这样导出的方法，再引用时既可以再main.js中使用vue.use,也可以单个引用组件，也就是按需引入

import sendCode from "./sendMessage/index.js";
import studyDemo from "./studyDemo/index.js";
 
// 存储组件列表
const components = [sendCode,studyDemo];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) 
  // 判断是否安装
  if (install.installed) return;
  // 遍历注册全局组件
  components.forEach(component => 
    Vue.component(component.name, component)
  );
;
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) 
  install(window.Vue);

export default 
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  sendCode,
  studyDemo
;

在package.json文件下配置组件的基本信息，以及入口文件

  "name": "hyf_send_code",    //npm install  xxx 的名字，取名字要取城自己想要的
  "version": "1.2.1",                //组件库的版本，每上传自己的组件库的时候需要更新版本
  "main":"./src/pages/index.js",   //上传库的入口文件（重要）
  "private":false,      //true私有的，在npm上上传组件库为私有的需要付费，所以设置为false则为公共
  "auther":"haoyanfeng",
  "license": "ISC",
  "scripts": 
    "dev": "vite",
    "build": "vite build"
  ,
  "dependencies": 
    "vue": "^3.0.4"
  ,
  "devDependencies": 
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.4"
  

经过以上步骤组件编写完成，如果不放心自己的组件是否有Bug，那就再这个项目中引用一下自己的组件，npm run dev跑一下，确定没问题再上传。

然后 ：：就是上传组件到npm库

第一步：去npm官方注册自己的账号

npm 传送门 npm官方
这里注册需要注意的，一定要邮箱验证，否则会出现奇奇怪怪bug
注册成功后就可以上传自己的组件库了。

第二步：回到刚刚的项目，在命令行上传就好了。

上传命令如下

npm login 
//因为上传私有组件需要付费，所以上传为公共的
npm publish --access public 

上传成功后还会有邮件提醒你上传成功了。

最后 ：：就是如何使用

就像vant之类的，正常下载npm install xxx
然后再main.js中引入你的组件，并且use

main.js文件

import  createApp  from 'vue'
import App from './App.vue'
import './index.css'
// 在这是其实是引入的所有组件，跟vant那些同理，内部的所有组件都可以使用
import sendCode from 'xxx'
const app = createApp(App);
app.use(sendCode);
app.mount('#app');

然后再项目中正常使用就可以了。

接下来就是在这里分享一下我自己的组件库郝艳峰的组件库
详细教程再组件库内写的很清楚
目前只有一个发送验证码的组件，后期会慢慢更新