主要内容：二次组件的封装；vue3的语法特性；二次封装组件；组合式使用现有组件

前提：es6,element-ui/element-plus,ts和vue3/vue2基础已了解

二次封装组件意义

为了满足实际的特殊需求

vite

官网：开始 {#getting-started} | Vite中文网 (vitejs.cn)

搭建项目

• npm -v
• npm init vite@latest m-elementPlus-components -- --template vue-tsnpm 7+
• npm i
• npm run dev
• 修改vite.config.ts文件

export default defineConfig({
  plugins: [vue()],
  server:{
    port:8099
  }
})

• 安装路由和element-plusnpm i -S vue-router@next element-plus
• 创建src-router-index.ts

import {createRouter,createWebHistory,RouteRecordRaw} from 'vue-router'

import Home from '../view/Home.vue'
const routes: RouteRecordRaw[]=[
  {
    path:'/',
    component:Home
  }
]
const router = createRouter({
  routes,
  history:createWebHistory()
})
export default router

• 修改main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

const app = createApp(App)
app.use(router)
app.mount('#app')

• 安装scss

npm i -D scss-loader

注：若出现[vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it? npm install node-sass npm install sass --save-dev

全局注册图标

安装（使用包管理器） npm install @element-plus/icons-vue 工具函数utils-index.ts

// 将驼峰转换成横杠（小写）
export const toLine = (value:string) =>{
  return value.replace(/(A-Z)g/,'-$1').toLocaleLowerCase()
}

注册所有组件main.ts

import * as Icons from '@element-plus/icons-vue'
import { toLine } from './utils'

// 全局注册图标 会消耗性能
// el-icon-xxx
for (let i in Icons){
  // console.log((Icons as any)[i]);
  // 注册全部组件
  app.component(`el-icon-${toLine(i)}`,(Icons as any)[i])
}

使用xxx.vue <el-icon-edit/>

伸缩菜单