qq_36158551的博客

首先要在高德开放平台获取key，进入网链接: https://lbs.amap.com/。

本节课完成登录页面、登录接口以及退出登录。

本节课完成用户列表表单设计，使用table组件，同样模块化组件，CommonTable.vue组件，并且在User页面中引入，mock实现数据模拟，最终完成用户列表多项功能，实现新增，搜索，编辑，删除功能。首先是基本信息页面el-table的data属性用于接收table的外部数据tableData，因此添加props，类型是Array，高度90%，stripe属性表示斑马条纹样式。el-table-column表示表头和第一行的内容，后面数据可以循环使用。

本节课完成user页面下的diolog表单，表单里的元素都是动态渲染，以一个CommonForm组件的形式放入user页面。运用Element ui Form表单。

本章节完成VueWeb面包屑和tag的布局，并且与左侧菜单联系，涉及组件间通信。

异步库axios和mockjs模拟后端数据，axios是一个基于promise的HTTP库，使用npm i axios。在main.js中引入，需要绑定在Vue的prototype属性上，并重命名。（1）main.js文件引用。

使用Element ui的Layout栅格布局（24），el-row表示大盒子，gutter表示col之间的列宽，只需要设置高度即可，el-col的宽度用:span属性表示，大致el-col中有el-card标签。col表示列，card表示列里面的卡片。&emsp在home下的index.js文件。

const {// 部署生产环境和开发环境下的URL。// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。

vuex官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。专门为vue.js应用程序开发的状态管理模式，这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分，也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。大家可以思考一下，组件之间的传值有哪些？有父子通讯，兄弟组件通讯…但是传参对于多层嵌套就显得非常繁琐，代码维护也会非常麻烦。

将Home.vue文件重新命名为Main.vue文件，本节涉及新的home目录和User目录下的index.js文件，因为侧边导航栏Aside和顶部Header是在每一个页面都存在的，所以重新命名为Main，而home文件夹下的index.js则对应系统首页。（1）更改CommonAside.vue的style标签，这里引入less，为侧边导航栏加上高度，去除边框，调整h3标签。（2）更改CommonAside.vue的el-menu标签里的样式，注意！！！

使用中的Container布局容器，选择倒数第二个样式，将代码复制到Home.vue。

new一个VueRouter并用router接收，这样做是为了方便向外暴露router，进行修改配置mode为history，以数组的形式传入路由相关信息，用routes接收。在App.vue中写入，Home页面会展示过来，当然不仅仅是Home页面，新建其他页面绑定路由都可以。在根目录下新建router文件夹，router文件夹下新建router.js文件，所有路由逻辑待会编写在这个router.js文件。注意是大写V，这里是脚手架版本，不是Vue版本，跟Vue2、Vue3无关。

vue项目main.js文件下import router from './router’默认导入router文件夹下index.js的原因这个不是vue的规定而是node加载模块的方式,当require(’./router’)(import会被转为require),node是这样的寻找目标的:（1）首先寻找目录下有没有router.js或者router.node,如果有就导入。