克隆/下载
贡献代码
同步代码
阿坤 绿泡泡 3ad7a5f 3个月前
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

vue2-admin

vue2 后台管理系统模板 gitee 地址 github 地址

后台使用node👉 node_serve

github预览地址:https://autchan-ak.github.io/vue2-admin.github.io/

本项目可作为模板进行二次开发,基础功能均可以直接复用。

  • 项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios
  • 支持本地 mock 数据 ( 基于 Mockjs + webpack dev server );
  • 支持异步请求代理;
  • 支持模块化开发
  • 支持权限化显示
  • 自动发现并注册路由、store
  • 自动注册组件;
  • .env.development.local 覆盖 env

安装依赖 node: '>=12.0.0'

npm install
pnpm install

启动项目

npm run serve

打包上线

npm run build

组件使用

md编辑器

  • 支持参数:
属性名 类型 默认值 说明
height Number 500 编辑器高度(px)
placeholder String 请输入内容 编辑器提示语
mdContent String 编辑器内容
v-model绑定
mode String editable edit (纯编辑模式)
editable (编辑与预览模式)
preview (纯预览模式)
  <!-- 查看 -->
  <MdEditor v-model="content" mode="preview" />
  <!-- 编辑 -->
  <MdEditor v-model="content" />

表格组件

  • 支持动态列,指定列排序<ScreenTable>
  • 支持参数:
属性名 类型 默认值 说明
list Array 表头数据
table Array 表格数据
current-page Number 1 分页
page-size Number 15 每页条数
total Number 0 总条数
handleCurrentChange Function 改变页码后触发的方法
handleSizeChange Function 改变每页条数后触发的方法
tableSort Function 表格排序后触发的方法
btns Slot 操作按钮区域

  • list 参数:
属性名 类型 默认值 说明
label String 表头文字
prop String 对应数据字段
showOverflowTooltip Boolean false 是否显示溢出提示
width String / Number 宽度
minWidth String / Number 最小宽度
align String left 对齐方式
type String 显示类型
time:时间格式|tag:标签格式
format String 时间格式typetime时生效
tag Object 标签数组typetag时生效
sortable String 是否可排序
sort String 排序方式sortable有值时生效
可选值:asc | desc
slot Slot 自定义插槽

  • 标签数组tag参数:key为标签的索引,value为标签对象。
属性名 类型 默认值 说明
label String 标签文字
type String 标签类型
success | info | warning | danger | text
effect String 标签主题
dark | light | plain
size String 标签大小
mini | small | medium
    <ScreenTable
        :list="tableList"
        :table="tableData"
        :currentPage="page"
        :pageSize="size"
        :total="total"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        @tableSort="tableSort"
    >
      <div slot="btns">
        <el-button type="primary" size="small" @click="add">新增</el-button>
      </div>
      <div slot="operate">
        <el-table-column label="操作" width="100" align="center">
          <template v-slot="{ row }">
            <el-button type="text" size="mini" @click="view(row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </div>
    </ScreenTable>

下拉树形组件

  • 支持参数:
属性名 类型 默认值 说明
multiple Boolean false 是否多选
placeholder String 请选择 提示语
clearable Boolean false 是否可以清空选项
filterable Boolean false 是否可搜索
disabled Boolean false 是否禁用
data Array tree数据
nodeKey String / Number id 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的
defaultProps Object {label: 'label',children: 'children'}
value / v-model String / Number 绑定值
change Function 改变后触发的方法
<select-tree :data="list" v-model="value" @change="handleChange"/>

SVG使用

将 svg 保存在 /src/assets/icon

el 图标也可传入

<svg-icon icon="name" />

默认启动为mock

  • 账号:admin || test
  • 密码:123456

项目截图

项目截图项目截图 项目截图项目截图 项目截图项目截图 项目截图项目截图

接口返回说明

{
  "data": "数据",
  "meta": {
    "msg": "提示信息",
    "status": "状态码",
    "type": "error||success"
  }
}

"状态码":[
  "200":"成功,不带弹窗",
  "401":"token失效,重新登陆",
  "201":"成功,带弹窗",
]

目录结构说明

└──/assets/                   静态资源
│  ├── /icon/                 svg图标
│  ├── ...
│  ├──
├── /components/              全局组件
│  ├── index.js               自动注册 实例 入口
│  ├── ...
│  │
├── /directive/               全局指令
│  ├── index.js               自动注册 实例 入口
│  ├── ...
│  │
├── /filters/                 全局过滤器
│  ├── index.js               自动注册 实例 入口
│  ├── ...
│  │
├── /layout/                  布局页
│  ├── ...                    不多解释
│  │
├── /modules/                 模块开发
│  ├── /test/                 示例模版
│  ├── ...                    页面都在此处开发
│  │
├── /request/                 请求方法
│  ├── ...                    不多解释
│  │
├── /router/                  路由
│  ├── ...                    不多解释
│  │
├── /store/                   数据存储
│  ├── ...                    不多解释
│  │
├── /utils/                   工具方法文件夹
│  │  ├── BaseUtil.js         业务工具类
│  │  ├── ComponentUtil.js    注册组件类
│  │  ├── CryptUtil.js        加密工具类
│  │  ├── functions.js        公共方法类
│  │  ├── ProjectTools.js     保存信息类
│  │  ├── RegExpUtil.js       各种正则方法类
│  │  ├── theme.js            主题样式类
│  │  └── ...
├── package.json
├── README.md

最后

  • 🌟 如果喜欢一定要 star哈!!!(谢谢!!)
  • ❓ 如果有意见和问题 请在 lssues提出,我看到后会解答。
  • 📢 承接Vue、React、小程序等项目开发。有需求可滴滴哦
  • 🚀 可添加作者 绿泡泡 tadpole_01
公众号
MIT License Copyright (c) 2022 GavinZhuLei Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

vue2-admin 是一个后台管理的前端系统 它基于 vue2 和 element-ui实现。 本项目可作为模板进行二次开发,基础功能均可以直接复用。 动态路由,权限验证 速搭建企业级中后台产品原型 展开 收起
Vue 等 5 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化