Vue3的main.js的坑
Vue2升级为Vue3之后有很多新内容，但也有很多坑，这里讲下我今天刚学Vue3遇到的坑。可以直接到最后看main.js。
首先就是Element-ui，前端vue一般都使用这个插件，但这个插件在Vue3中就不能用了（应该是暂时，目前2022年4月10日），but它有一个兄弟可以用，它叫element-plus，安装方法也和之前一样。
npm i element-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 i vue-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站的 景苒酱