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