You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.0 KiB
84 lines
2.0 KiB
4 weeks ago
|
# 依赖
|
||
|
|
vue2 + elementui2 +vue-router+ axios + pinia
|
||
|
|
|
||
|
|
# 开发说明
|
||
|
|
- `views/` 目录仅存放页面（路由）组件，（因为菜单管理会读取views文件列表）
|
||
|
|
- `components/` 页面的组件存放在components目录，目录要和views中页面路径一致
|
||
|
|
- `components/common/` 公共组件存放
|
||
|
|
- `directive/` 挂载全局指令
|
||
|
|
- `methods/` 挂载全局函数
|
||
|
|
- `store/` 状态管理（https://pinia.vuejs.org/zh/）
|
||
|
|
# vite-admin-template
|
||
|
|
|
||
|
|
[原作者，可以参考代码示例](https://panjiachen.gitee.io/vue-admin-template)
|
||
|
|
|
||
|
|
[原作者预览地址](https://panjiachen.github.io/vue-element-admin/#)
|
||
|
|
|
||
|
|
[原作者文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
|
||
|
|
|
||
|
|
|
||
|
|
[二次改编](https://gitee.com/mi-sa-ka10032/vite-element-template.git)
|
||
|
|
|
||
|
|
[本仓库](http://182.92.163.198:3000/18610965287/cc-admin-element-ui.git)
|
||
|
|
## Build Setup
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 安装依赖、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](http://localhost:9528)
|
||
|
|
|
||
|
|
## 发布
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 构建生产环境
|
||
|
|
npm run build
|
||
|
|
```
|
||
|
|
|
||
|
|
## 其它
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 预览发布环境效果
|
||
|
|
npm run preview
|
||
|
|
|
||
|
|
# 预览发布环境效果 + 静态资源分析
|
||
|
|
# npm run preview -- --report
|
||
|
|
|
||
|
|
# 代码格式检查
|
||
|
|
npm run lint
|
||
|
|
|
||
|
|
# 代码格式检查并自动修复
|
||
|
|
npm run lint -- --fix
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
# 图标使用
|
||
|
|
1. svg图标，放在`src/icons/svg` 目录下
|
||
|
|
```html
|
||
|
|
<svg-icon :icon-class="文件名" class-name="disabled" />
|
||
|
|
```
|
||
|
|
2. element自带图标
|
||
|
|
```html
|
||
|
|
<i :class="'el-icon-图标名'" />
|
||
|
|
```
|
||
|
|
|
||
|
|
3. 合并svg图标、element自带图标
|
||
|
|
```html
|
||
|
|
<AnyIcon :icon="svg文件名或者el图标名" :class-name="icon" ></AnyIcon>
|
||
|
|
<style scoped>
|
||
|
|
.icon{
|
||
|
|
font-size: 40px;
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
4. 自定义字体图标（无、不建议使用）
|