Vue Element Admin UI 入门

发表于 | 分类于 | 阅读数

简介

Vue

是一套构件用户界面的渐进式框架（也就是组件不一定要全部整合在一起）。api简单，文档齐全，功能强大，关注度非常高

使用MVVM双向绑定，使用订阅者和发布者模式实现：

  • 定义发布者、订阅者
  • 订阅者首先注册到发布者，然后发布者发布消息时向订阅者发送消息

Element UI

Element UI 是一套采用 Vue 作为基础框架实现的组件库

Vue Element Admin UI

是基于 Vue2.0，配合使用 Element UI 组件库的一个前端管理后台集成解决方案。是基于vue/vuex/vue-router/element，提炼了典型的业务模型，提供了丰富的功能组件，支持动态换肤，国际化，根据权限动态加载路由

安装教程

安装Node.js

官方下载地址

安装完后检测环境变量，点击开始→运行→输入"cmd"→输入"path",输出结果

1
PATH=C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;D:\Program Files\Java\jdk1.8.0_171\bin;D:\Program Files\apache-maven-3.5.3\bin;D:\Program Files\TortoiseSVN\bin;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\dotnet\;C:\WINDOWS\System32\OpenSSH\;d:\Program Files\Git\cmd;D:\Program Files\nodejs\;C:\Users\root\AppData\Local\Microsoft\WindowsApps;D:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\root\AppData\Roaming\npm;C:\Users\root\AppData\Local\GitHubDesktop\bin

环境变量中已经包含了D:\Program Files\nodejs\

检测Node.js版本

1
2
C:\Users\root>node --version
v10.8.0

下载vue-element-admin

Github地址

cmd执行命令

  • win+r输入cmd打开命令行工具执行 npm install -g cnpm --registry=https://registry.npm.taobao.org 退出命令行工具

  • 打开命令行工具执行cnpm install vue -g

  • 打开命令行执行cnpm install vue-cli -g

安装vscode

  • 安装vscode
  • 打开vscode安装插件Vetur
  • 打开vscode安装插件vue

启动Element UI Admin

  • 通过vscode打开下载的工程
  • 执行npm install
  • 执行npm dev run
  • 会自动打开 http://localhost:9527

编译

1
2
3
4
5
# 编译测试环境
npm run build:sit

# 编译生产环境
npm run build:prod

程序模块介绍

配置文件

packages.json 配置依赖包

build/webpack.dev.conf.js dev模式编译的配置

build/webpack.prod.conf.js prod模式编译的配置

config 配置文件存放目录

源码目录

src 源码目录

Element UI

设计原则是：

一致性 Consistency

  • 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
  • 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

  • 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
  • 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

  • 简化流程：设计简洁直观的操作流程；
  • 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
  • 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

  • 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
  • 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

包含组件：

  • Layout 布局
  • Container 布局容器
  • Color 色彩
  • Typography 字体
  • Icon 图标
  • Button 按钮
  • Radio 单选框
  • Checkbox 多选框
  • Input 输入框
  • InputNumber 计数器
  • Select 选择器
  • Cascader 级联选择器
  • Switch 开关
  • Slider 滑块
  • TimePicker 时间选择器
  • DatePicker 日期选择器
  • DateTimePicker 日期时间选择器
  • Upload 上传
  • Rate 评分
  • ColorPicker 颜色选择器
  • Transfer 穿梭框
  • Form 表单
  • Table 表格
  • Tag 标签
  • Progress 进度条
  • Tree 树形控件
  • Pagination 分页
  • Badge 标记
  • Alert 警告
  • Loading 加载
  • Message 消息提示
  • MessageBox 弹框
  • Notification 通知
  • NavMenu 导航菜单
  • Tabs 标签页
  • Breadcrumb 面包屑
  • Dropdown 下拉菜单
  • Steps 步骤条
  • Dialog 对话框
  • Tooltip 文字提示
  • Popover 弹出框
  • Card 卡片
  • Carousel 走马灯
  • Collapse 折叠面板