vue-element-admin
这个项目是基于这个后台框架的,可以参考下面的地址
https://panjiachen.github.io/vue-element-admin-site/zh/
项目的主要运行步骤
- 先下载node.js
- 下载依赖包,在根目录(package.json在的目录下) 命令面板运行npm install
- 运行项目 npm run dev
- 最后如果上线打包项目 运行 npm run build:prod
项目具体分析
项目的主要代码在src目录下
路径的映射设置 在根目录下的vue.config.js文件下
- 路由分析
路由文件在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
路由跳转传参
- 写在结构里面的
name里面写组件的名字,就是之前路由的name里面的
上面的params的传参,还可以写query的 ,区别在于参数显示
- 写在js里面的
参数接收,在mounted或created生命周期函数里面用
- Element-ul的基本使用
https://element.eleme.cn/2.0/#/zh-CN/component/installation
在项目的应用 (基本的引入这边已经处理了)
直接对着文档,需要怎样的结构直接复制粘贴
数据的结构都是和上面说的文档一致的
这里说下一些弹窗和一些交互的ui
- 在js文件引入 elment ui
这两个是官网的,按照需求引入
使用就和文档一样就可以
2)看看全局的引入
官网也有,我这里简化写了出来
https://element.eleme.cn/2.0/#/zh-CN/component/message
登陆页面相关要注意的地方
校对成功后的处理,在这个if函数里面,
Vue的页面跳转是用 this.$router.push({}) 可以直接写组件路径地址如下图,也可以写{name:”组件名字”, query:{}} 或{name:”组件名字”, params:{}} 这两种带参数的
如需要用到cookie存东西