首页 > 其他分享 >vue-element-admin 介绍

vue-element-admin 介绍

时间:2022-10-17 20:04:27浏览次数:44  
标签:npm vue run admin element -- build

简介

vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。

本项目的定位是后台集成方案,不适合当基础模板来开发。

  • 模板建议使用: vue-admin-template
  • 桌面端: electron-vue-admin
  • Typescript版: vue-typescript-admin-template (鸣谢: @Armour)

注意:该项目使用 [email protected]+ 版本,所以最低兼容 [email protected]+

从​​v3.8.0​​开始使用​​webpack4​​。所以若还想使用​​webpack3​​开发,请使用该分支webpack3

该项目不支持低版本浏览器(如 ie),有需求请自行添加 polyfill 详情

前序准备

你需要在本地安装 node 和 git。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、axios 和 element-ui,所有的请求数据都使用Mock.js模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。

vue-element-admin 介绍_bundle

功能

- 登录 / 注销

- 权限验证
- 页面权限
- 指令权限
- 二步登录

- 多环境发布
- dev sit stage prod

- 全局功能
- 国际化多语言
- 多种动态换肤
- 动态侧边栏(支持多级路由嵌套)
- 动态面包屑
- 快捷导航(标签页)
- Svg Sprite 图标
- 本地mock数据
- Screenfull全屏
- 自适应收缩侧边栏

- 编辑器
- 富文本
- Markdown
- JSON 等多格式

- Excel
- 导出excel
- 导出zip
- 导入excel
- 前端可视化excel

- 表格
- 动态表格
- 拖拽表格
- 树形表格
- 内联编辑

- 错误页面
- 401
- 404

- 組件
- 头像上传
- 返回顶部
- 拖拽Dialog
- 拖拽Select
- 拖拽看板
- 列表拖拽
- SplitPane
- Dropzone
- Sticky
- CountTo

- 综合实例
- 错误日志
- Dashboard
- 引导页
- ECharts 图表
- Clipboard(剪贴复制)
- Markdown2html

开发

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 安装依赖
npm install

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

# 启动服务
npm run dev

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

发布

# 构建测试环境
npm run build:sit

# 构建生产环境
npm run build:prod

其它

# --report to build with bundle size analytics
npm run build:prod

# --generate a bundle size analytics. default: bundle-report.html
npm run build:prod --generate_report

# --preview to start a server in local to preview
npm run build:prod --preview

# lint code
npm run lint

# auto fix
npm run lint -- --fix

更多信息请参考 使用文档

Donate

如果你觉得这个项目帮助到了你,你可以帮作者买一杯果汁表示鼓励 :tropical_drink:


License

MIT

Copyright (c) 2017-present PanJiaChen

vue-element-admin 介绍_git_02


标签:npm,vue,run,admin,element,--,build
From: https://blog.51cto.com/starsliao/5764152

相关文章

  • 前端Vue2-Day53
    修改默认配置:使用vue>output.js可以查看到Vue脚手架的默认配置。在vue.config.js中进行修改。eg:lintOnSave:false//关闭语法检查 脚手架文件结构: ref属性:被用来......
  • vuex是什么
    Vuex是vue框架中状态管理工具;状态管理就是全局的状态工具,如何组件都可以获取状态(state)或者触发行为(mutations); 好处:存储token,单页应用中,组件之间的数据状态。可以做......
  • 原生js document.getElementById("XXX").disabled="false";无效
    想要设置表单元素不能访问时,使用document.getElementById("XXX").disabled="true";但是想要取消disabled的时候,发现document.getElementById("XXX").disabled="false";无......
  • vue 的响应式原理
    通过Obejct.defineProperty定义数据,给数据加上geter和setter,获取数据和触发getter设置数据触发setter,从而实现数据的监听;通过发布订阅模式进行依赖收集与视图......
  • vue3中的defineProps,watch,computed
    在vue3的setup语法糖中,defineProps不需要引入了<scriptsetup>import{computed}from'@vue/reactivity';import{onMounted,watch}from'vue';letprops=de......
  • @vitejs/plugin-vue
      需要cmd命令下载,我指定的版本是1.0.0,这里需要的node版本的要>=12.0.0 而我的vue版本是3.04>npmi@vitejs/[email protected] 以下的@vitejs/plugin-vue的......
  • vue项目Eslint和prettier结合使用
    一、eslint介绍——代码语法检查工具Eslint是一个代码检查工具,用来检查你的代码语法是否符合指定的规范,ECMAScript标准二、prettier插件——代码格式化工具prettier是......
  • 解决vuex刷新页面数据丢失问题(数据持久化)
    1、为什么刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是......
  • vue+elementui 的表格单元格内修改数据
    cellDbClick(row,column,cell,event){   varthat=this     event.target.innerHTML=''     varcellInput=document.createElem......
  • elementui半年选择组件
    1.基于elementui开发的半年选择组件2.调用<el-halfyear-pickerv-model="date":size="size"></el-halfyear-picker>3.代码<template><divclass="el-quarter-p......