https://github.com/huzhushan/vue3-element-admin
下载 放入 vscode 工作区 然后 打开vscode右键终端打开npm install

image.png image.png

！！！注意改完要保存 再启动

使用git克隆项目 或者 直接下载项目

git clone https://github.com/huzhushan/vue3-element-admin.git

进入项目目录

cd vue3-element-admin

安装依赖

npm install

将permission.js中的相关代码

原代码：import { TOKEN } from '@/store/modules/app' // TOKEN变量名

更改为如下代码：

import { TOKEN } from '@/pinia/modules/app' // TOKEN变量名
！！！！保存

启动服务

npm start
前段页面搭建完成

mock                    // 用于测试，模拟后端接口地址
public                  // 存储公共的静态资源：图片
src                     // 源代码目录，非常重要
    | api               // 提供用于请求后端接口的js文件
    | assets            // 存储静态资源：图片、css
    | components        // 存储公共组件,可重用的一些组件
    | directive         // 存储自定义的一些指令
    | hooks             // 存储自定义的钩子函数
    | i18n              // 存储用于国际化的js文件
    | layout            // 存储首页布局组件
    | pinia             // 用于进行全局状态管理
    | router            // 存储用于进行路由的js文件
    | utils             // 存储工具类的js文件
    | views             // 和路由绑定的组件
    | App.vue           // 根组件
    | default-settings.js // 默认设置的js文件
    | error-log.js      // 错误日志js文件
    | global-components.js // 全局组件的js文件
    | main.js           // 入口js文件(非常重要)
    | permission.js     // 权限相关的js文件(路由前置守卫、路由后置守卫)
vite.config.js          // vite的配置文件，可以在该配置文件中配置前端工程的端口号