Skip to content

lpya/vue3-vite-elementplus-admin

Repository files navigation

vue3+vite+elemetnplus+admin

vue vite element-plus vue-router vuex

简介

vue3+vite+elemetnplus+admin是一个后台前端解决方案,它基于 vue3 和 element-plus 实现。它使用了最新的前端技术栈,内置了动态路由、权限验证等业务模型,后续会提供更多的功能组件...

目录结构

├── public              # 静态资源
│   └── favicon.ico     # favicon图标
├── src                 # 源代码
│   ├── @types          # 类型定义
│   ├── api             # 所有请求
│   ├── assets          # 主题、样式、字体
│   ├── components      # 全局公共组件
│   ├── interface       # 全屏接口
│   ├── layout          # 全局layout
│   ├── router          # 路由
│   ├── store           # 全局store管理
│   ├── styles          # 全局样式
│   ├── utils           # 公用方法
│   ├── views           # views所有页面
│   ├── env.d.ts        # 声明
│   ├── main.ts         # 入口文件
│   ├── permission.ts   # 权限管理
│   └── App.vue         # 入口页面
├── index.html          # html模板
├── .env.development    # 配置文件
├── .env.production     # 配置文件
├── package.json        # package.json
├── README.md           # README.md
├── tsconfig.json       # ts配置
└── vite.config.ts      # vite配置

开发

#克隆项目
git clone https://github.com/lpya/vue3-vite-elementplus-admin.git

#进入项目目录
cd vue3-vite-elementplus-admin

#安装依赖
npm install

#启动服务
npm run dev

#安装依赖报错时
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-prettier@6.0.0
npm ERR! Found: eslint-plugin-prettier@4.2.1

#配置淘宝镜像,使用cnpm install安装依赖
npm install -g cnpm --registry=https://registry.npm.taobao.org

tips:由于UI组件按需引入,首次启动速度会慢点,可以修改配置,打包时按需引入,开发时全局引入

发布

#预览
npm run preview

#打包发布
npm run build