fenchenfangbao/vite-element-template/README.md

依赖

vue2 + elementui2 +vue-router+ axios + pinia

开发说明

• views/ 目录仅存放页面（路由）组件，（因为菜单管理会读取views文件列表）
• components/ 页面的组件存放在components目录，目录要和views中页面路径一致
• components/common/ 公共组件存放
• directive/ 挂载全局指令
• methods/ 挂载全局函数
• store/ 状态管理（https://pinia.vuejs.org/zh/）

vite-admin-template

原作者，可以参考代码示例

原作者预览地址

原作者文档

二次改编

本仓库

Build Setup

# 安装依赖、npm建议替换为pnpm
npm install

# 建议不要直接使用 cnpm 安装，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev
npm run dev:test
npm run dev:staging

浏览器访问 http://localhost:9528

发布

# 构建生产环境
npm run build

其它

# 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
# npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix

图标使用

1. svg图标，放在src/icons/svg 目录下

<svg-icon :icon-class="文件名" class-name="disabled" />

2. element自带图标

<i :class="'el-icon-图标名'" />

3. 合并svg图标、element自带图标

<AnyIcon :icon="svg文件名或者el图标名" :class-name="icon" ></AnyIcon>
<style scoped>
.icon{
  font-size: 40px;
  color: red;
}
</style>

4. 自定义字体图标（无、不建议使用）