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

无痕干货营
200 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Vue3项目搭建方式

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

Vue官网

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路由踩坑也完成了！
avatar
文章
阅读
粉丝