4、vue3总组件/入口文件/路由设置 1、安装element-plus依赖包 npm i element-plus 2、项目主组件修改(App.vue) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import { ElConfigProvider }from'element-plus' import { ElDialog }from"element-plus" // 将 Element Plus 的语言设置为中文 ...
// 没有匹配到路由的话说明// 1.刷新了(导致路由不存在)// 或// 2.路由不存在if(to.name!=='notFound')returnletmenus=JSON.parse(localStorage.getItem('menus')||'null')console.log("开始创建路由");if(menus){createRoutes(menus)}else{constloading=ElLoading.service({lock:true,text:'获取菜单中...
<router-view></router-view> <!--加上路由标签,路由才会有效果--> </template> main.ts 和主页面搭配的,如果这里引用了的包以及样式,子页面可以直接使用,不用再次引入 import { createApp }from'vue'import'./style.css'import Appfrom'./App.vue'import ElementPlusfrom'element-plus'//导入element-plus...
项目侧边栏主要基于element-plus的el-menu改造。 主要是有下面几个文件组成: Index.vue (主文件) SidebarItem.vue (侧边栏item定制,需要单独抽出来,多级路由嵌套需要它来递归) SidebarItemLink.vue (嵌套在SidebarItem 的上一层,区分外链和路由跳转) SidebarLogo.vue (侧边栏最上部的logo,可以隐藏和显示) Index.v...
方式三:使用 element plus 菜单的 router 进行路由 <template><el-container><!-- Element Plus Menu: https://element-plus.gitee.io/zh-CN/component/menu.html --><el-menuclass="el-menu-demo"mode="horizontal":default-active="$route.path":ellipsis="false"router><el-menu-itemindex="/aichat">...
import 'element-plus/dist/index.css' createApp(App) .component(Button.name, Button) .component(ElIcon.name, ElIcon) // 如果你需要使用图标组件 .mount('#app') `vite.config.js`是Vite的配置文件,我们可以在这里设置各种项目的特定选项,例如调整打包配置、开启服务器端渲染等。 `.gitignore`文件用于定...
vue3.x+element-plus 实现动态路由菜单功能 废话不多说直接上代码: 首先一般的后台管理都是有登录页面的 我们在登陆页面实现 具体的 接口调用 获取 动态菜单和权限 这里我们就简单mock一下 上代码: vue3.x-admin\src\mock\menu.json [ { "path": "/home",...
Vue3+ElementPlus+Pinia开发小兔鲜电商项目完整教程(附代码资料)主要内容讲述:认识Vue3,使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行时机,2. setup中写代码的特点。什么是pinia,创建空Vue项目并安装Pinia1. 安装...
【2】.导入element plus(按需引入) npm install -D unplugin-vue-components unplugin-auto-import vite.config.js - 自动导入配置 import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue...