vue-element-admin

这个项目是基于这个后台框架的,可以参考下面的地址

https://panjiachen.github.io/vue-element-admin-site/zh/

项目的主要运行步骤

  1. 先下载node.js

https://nodejs.org/en/

  1. 下载依赖包,在根目录(package.json在的目录下) 命令面板运行npm install
  2. 运行项目 npm run dev
  3. 最后如果上线打包项目 运行 npm run build:prod 

项目具体分析

项目的主要代码在src目录下

路径的映射设置 在根目录下的vue.config.js文件下

 

  1. 路由分析

路由文件在src的router文件下,index.js文件

element ui 密码 验证 element ui admin教程_官网

element ui 密码 验证 element ui admin教程_官网_02

element ui 密码 验证 element ui admin教程_element ui 密码 验证_03

这个show应用在具体的页面,所以写页面要按照下面的结构来下,后续会讲到

element ui 密码 验证 element ui admin教程_element ui 密码 验证_04

路由对应的页面

element ui 密码 验证 element ui admin教程_element ui 密码 验证_05

就上面的页面

几个页面结构要保持的

index页面要保持这样的结构

element ui 密码 验证 element ui admin教程_element ui 密码 验证_06

index里面的 router-view要展示的在list里面

list结构页面如下

element ui 密码 验证 element ui admin教程_根目录_07

element ui 密码 验证 element ui admin教程_根目录_08

其他子路由页面,如 create

element ui 密码 验证 element ui admin教程_根目录_09

2)vue相关的基础操作

参考文档

https://cn.vuejs.org/v2/guide/

这里讲下常用的

template部分

因为这里是用组件化的开发方式(可以说每个vue文件就是一个组件)

所以每个vue文件结构外面template 里面只能一个div包裹着,不能有和两个同级的div

element ui 密码 验证 element ui admin教程_官网_10

script部分

element ui 密码 验证 element ui admin教程_根目录_11

相关语法的使用

数据表达和渲染

https://cn.vuejs.org/v2/guide/syntax.html

这里的数据主要是 data里面的 return,

v-for 遍历

https://cn.vuejs.org/v2/guide/list.html

v-if 条件

https://cn.vuejs.org/v2/guide/conditional.html

v-on:click=”事件名” 或@click=”事件名”

事件的处理函数写在 methods里面

https://cn.vuejs.org/v2/guide/events.html

路由跳转传参

  1. 写在结构里面的

element ui 密码 验证 element ui admin教程_官网_12

name里面写组件的名字,就是之前路由的name里面的

上面的params的传参,还可以写query的 ,区别在于参数显示

  1. 写在js里面的

element ui 密码 验证 element ui admin教程_官网_13

参数接收,在mounted或created生命周期函数里面用

element ui 密码 验证 element ui admin教程_根目录_14

  1. Element-ul的基本使用

https://element.eleme.cn/2.0/#/zh-CN/component/installation

在项目的应用 (基本的引入这边已经处理了)

element ui 密码 验证 element ui admin教程_element ui 密码 验证_15

element ui 密码 验证 element ui admin教程_element ui 密码 验证_16

直接对着文档,需要怎样的结构直接复制粘贴

数据的结构都是和上面说的文档一致的

element ui 密码 验证 element ui admin教程_html_17

这里说下一些弹窗和一些交互的ui

  1. 在js文件引入 elment ui

element ui 密码 验证 element ui admin教程_html_18

这两个是官网的,按照需求引入

element ui 密码 验证 element ui admin教程_html_19

使用就和文档一样就可以

2)看看全局的引入

element ui 密码 验证 element ui admin教程_element ui 密码 验证_20

官网也有,我这里简化写了出来

https://element.eleme.cn/2.0/#/zh-CN/component/message

登陆页面相关要注意的地方

element ui 密码 验证 element ui admin教程_element ui 密码 验证_21

校对成功后的处理,在这个if函数里面,

Vue的页面跳转是用 this.$router.push({}) 可以直接写组件路径地址如下图,也可以写{name:”组件名字”, query:{}}  或{name:”组件名字”, params:{}}  这两种带参数的

element ui 密码 验证 element ui admin教程_html_22

如需要用到cookie存东西

element ui 密码 验证 element ui admin教程_根目录_23