1、在項(xiàng)目根目錄新建文件夾 packages
2、將自己寫的所有組件復(fù)制粘貼進(jìn)去
3、將自己開發(fā)的src改成examples (平時(shí)更新組件調(diào)試用) 直接刪了也沒事
//新建vue.config.js
const path = require('path')
module.exports = {
pages: {
index: {
//修改項(xiàng)目入口
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 擴(kuò)展 webpack 配置，使 packages 加入編譯
chainWebpack: config => {
//對(duì)所有的js 使用babel處理
config.module
.rule('js')
.include.add(path.resolve(__dirname, 'packages')).end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的選項(xiàng)...
return options
})
}
}
4忍级、在packgaes新建index.js文件
// 統(tǒng)一導(dǎo)出
import Button from './button'
import Dialog from './dialog'
import Input from './input'
import Checkbox from './checkbox'
import Radio from './radio'
import RadioGroup from './radio-group'
import Switch from './switch'
import CheckboxGroup from './checkbox-group'
import Form from './form'
import FormItem from './form-item'
import './fonts/font.scss' //fonts 也需要引入
// 存儲(chǔ)組件列表
const components = [
Button,
Dialog,
Input,
Checkbox,
Radio,
RadioGroup,
Switch,
CheckboxGroup,
Form,
FormItem
]
// 定義 install 方法，接收 Vue 作為參數(shù)伪朽。如果使用 use 注冊(cè)插件颤练，則所有的組件都將被注冊(cè)
const install = function (Vue) {
// 遍歷注冊(cè)全局組件
components.forEach(component => {
Vue.component(component.name, component)
})
}
// 判斷是否是直接引入文件,如果是，就不用調(diào)用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
// 導(dǎo)出的對(duì)象必須具有 install驱负，才能被 Vue.use() 方法安裝
export default {
install
}
5嗦玖、新增打包命令(package.json)
//打包命令
"ax:lib": "vue-cli-service build --target lib packages/index.js"
6、發(fā)布到npm 需要public (package.json)
//更新版本遞增
"private": false,
"varsion":'0.0.1'
"main": "dist/ax-ui.umd.min.js",
"author": {
"name": "安歆"
},
7跃脊、增加 `.npmignore文件
# 忽略目錄
examples/
packages/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
8宇挫、發(fā)布到npm (需要自己注冊(cè)賬號(hào))
npm login
npm publish
