Vue3+Vite+TS基于Element plus 二次封装业务组件(含Vue3知识点)

前言

使用Vue3+Vite+TS基于Element plus 二次封装业务组件，注册挂载为全局使用，代码简洁了许多。封装好我们的业务组件今后开发中遇到时，就可以直接使用啦！

一、初始化vite项目

前提，你已经安装好了相关node环境依赖，查看vite的start连接

一般的

1. 你要先这样

npm create vite@latest 

2. 再这样，

 npm install
 npm run dev 

3. 最后，就可以看到这样

4. vite 默认端口是3000 ，如果要改为熟悉的vue的默认端口8080，可以这样。在 vite.config.ts 这个配置文件中添加server选项

export default defineConfig({
  plugins: [vue()],
  // 添加的部分
  server: {
    port: 8080
  }
}) 

二、安装Element plus 依赖

1. 首先要这样，我们进入element plus的官方文档 执行如下安装命令

npm install element-plus --save 

2. 我们再这样在项目中引入，直接全局引入，打包后体积不会相差多少，而且全局引入代码整洁好看。

如果我们都是新手不会操作，那就和我一样看官方文档， 在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, // 是否自动浏览器打开
  }
}) 

三、调整目录结构，添加布局组件

1. 先创建 router, styles, utils, views,功能如图

2. 安装路由、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') 

3. 创建组件目录

在components 组件目录下创建base目录来存放基本组件，创建layout来存放布局组件，这里先简单 创建一个navHeader头部组件，和sideBar侧边栏组件，然后index.vue为布局入口文件。