一.安装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