Vue3+Element-plus+Vue-router4踩坑合集

Vue3项目搭建方式

• Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
• 将 Vue.js 添加到项目中有四种主要方式：
  1.在页面上以 CDN 包的形式导入。
  2.下载 JavaScript 文件并自行托管
  3.使用 npm 安装它。
  4.使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置
  (例如，热重载、保存时的提示等等)。
• 搭建方式可以参考官网，此处不再一一叙述。

Vue官网

• 若喜欢vue-cli方式搭建项目的小伙伴可以参照 往期的cli项目搭建方法 版本请自行选择

Vue3引入Element-plus

• 引入Element-plus，美观、简洁且开发迅速。
• 搭建方式可以参考Element-plus官网，npm 安装或使用CDN

Element-plus官网

• 完整引入方式：在main.js中添加以下代码

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import "../src/assets/css/main.css"
import App from '../src/App'
import router from "@/router";

createApp(App).use(ElementPlus).use(router).mount('#app')

• 上述的router其实是下一步编写好引入的，封装好了写在main里面起到简洁代码的作用
• 本博主是主要做后端的，也不知道有没有更好的方式，暂时就先这样，适合自己的才是最好的，如有不足请评论指出谢谢~~

引入Vue-Router4并封装路由

• 原本想着既然使用了Vue3，那么就顺手更新使用一下Vue-Router4，万万没想到官方文档的坑非常多，就不参考官网引入了！
• 可以直接使用以下2种命令安装Vue-Router4

npm install vue-router@4

• 新建router目录，在其中新增index.js文件作为路由封装文件

import {createRouter, createWebHistory} from 'vue-router'

const Login = () => import('../../src/components/pages/Login')
const InfoPage = () => import('../../src/components/pages/InfoPage')

const routes = [
    { path: '/', component: Login },
    { path: '/InfoPage', component: InfoPage }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

• 在src文件夹下新增components文件夹，在components文件夹下新增pages文件夹，然后新增Login及InfoPage.vue文件
• 上述新增的2个vue文件内容随意，仅供测试
• 在App.vue中新增代码即可展示路由index.js中配置好的Login.vue页面了

<template>
  <div>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view />
  </div>
</template>

<script>
import Login from "@/components/pages/Login";
export default {
  name: "App",
  components: {Login}
}
</script>

<style scoped>

</style>

• 至此访问首页即访问Login.vue页面，Vue-router4路由踩坑也完成了！