Vue.js制作组件库-专注前端开发和vps技术交流的博客-纸飞机

一.安装cli3

vue create 任意文件夹名

按需求选择需要的配置

二.在src目录下建立库

src目录下建个文件夹,文件夹为库的名字

库下建立index.js,作为库的主文件

在库下建立components目录,里面放的是我们要制作的组件

库下输入命令npm init -y建立package.json依赖包文件

三.components下定义组件,一个文件一个组件

举例:定义一个名为Loading.vue的组件

组件定义中,template是必须的,style和script是按需求来的

四.组件注册

定义完了组件我们需要在index.js文件里注册下组件

import LoadingTpl from './components/Loading.vue'
export const Loading = {
    install () {
      Vue.component('Loading',LoadingTpl)
    }
}

五.使用组件

在整个项目的主文件main.js里使用组件

import {Loading,Swiper,Tab} from './hqg_plugins/index.js'//这里{}里之所以写这么多,是告诉你,要几个组件就往里写几个
Vue.use(Loading)//一定要记得

APP.vue里调用组件

六.组件上传

首先去npmjs官网注册账号,一定要邮箱验证

将npm源切换到npm

nrm use npm

bash终端操作组件库目录

npm adduser

按照提示输入账号密码邮箱,登录成功会提示

Logged in as huqinggui on https://registry.npm.taobao.org/.

然后终端输入

npm publish

Vue.js制作组件库