第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=‘你申请的key’&plugin=AMap.MouseTool&plugin=AMap.Autocom

1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文件在:\src\layout\components\Sidebar\index.vue, Sidebar组件中   image.png 2)修改侧边栏Log和标题在文件:src\layout\components\Sidebar\Logo.vue   image.png 3) 控制showLogo字

纯前端实现: 切片上传 断点续传 .断点续传需要在切上上传的基础上实现 前端之前上传OSS,无需后端提供接口.先上完整代码,直接复制,将new OSS里的参数修改成自己公司OSS相关信息后可用,如遇问题,请继续往下看. oss官方文档 https://help.aliyun.com/document_detail/111268.html?spm=a2c4g.11186623.6.1111.5a583a07LknRUO 代码允许所需环境:vue + element + ali-oss 安装ali-

1.安装npm sudo apt install npm 检测安装npm -v 因为npm安装软件慢,可设置淘宝镜像 npm config set registry https://registry.npm.taobao.org/ (换成npm原本的镜像地址 npm config set registry https://registry.npmjs.org/) npm get registry 得到npm现在的镜像地址 2.安装node sudo apt install nodejs-lega

Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等.    假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-app   安装element 步骤: 1. 进入到项目中. 2. 在空白的区域,先按住shift键不要松手,然后在点击鼠标右键,选择:在此处打开Powershell窗口(S),如果不按住shift键,是不会有这个选项的. 3. 在打开的窗口中运行如下命令: 指令: npm i element-ui -

新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚垫菜盘之良器,欢迎大家无情购买使用,欢迎大家共同学习交流,欢迎大家提出改进意见. 内容简介: 本书从项目实践出发,手把手.心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术. 全书分为三

GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表.财务管理.权限管理.设置等功能 项目热度 标星(star):3398 (很不错的实用项目,大神作品,建议关注) 标星趋势 关注(watch):171 拷贝(fork):2003 贡献人数:1 仓库大小:1 MB 最后更新:2019-08-29 代码提交活跃度: 综合推荐指数: [3]颗星 开发语言

一.环境准备 node安装 node版本:v10.15.3 node下载地址:https://nodejs.org/zh-cn/ vue-cli安装 全局安装vue-cli npm install --global vue-cli 二.创建 vue + element 项目 创建 vue 项目并初始化 vue init webpack my-project 回车默认操作 安装项目 npm install 引入element 1.安装element: npm i element-ui -S 2.

需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/79208145(vue2.0 + element UI 中 el-table 数据导出Excel) 准备工作: 1.安装依赖:npm install --save xlsx file-saver 2.在放置需要导出功能的组件中引入 import FileSaver from 'file-saver' impo

pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言 想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面,除了感叹其神奇之处有没有想过其实现方式呢?本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤,并开源前后端代码.有需要的小伙伴可以按照该教程从零实现自己的H5编辑器.(实现起来并不复杂,该教程只是提供思路,并非最佳实践) 一个h5可视化编辑器种子, 高仿凡科建站模板.

之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套件,作为两种不同界面框架的展现方式.采用Vue + Element 的前端开发和之前的开发模式需要有较大的转变,以及需要接触更多的相关知识,本系列随笔基于循序渐进的学习研究方式,对使用Vue + Element 这种前端开发的各个方面进行一个完整的介绍,并结合我对BS前端已有的框架功能,进行两者的融

在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用,使得我们对如何利用Element组件有一个大概的认识. 1.列表界面和其他模块展示处理 在前面随笔<循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理>介绍了基于列表展示了相关数据,并在列表界面整合了增删改查

在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理,本篇随笔补充这一个主题,介绍树列表组件和下拉列表树组件在项目中的使用,以及一个SplitPanel的组件. 1.常规树列表控件的使用 众所周知,一般界面很多情况涉及到树列表的处理,如类型展示,如果是一层的,可以用下拉列表代替,如果是多个层级的,采用树控件展示会更加

我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言切换的处理,使系统具有更广泛的受众用户.VUE+Element 前端应用实现国际化的处理还是非常方便的,一般在Main.js函数里面引入语言文件,然后在界面上进行一定的处理,把对应的键值转换为对应语言的语义即可.本篇随笔介绍在VUE+Element 前端应用中如何实现在界面快速的支持多语言国际化的处

在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在这个基础上为它的数据模型提供符合要求的图表数据即可,VUE+Element 前端应用也不例外,我们这里使用了基于vue-echarts组件模块来处理各种图表vue-echarts是对echarts图表组件的封装. 1.图表组件的安装使用 首先使用npm 安装vue-echarts组件. git地址:

在VUE+Element 前端应用中,图标是必不可少点缀界面的元素,因此整合一些常用的图标是非常必要的,还好Element界面组件里面提供了很多常见的图标,不过数量不是很多,应该是300个左右吧,因此考虑扩展更多图标,我引入了vue-awesome组件,它利用了Font Awesome的内置图标,实现了更多图标的整合,可以在项目中使用更多的图标元素了,另外在本随笔的图标管理中,提供了对图标名称进行搜索,并根据图标颜色样式生成对应图标的代码,非常方便使用. Vue-Awesome 是基于 Vue.

在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结合路由集合,实现可访问路由的过滤,也就实现了对应角色菜单的展示和可访问路由的控制,详细可以参考随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>,本篇随笔主要介绍菜单管理模块的界面和相关的实现逻辑. 1.菜单资源及管理界面介绍 前面介绍过,权限管理一般都会涉

在很多应用中,往往都涉及到记录用户所在省份.城市.区县或者街道等信息,一般我们可以通过联动的Select或者类似的界面组件进行展示,或者使用Element中的el-cascader界面组件进行展示,而全国的省份.城市.区县或者街道等信息我们可以通过官方的数据进行获取,可以直接存放在JS里面,也可以存储在自己的数据库里面,最后统一进行联动展示即可.本篇随笔介绍几种组件对省市区县联动处理的效果及做法,可以直接应用在我们项目中,也可以做为一个组件开发的参考学习. 1.基于element-china-a

在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方开发好的组件,目的就是实现所需功能外,尽量简化界面使用代码.本篇随笔介绍在我的项目中经常用到的各种界面组件和它的界面效果,以便在实际开发中进行相应的参考,提高开发效率. 本篇继续上一篇随笔<循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)>,对界面控件进行进一步

前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 的Asp.net core 应用,因此和常规的Asp.net core 应用部署一样:而Vue+Element前端应用则是基于nodejs的应用,部署方式又有所不同,这里介绍基于Nginx的部署. 1.部署基于.netcore5.0的ABP框架后台Api服务端 1)安装.net core 环境 在

在一个和微信相关的业务管理系统,我们有时候需要和用户的微信账号信息进行绑定,如对公众号.企业微信等账号绑定特定的系统用户,可以进行扫码登录.微信信息发送等操作,用户的绑定主要就是记录公众号用户的openid或者企业微信的userid,那样可以通过微信API接口,发送系统消息或业务消息. 1.系统用户界面的绑定处理 1)公众号和系统用户绑定 我们绑定用户,可以在系统用户管理界面中绑定相关的信息,也可以在查看当前用户界面中提供入口绑定. 在用户管理界面中的列表界面中绑定,界面如下所示. 上面的绑定操