【自用】在npm上发布UI框架 + 官方文档＋使用

①新建文件夹，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也是可以正常使用的