Vue中ElementUI的思维脑图思维导图

灰色と青

2023-11-30

浏览量: 12

编程语言

应用开发

项目编程

Vue中ElementUI相关知识内容整理

树图思维导图提供《Vue中ElementUI的思维脑图》在线思维导图免费制作，点击“编辑”按钮，可对《Vue中ElementUI的思维脑图》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9bdf08ab5dd5c6550fb6bb54dac2c64d

思维导图大纲

概述

使用Element前提必须要有Vue。

组件：组成网页的部件，例如超链接、按钮、图片、表格等等~

Element官网： https://element.eleme.cn/#/zh-CN

快速入门

npm i element-ui -S 使用指令在本地安装ElementUI模块，同时添加依赖

在项目的Main.js中引入ElementUI

参考ElementUI组件文档，在HomeView中进行ElementUI布局配置

构建LeftMenu.vue，参考ElementUI菜单组件构建左侧菜单

构建HeaderMenu.vue，参考ElementUI中的Dropdown 和Avatar 头像

在HomeView中挂载使用LeftMenu和HeaderMenu

修改AppVue中的Css样式

Vue脚手架路由传参

index传统传参数

Query传参

Query传参也称之为传统参数方式，传递的参数会以?key=value&key=value的方式拼接到请求路径后面传递

并且在index.js中设置的对应路径不专门进行声明设置。（本质上就是:to=“‘/help/store?key=value&key=value’”写法）

在跳转到门店管理页面时就可以接收参数了，在views目录的store目录的store.vue中接收传递的参数。

Params传参

params传参方式也称之为resultFul方式传参，传递的参数会以/value/value的方式拼接到跳转路径上，此种方式需要在index.js设置路径进行动态声明。在router目录的index.js中对store的路径进行参数声明。

在components目录中的LeftMenu.vue中修改“帮买取快递废品回收”菜单中的“门店管理”菜单的路由操作，传递id和name参数过去

在跳转到门店管理页面时就可以接收参数了，在views目录的store目录的store.vue中接收传递的参数。

Query传参和Params传参的区别

query

query 在 router-link 中，to 属性允许使用 name 或 path 来指定路由。声明路由时，不需要声明占位符来声明参数。参数传递时以?key=value&key=value的形式拼接到请求路径上。例如：http://localho st:8080/help/store?id=1&name=门店管理菜单的名称。接收参数时使用this.$route.query的方式接收参数

params

在 router-link 中，to 属性只允许使用 name 来指定路由。声明路由时，需要声明占位符来声明参数，假设有id和content两个参数需要传递。例如：path:'store/:id/:name' 参数传递时以/value/value的形式拼接到请求路径上。例如：http://localhost:8080/he lp/store/id/name 接收参数时使用this.$route.params的方式接收参数。

Vue脚手架编程式导航

push

在components目录中的LeftMenu.vue中给“帮买取快递废品回收”菜单中的“门店管理”菜单设置点击事件

注意：如果用push方式进行query方式传参设置，那index.js中的路由需要调整，views目录中的 store目录中的store.vue中需要调整接收参数的方式

replace

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。在views目录的store目录的store.vue中，增加回退按钮及按钮点击事件，使用go实现回退操作。

Vue架手架项目打包

npm run build

Vue-路由

概述

Vue Router 是 Vue.js 官方的路由管理器路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转

Vue脚手架路由配置

在项目route目录 index.js文件

routes

path:'' 访问路径

name:'' route实例名称

component：~~~ 访问路径指向的组件

children:[{}] 子组件

routes为复数，表示为数组，数组中存放route实例对象

router

路由器，路由管理者当用户点击按钮时，router回去routes中查找route寻找对应的路由， router写法基本固定

const router =new VueRouter({ mode: 'history', base : process.env,BASE_URL, routes }) export default router

router-link

用于生成可点击的链接，他会自动将目标转换为href属性，并渲染为a标签

router-view

很重要！！！

用于渲染当前路由匹配到的组件

执行流程分析

Vue脚手架案例

加载小区管理路由跳转

在app.vue设置

views目录中创建quarters目录，在其中创建index.vue，表示小区管理页面

在项目的router目录下的index.js文件中设置路由，这里就需要使用嵌套路由操作

在LeftMenu.vue中找到小区管理菜单，设置element支持路由操作，并设置点击菜单跳转的路径

点击菜单需要展示的页面是需要在页面布局的main部分展示的，所以需要在HomeView中将 main的部分替换为router-view（因为elementui支持了router路由操作）

设置点击"帮买取快递废品回收"菜单中的“门店管理”，跳转到门店管理页面。在项目的views目录中创建store目录，在其中创建index.vue，表示帮买取快递废品回收页面

在项目的router目录下的index.js文件中设置路由，这里也需要使用嵌套路由操作

但是问题是，点击“帮买取快递废品回收”菜单是不会打开页面的，而是点击其下面的“门店管理” 菜单才进行跳转的，也就是说在views目录的store目录中再创建门店管理页面，然后在路由设置中要再帮买取快递废品回收的路由中再设置嵌套路由。在views目录的store目录中创建store.vue，表示门店管理页面。

Photoshop图层样式思维导图