前言
最近有个新项目需要从0到1搭建，想着现在Vue3这么火，就决定用Vue3+Vite+TS+ElementPlus技术栈来尝试下。这篇文就来记录下搭建过程中遇到的一些问题，避免后边重复踩坑。
VueRouter
Vue2引入VueRouter的代码：
import Router from 'vue-router';Vue.use(Router);export default new Router({ routes: []})Vue3引入VueRouter的代码：
import { createRouter, createWebHashHistory } from 'vue-router';export default createRouter({ routes: [], history: createWebHashHistory()})VueX
Vue2引入VueX的代码：
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({ modules});export default store;Vue3引入Vuex有一些变化：
手动导入createStore
不再需要new Vuex.Store实例
Vue3引入VueX代码：
import {createStore} from "vuex";const store = createStore({ modules});export default store;require.context
在Vue2版本中我导入模块用了require.context方法来统一封装，大致代码如下：
//require.context：要查找的文件路径，是否查找子目录，要匹配文件的正则const modulesFiles = require.context('./modules', true, /.js$/);const modules = modulesFiles.keys().reduce((modules, modulePath) => { const moduleName = modulePath.replace(/^./(.*).\w+$/, '$1'); const value = modulesFiles(modulePath); modules[moduleName] = value.default; return modules;}, {});但是在Vue3里边这段代码报如下错误：
看起来就是webpack的require.context API不识别，看文档后修改为如下：
const modulesFiles = import.meta.globEager('./modules/*.ts');const modules = Object.keys(modulesFiles).reduce((modules, modulePath) => { //{'msgTemplate': {xxx} } const moduleName = modulePath.replace(/^./modules/(.*).\w+$/, '$1'); const value = modulesFiles[modulePath]; modules[moduleName] = value.default; return modules;}, {});可以看出我对正则表达式也进行了简单的修改，增加了modules路径，这是因为我发现modulesFiles返回的值都包含了/modules/，这与webpack的require.context API还是有些出入的。
ElementUI
Vue3需要使用Element Plus版本，因为有些公共样式是直接复用的，我就直接把原来Vue2项目的样式文件全部导进来了，结果发现一堆问题，哈哈哈~
通过SCSS变量自定义主题色
按照官方文档的介绍，把配置改为新写法，然后发现报下边的错误：
网上提供的解决方式对于我来说没用。最后发现是自己代码顺序问题，把全局theme-chalk引入写到了@forward前边。
最后配置如下：
$main-color: #00C9C9;/* icon font path, required */$--font-path: '~element-plus/lib/theme-chalk/fonts';@forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( 'primary': ( 'base': $main-color, ), ),);@use "element-plus/theme-chalk/src/index.scss" as *;
变量名定义
搜了下样式代码，看到有这么一句关于$border-color的
从错误看起来element内部本身就定义了\$border-color，导致去执行了内部方法，我尝试着将变量名改为$bd-color就没问题了。
Element Plus组件语言切换
看到element组件默认语言是英文，按照官方文档提示切换成中文：
Message使用
我按照elementUI的写法直接引入了Message：
然后报如下错误：does not provide an export name 'Message'
ElementPlus把message组件换成了ElMessage，这篇文章提供了多种引入ElMessage的方法，我使用了单文件引入的处理方式(provide/inject全局引入方式未生效)：
import { ElMessage } from 'element-plus';...ElMessage({ message: error.msg || '接口异常', type: 'error', duration: 5 * 1000});日期控件不再支持picker-options属性
elementUI可以通过设置picker-options来设置日期属性
elementPlus去掉了picker-options属性，把内部的属性拆分开来了，可以单独一个个设置。
原文：https://juejin.cn/post/7101943335878656007