![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue实战
文章平均质量分 77
luo_guibin
这个作者很懒,什么都没留下…
展开
-
Vue实战开发--后台管理系统Vue+Element ui(12)
本节课完成登录页面以及登录接口。登录页面前提在router文件中添加路径为/login的路由,引入视图,注意是与路径“/”为兄弟关系。在view下新建login文件夹,新建login.vue,模板页面。2.login页面页面有账号和密码两个表单域,引入表单el-form,添加属性,添加model属性“form”,states-icon表示表单校验图标,rules表单校验,新建校验名为“rules”,新建ref属性为“form”,以此能拿return里的form内容。label-width为名原创 2022-08-05 09:05:54 · 470 阅读 · 0 评论 -
Vue实战开发--后台管理系统Vue+Element ui(11)
本节课完成用户列表表单设计,使用table组件,同样模块化组件,CommonTable.vue组件,并且在User页面中引入,mock实现数据模拟,最终完成用户列表多项功能,实现新增,搜索,编辑,删除功能。首先是基本信息页面el-table的data属性用于接收table的外部数据tableData,因此添加props,类型是Array,高度90%,stripe属性表示斑马条纹样式。el-table-column表示表头和第一行的内容,后面数据可以循环使用。show-overflow-tooltip表示过长原创 2022-06-22 10:26:13 · 1068 阅读 · 2 评论 -
Vue实战开发--后台管理系统Vue+Element ui(10)
本节课完成user页面下的diolog表单,表单里的元素都是动态渲染,以一个CommonForm组件的形式放入user页面。新建CommonForm.vue组件,添加props,用于接受3个参数,formLabel为一个数组,form的相关配置,form的表单数据,类型为Object,表单布局inline,为一个布尔值。el-form添加属性,首先是ref标识,可以通过refs拿到ref实例,label-width为初始高度,但是会根据内容变化而变化,并不固定。model用来数据的双向绑定(重要),我们传入原创 2022-06-12 16:27:32 · 670 阅读 · 1 评论 -
Vue实战开发--后台管理系统Vue+Element ui(9)
这节课完成面包屑和tag的布局,并且与左侧菜单联系,涉及组件间通信。 首先我们先完成每个页面的路由,之前已经有home页面和user页面,缺少mail页面和其它选项下的page1和page2页面。在view文件夹下新建mail文件夹,新建index.vue,填充user页面的内容即可。在view下新建other文件夹,新建pageOne.vue和pageTwo.vue,页面内容简单填充即可。三个页面都要更改name属性,后面会用到,首字母大写。示例:配置路由:在路由主文件添加路由,路由位置在CommonAs原创 2022-06-11 18:28:09 · 3570 阅读 · 1 评论 -
Vue实战开发--后台管理系统Vue+Element ui(8)
本节课据徐完成home页面的折线图、柱状图、饼图,使用echarts。这里不进行解释,可以前往官方文档。效果图:cnpm i echarts@5.1.2安转指定版本依赖,在饼图的位置添加div,不需要在main.js中引入,只需要在home下的index.vue无版本引入。更改mounted(){},data下包含四个图的数据,注意orderData下的第一个数据是date!!报错一直找不到是这个原因。这里用Object.keys()返回数组的属性而不包含属性值。keyArray就是一个key的原创 2022-06-05 20:13:11 · 309 阅读 · 0 评论 -
Vue实战开发--后台管理系统Vue+Element ui(7)
本节课将开始学习异步库axios(重要!!!),axios是一个基于promise的HTTP库,使用npm i axios。在main.js中引入,需要绑定在Vue的prototype属性上,并重命名。main.js文件在home的index.vue中添加mounted在控制台中可以发现请求已发送,状态为404在根目录下新建config文件夹,新建index.js,主要是让系统判断当前处于生产状态还是用户状态。对axios函数进行二尺封装,方便后续使用。在根目录下新建api文件夹,新建ax原创 2022-06-05 15:47:39 · 1215 阅读 · 2 评论 -
Vue实战开发--后台管理系统Vue+Element ui(6)
本节课将完成home的所有布局。原创 2022-06-02 15:02:33 · 364 阅读 · 0 评论 -
Vue实战开发--后台管理系统Vue+Element ui(5)
这一节 我们对资源样式进行整合,在src下assets下放入images、less文件夹,可以通过我的附件进行下载,或者通过链接网盘链接下载,随后布局Header。本节课完成效果图如下:项目资源:https://pan.baidu.com/s/1BbbjR5MgeVm4XVP7FQzJlA 提取码:9xnb1.载入样式文件在main.js中引入,注意目录不要错。2.Header布局在components文件夹下新建CommonHeader.vue文件,Header也.原创 2022-05-29 19:49:10 · 624 阅读 · 0 评论 -
Vue实战开发--后台管理系统Vue+Element ui(4)
第四节会将Home.vue文件重新命名为Main.vue文件,本节涉及新的home目录和User目录下的index.js文件,因为侧边导航栏Aside和顶部Header是在每一个页面都存在的,所以重新命名为Main,而home文件夹下的index.js则对应系统首页。1.添加el-menu样式更改CommonAside.vue的style标签,这里引入less,为侧边导航栏加上高度,去除边框,调整h3标签。//CommonAside.vue的style标签<style lang="l原创 2022-05-28 00:30:08 · 458 阅读 · 0 评论 -
Vue实战开发--后台管理系统Vue+Element ui(3)
这节课开始页面布局原创 2022-05-27 14:03:24 · 2534 阅读 · 1 评论 -
Vue实战开发--后台管理系统Vue+Element ui(2)
第二节讲引入Element ui和vue路由使用1.Element uiElement ui 官方文档:Element - The world's most popular Vue UI framework1.2全局引入Element ui安装npm i element-ui -S,-S等价于--save--dev--save:将保存配置信息到pacjage.json。默认为dependencies节点中。--dev:将保存配置信息devDependencies节点中。在mian原创 2022-05-26 23:33:04 · 812 阅读 · 0 评论 -
Vue实战开发--后台管理系统Vue+Element ui(1)
1.环境配置1.1Node环境下载链接:下载 | Node.js 中文网正常软件安装下载即可,打开检cmd过安装包安装node环境会自带npm工具。1.2安装cnpm主要用来代替npm,因为npm下载速度过慢。npm install -g cnpm -registry=https://registry.npm.taobao.org1.3安装yarnnpm install -g yarn1.3脚手架cnpm install -g @vue/cli注.原创 2022-05-25 23:58:16 · 384 阅读 · 0 评论