①新建文件夹,vue create ,勾选router和css预处理
②新建文件夹examples(lib不用管,后面会说到)用来编写组件内容,如图所示,index.js代码如下
import HButton from './button/button.vue'
import HInput from './input/input.vue'
import HTable from './table/table.vue'
const components = [HButton,HInput,HTable]
export default{
install:(app,options)=>{
components.forEach((item)=>{
app.component(item.name,item)
})
}
}
③
package.json中新增配置项:(具体说明见注释)
{
"name": "jui0", //发布在npm上的名字,就像element-ui,不能有重复,
"version": "0.1.1", //版本号,每次修改后再发布
"main": "lib/jui0.umd.min.js", //入口文件,就写这个"lib/xx.umd.min.js"
"private": false, //必须为false,只有非私人的才可以发布
"scripts": {
"lib": "vue-cli-service build --target lib --name jui0 --dest lib examples/index.js"
//这个很重要,lib文件夹就是用这个来生成的,生成之后才会有main里面写的文件
},
"files":["lib"], //代表要发布上去的文件,就选这个打包生成的文件
④配置好之后运行
npm run lib
⑤src文件夹用来做测试,及时看到我们写的组件的效果,由于前面已经配置好了,src的内容不会被打包发布上去,src中main.js配置如下:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import examples from '../examples'
//这个是代码块的插件
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(examples)
Vue.use(VueHighlightJS)
然后官方文档就正常得在app.vue及components里写就可以啦
⑥
npm login //登录,需要输入账号密码,没有的话需先去npm的官网注册一个
npm publish //发布
⑦发布成功后会收到邮件提示,Successfully published,这时候直接在新的项目中
npm i jui0 --save //(--save可要可不要)
main.js中
import jui from 'jui0'
import "jui0/lib/jui0.css"
Vue.use(jui)
就可以用了
附:ui组件中使用了less,sass,新项目中即时不安装less,sass也是可以正常使用的