安装依赖
安装 element-plus
1 | NPM |
安装 @element-plus/icons-vue
1 | Icons |
引入依赖
1 | // src/main.js |
工具函数
1 | // src/utils/index.js |
创建目录
- 在src/components/table目录下新建一个index.js作为入口文件
1
2
3
4
5
6
7
8
9import { App } from 'vue'
import table from './src/index.vue'
// 让这个组件可以通过use的形式使用
export default {
install(app) {
app.component('m-table', table)
}
}
- table组件源代码放在src/components/table/src/index.vue中
1 | <template> |
在src/components目录下新建一个index.js作为入口文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16import { App } from 'vue'
import table from './table'
const components = [
table,
// 以后还可以有更多的组件
]
export default {
install(app) {
components.map(item => {
app.use(item)
})
}
}在src/main.js中引入
1 | import mUI from './components' |
- 在页面中使用我们封装好的组件
1 | <template> |