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站的    景苒酱