前言
使用Vue3+Vite+TS基于Element plus 二次封装业务组件,注册挂载为全局使用,代码简洁了许多。封装好我们的业务组件今后开发中遇到时,就可以直接使用啦!
一、初始化vite项目
前提,你已经安装好了相关node环境依赖,查看vite的start连接
一般的
- 你要先这样
npm create vite@latest
- 再这样,
npm install
npm run dev
- 最后,就可以看到这样
- vite 默认端口是3000 ,如果要改为熟悉的vue的默认端口8080,可以这样。在
vite.config.ts
这个配置文件中添加server选项
export default defineConfig({
plugins: [vue()],
// 添加的部分
server: {
port: 8080
}
})
二、安装Element plus 依赖
- 首先要这样,我们进入element plus的官方文档 执行如下安装命令
npm install element-plus --save
- 我们再这样在项目中引入,直接全局引入,打包后体积不会相差多少,而且全局引入代码整洁好看。
如果我们都是新手不会操作,那就和我一样看官方文档, 在main.ts 文件中引入,像这样
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' // (1)
import 'element-plus/dist/index.css' // (2)
const app = createApp(App)
app.use(ElementPlus) //(3)
app.mount('#app')
是不是全局引入简单,三句代码就可以使用Element plus UI 了,来这里复制几个按钮看看样式吧
没有问题引入🆗
配置一下vite.config.ts
文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
port: 8080, // 自定义端口号,一般3000以后
open: true, // 是否自动浏览器打开
}
})
三、调整目录结构,添加布局组件
- 先创建
router
,styles
,utils
,views
,功能如图
- 安装路由、sass、lodash 、等npm包和库,引入依赖包
npm i vue-router
npm i sass sass-loader -D
npm i lodash
element plus 的图标
由于 element plus 的图标要单独为组件形式使用,官方文档说要单独安装
npm install @element-plus/icons-vue
然后再main.ts中引入,遍历循环全局注册图标,牺牲一点点性能,
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue' // (1)引入
const app = createApp(App)
// 遍历注册全局icon
for(let icon in Icons) {
app.component(icon, (Icons as any)[icon]) // (2) 全局注册
}
app.use(router).use(ElementPlus)
app.mount('#app')
- 创建组件目录
在components 组件目录下创建base
目录来存放基本组件,创建layout
来存放布局组件,这里先简单 创建一个navHeader
头部组件,和sideBar
侧边栏组件,然后index.vue
为布局入口文件。