Vue2升级为Vue3之后有很多新内容，但也有很多坑，这里讲下我今天刚学Vue3遇到的坑。可以直接到最后看main.js。
首先就是Element-ui，前端vue一般都使用这个插件，但这个插件在Vue3中就不能用了（应该是暂时，目前2022年4月10日），but它有一个兄弟可以用，它叫element-plus，安装方法也和之前一样。
npm ielement-plus
引入的css也不一样，变成了import 'element-plus/dist/index.css' 这个。
非常重要的axios也不一样，需要安装axios和vue-axios。
npm i axios
npm i vue-axios
路由也不一样，虽然也需要安装vue-router，但不用在main.js里写出来，router文件夹下的index.js的内容也不一样，这里的代码借鉴了CSDN里小满zx的代码。
npm ivue-router
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory, RouteRecordRaw } from 'vue-router'
//vue2 mode history vue3 createWebHistory
//vue2 mode hash vue3 createWebHashHistory
//vue2 mode abstact vue3 createMemoryHistory
//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes = [{
path: '/',
component: () => import('../components/Login.vue')
},{
path: '/home',
component: () => import('../components/Home.vue')
}]
const router = createRouter({
history: createWebHistory(),
routes
})
//导出router
export default router
需要注意的是，这里的页面需要放到组件中，也就是.vue文件需要放在components文件夹下，类似那个helloworld页面。
main.js文件里的引入方式和vue2的差不多，但最后use的部分需要注意，可以像我最下面main.js里的代码直接连在一起写，也可以：
const app = createApp(App)
app.use(router)
...
...
app.mount('#app')
最后附上main.js的样例代码：
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
import router from './router'
createApp(App).use(router).use(ElementPlus).use(VueAxios,axios).mount('#app')
以上就是我暂时遇到的坑，有问题可以评论或者私信b站的 景苒酱