位置: IT常识 - 正文
Vue3的main.js的坑(vue3.0 main.js)
发布时间：2024-01-23推荐整理分享Vue3的main.js的坑(vue3.0 main.js)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue main.ts,vue main.js app.vue,vue3.0 main.js,vue main.js app.vue,vue main.js app.vue,vue项目中main.js作用,vue项目中main.js作用,vue项目中main.js作用,内容如对您有帮助，希望把文章链接给更多的朋友！
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})//导出routerexport 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站的 景苒酱
上一篇：聊聊Discuz怎么修改帖子标题的字符长度限制(discuz论坛账号)
下一篇：泛化之美 —— C++11 可变参数模板的妙用(泛化的理解)
