基于Vue3开发自己的组件库
项目创建
一、使用脚手架创建一个vue项目
vue create m-baseui 快速初始化一个项目
二、修改和创建目录
1.将src文件夹修改为examples
2.创建packages文件夹，用来进行组件编写
描述：
packages/components: 存放组件。packages/styles: 存放全局样式和组件样式。packages/index.js:
3.在根目录下新建一个vue.config.js文件，配置如下
cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置，修改入口文件地址为examples下的main.js,将packages加入打包编译任务中
module.exports = {
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
}
}
4.npm run serve运行项目，可以正常启动项目
5.在router中添加路由
import { createRouter,createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
children: [
{
path: '/button',
name: 'Button',
component: () => import('../views/Button.vue')
},
{
path: '/input',
name: 'Input',
component: () => import('../views/Input.vue')
}
]
},
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
组件编写
一、packages中，编写一个测试的Button组件
二、components中的 Button.vue代码
<template>
<button
class="m-button"
:class="styleClass"
:disabled="disabled"
:round="round">
<slot></slot>
</button>
</template>
<script>
import { computed } from 'vue';
export default {
name: 'm-button',
props: {
type: {
type: String,
default: 'default',
validator(value) {
return ['default','primary', 'success', 'info', 'warning', 'danger','text'].indexOf(value) > -1;
}
},
disabled: {
type: Boolean,
default: false
},
round: {
type: Boolean,
default: false
}
},
setup(props) {
const styleClass = computed(() => {
return {
[`m-button--${props.type}`]: props.type,
'is-disabled': props.disabled,
'is-round': props.round
}
})
return {
styleClass
}
}
}
</script>
<style lang="scss" scoped>
@import '../../../styles/components/button.scss';
</style>
三、styles中的button样式代码
.m-button {
display: inline-block;
padding: 12px 20px;
margin-left: 10px;
border: 1px solid #d9d9d9;
background: #fff;
color: #333;
cursor: pointer;
}
.is-disabled{
color: #c0c4cc;
cursor: not-allowed;
background-color: #fff;
border-color: #ebeef5;
}
.m-button--primary{
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.m-button--success {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
.m-button--info {
color: #fff;
background-color: #909399;
border-color: #909399;
}
.m-button--warning {
color: #fff;
background-color: #e6a23c;
border-color: #e6a23c;
}
.m-button--danger {
color: #fff;
background-color: #f56c6c;
border-color: #f56c6c;
}
.m-button--text {
border-color: transparent;
color: #409eff;
background: transparent;
padding-left: 0;
padding-right: 0;
}
// 圆角
.is-round{
border-radius: 20px;
}
四、Button组件里建一个index.js文件，用来把写的组件暴露出去
import mButton from './src/button.vue';
mButton.install = (Vue) => {
Vue.component(mButton.name,mButton)
}
export default mButton;
五、packages文件夹下新建index.js文件，用来管理所有的组件
import mButton from "./components/Button";
import mRow from "./components/Row";
import mCol from "./components/Col";
import mInput from "./components/Input";
// 组件列表
const components = [
mButton,
mRow,
mCol,
mInput
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = (Vue) => {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
mButton,
mRow,
mCol,
mInput
}
组件引入
一、在examples的main.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/reset.css'
import router from './router'
import mBaseUI from '../packages/index'
const app = createApp(App)
app.use(router)
app.use(mBaseUI)
app.mount('#app')
二、在examples的组件中使用
<template>
<div>
<m-button>默认按钮</m-button>
<m-button type="primary">主要按钮</m-button>
<m-button type="success">成功按钮</m-button>
<m-button type="danger">危险按钮</m-button>
<m-button type="info">信息按钮</m-button>
<m-button type="warning">警告按钮</m-button>
<m-button type="text">文本按钮</m-button>
</div>
</template>
进入页面，可以看到已经成功了
上传npm
一、配置package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name m-baseui --dest lib packages/index.js"
},
二、执行npm run lib 进行打包
打包后，项目会多出一个lib文件夹
在package.json中添加发布的一些信息
描述：
description：描述信息
main：入口
keywords：关键词
npm发布时，要将package.json中的private属性值改为false
三、把不需要上传的文件加入到.gitignore进行忽略
.gitignore 设置的忽略文件，在git代码管理和 npm publish 都会被忽略
examples/
四、README.md中写使用说明
# m-baseui
## 安装
使用npm 或 yarn 安装
```
npm install m-baseui
yarn add m-baseui
```
## 引入 m-baseui
### 完整引入
#### 需要注意的是 css 样式文件需要单独引入。
在 main.js 中写入以下内容：
```js
import { createApp } from 'vue'
import App from './App.vue'
// 导入组件库
import mBaseui from 'm-baseui'
import 'm-baseui/lib/m-baseui.css';
const app = createApp(App)
app.use(mBaseui)
app.mount('#app')
```
<br/>
## 愉快开始
#### 至此 m-baseui 就引入完成并且可以使用了。
```html
<!-- html -->
<m-button>默认按钮</m-button>
<m-button type="primary">主要按钮</m-button>
```
<br/>
五、发布npm
执行npm login 命令，输入用户名和密码，输入密码时是看不到的
之后提示输入email，成功后你的邮箱会收到一个one-time password，填入这个一次性密码
登录之后，执行npm publish进行发布（每次进行发布的时候记得改下版本号）
发布成功后，到npm上，查看头像---->packages，就可以看到发布的包了
其他项目中使用
至此，大体就算完成了，后面就是完善每个组件。
如果你感兴趣的话，请前往 GitHub 查看源码和完整文档
github地址：https://github.com/m-baseui/m-baseui
