1,快速创建一个vue3.0的项目。
2.项目结构
src===改为 examples
新建 packages(放组件)
新建 vue.config.js (这文件vue会自动加载)
3.配置vue.config.js
module.exports = {
// 修改 src 为 examples
pages: {
index: {
entry: "examples/main.js", //入口改为examples
template: "public/index.html",
filename: "index.html"
}
},
// 组件样式内联
css: {
extract: false
},
// 扩展 webpack 配置,使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages/')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
};
4.配置packages的目录
button.vue,组件的样式自己写 (name必须有,用于标枪的名字)
button 中的js
import Component from './src/button.vue';
/* istanbul ignore next */
Component.install = function(Vue) {
Vue.component(Component.name, Component);
};
export default Component;
index.js(引入所有插件)
import Button from '../packages/button/index'
import Icon from '../packages/icon/index'
import Input from '../packages/input/index'
import Textarea from '../packages/textarea/index'
import Radio from '../packages/radio/index'
import Checkbox from '../packages/checkbox/index'
import Table from '../packages/table/index'
import Select from '../packages/select/index'
import Option from '../packages/select/index1'
import Cascader from '../packages/cascader/index'
import Pagination from '../packages/pagination/index'
import Sign from '../packages/sign/index'
import Message from '../packages/message/index'
import Dialog from '../packages/dialog/index'
import NavMenu from '../packages/navMenu/index'
import NavMenuGroup from '../packages/navMenu/index1'
import NavMenuTit from '../packages/navMenu/index2'
import NavMenuItem from '../packages/navMenu/index3'
import Breadcrumb from '../packages/breadcrumb/index'
import BreadcrumbItem from '../packages/breadcrumb/index1'
import Vue from 'vue'
const components = [
Button,
Icon,
Input,
Textarea,
Radio,
Checkbox,
Table,
Select,
Option,
Cascader,
Pagination,
Sign,
Dialog,
NavMenu,
NavMenuTit,
NavMenuGroup,
NavMenuItem,
Breadcrumb,
BreadcrumbItem,
]
// 存储组件列表
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function(Vue) {
// 判断是否安装
if (install.installed) return;
// 遍历注册全局组件
components.forEach(component => {
Vue.component(component.name, component)
});
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default{
Button,
Icon,
Input,
Textarea,
Radio,
Checkbox,
Table,
Select,
Option,
Cascader,
Pagination,
Sign,
Dialog,
NavMenu,
NavMenuTit,
NavMenuGroup,
NavMenuItem,
Breadcrumb,
BreadcrumbItem,
install
}
5.examples 中的结构每个人都不一样 最主要的是 main.js的配置
import Vue from 'vue'
import App from './App'
import router from './router'
import page from '../packages/index'
import "./assets/css/index.css" (样式写在了全局)
import "./icon.css"
Vue.use(page)
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount('#app')
6.在app.vue里先跑一下 npm run serve
7,接下来就是发布
1.百度注册一个npm账号, 然后验证邮件(上传项目必须验证)
2.npm login 登录 (切记不能用淘宝镜像,就直接npm)(username,password,邮箱) 密码我这边是怎么都按不进去字母数字,没事,其实是已经按进去了正常的输入完邮箱登录
8.上传前配置package.json
name: 库的名称
version:版本号,每次上传都要更改版本号
main:是组件库的入口
lib: vue-cli3 里有的一个专门打包组件库的
9,打包前先验证下name的名字是不是存在了(这个百度下有专门的命令的)
10.npm run lib 打包
11.npm publish(切记不能用淘宝镜像,就直接npm)
12.使用
cnpm install sosoeasy-ui -s
cnpm run dev