【学习打卡】第1天 搭建Vue3+Vite+TS项目

课程名称：基于Vue3+Vite+TS，二次封装element-plus业务组件

课程章节：封装组件初级篇（上）

主讲老师：五月的夏天

课程内容：

今天学习的内容包括：

2-2 搭建vite项目并配置路由和element-plus——使用vite搭建基本模板，安装路由，引入element-plus。

2-3 全局注册图标——安装@element-plus/icons依赖，引入并全局注册。

课程收获：

搭建vue3+vite+ts项目

npm create vite@latest my-vue-app -- --template vue-ts

安装和配置路由router

// 安装
npm i vue-router@next -S

// 配置
import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
import Home from '@/views/Home.vue'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Home
  }
]

const router = createRouter({
  routes,
  history: createWebHistory()
})

export default router

安装及引入element-plus

// 安装
npm install element-plus --save 

// 引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

安装@element-plus/icon并全局注册

// 安装
npm install @element-plus/icons-vue

// 注册
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  // app.component(key, component)
  app.component(`el-icon-${toLine(key)}`, component) // 此处为驼峰转横杠
}

学习到了驼峰转横杠正则写法

export const toLine = (value:string) => {
  return value.replace(/(A-Z)g/, '-$1').toLocaleLowerCase()
}

使用vite编译工具运行实在太快了，秒开，终于不用等待很久了。

学到了两个好方法：

1、Object.entries()可以将对象转为数组[key,value]

2、value.replace(/(A-Z)g/,'-$1'),可以匹配需要内容使用$1进行拼接等处理

坚持打卡，坚持学习，未来可期，加油😀。

个人思考：能否把svg图标全局注册并使用？明天尝试下😀