vue-elment-admin基本使用说明

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文件

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

路由对应的页面

就上面的页面

几个页面结构要保持的

index页面要保持这样的结构

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

list结构页面如下

其他子路由页面，如 create

2）vue相关的基础操作

参考文档

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

这里讲下常用的

template部分

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

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

script部分

相关语法的使用

数据表达和渲染

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. 写在结构里面的

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

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

1. 写在js里面的

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

1. Element-ul的基本使用

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

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

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

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

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

1. 在js文件引入 elment ui

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

使用就和文档一样就可以

2）看看全局的引入

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

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

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

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

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

如需要用到cookie存东西