Element
文章平均质量分 54
竹立荷塘
这个作者很懒,什么都没留下…
展开
-
vue scoped与深度作用选择器 /deep/ 覆盖element-ui样式
element-ui是vue项目中常用的pc端ui组件库,但是其样式上可能与我们的项目需求有较大差异,通常使用自己的样式覆盖ui组件库样式以达到目的方法1: 创建自定义样式文件 在main.js或app.vue中引入 ps:只适合做整体样式的设置,无法细分到组件的具体使用场景,如果细分至组件使用场景,代码过于集中,不利于维护方法2: 在代码内部进行样式覆盖 ps:这里有一个比较“恶心”的地方,如果我们的style标签使用了scoped属性,那...转载 2021-01-07 14:11:11 · 712 阅读 · 0 评论 -
16. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-自定义Element主题
Element主题颜色和我项目设计默认的颜色不一致,我自定义了一下主题。一. 创建文件,修改主色调Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量。我这里是在src目录下的themes/element目录下创建了一个样式文件element-variables.scss,并写入以下内容:/* 改变主题色变量 */$--color-primary: $color-main;/* 改变 icon 字原创 2020-05-14 10:07:37 · 808 阅读 · 0 评论 -
15. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-axios请求封装以及接口统一管理
在src目录下创建config目录,并在此目录下创建两个文件http.js和interface.js,其中http.js用来对axios请求进行封装,interface.js用来对此项目中用到的接口进行统一封装。一、axios请求封装http.js1. axios 全局配置:import axios from 'axios'import store from '../store'import router from '../router'import common from '../asset原创 2020-05-14 10:06:35 · 1062 阅读 · 1 评论 -
14. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-路由管理
在main.js同级目录下创建router.js文件用来管理路由:我这里的路由采用的是history模式:import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const originalPush = Router.prototype.pushRouter.prototype.push = function push (location) { return originalPush.call(this, lo原创 2020-05-14 10:05:35 · 1135 阅读 · 0 评论 -
13. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-状态管理设置Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。我这里主要使用它来存储一些全局变量以及用户的状态。一、创建mutation-types.js文件,对mutations统一管理这样做的目的主要是:1)为了减少编码,比如多个地方存在“save_user_info”时,用常量来引用,可维护性更高,减少手抖多一个字母少一个字母的错误。2)大项目多人开发时,对mutations统一管理,找函数很直观。原创 2020-05-14 10:04:15 · 1121 阅读 · 0 评论 -
12. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端入口文件main.js设置
一、main.js解释说明main.js是vue项目的入口文件,项目中所有的页面都会加载main.js,main.js主要有三个作用:1.实例化Vue;2.放置项目中经常会用到的插件和CSS样式;3.存储全局变量。二、此项目中的main.js的核心代码import 'babel-polyfill'import Vue from 'vue'import './assets/styles/reset.css'import ElementUI from 'element-ui'import '原创 2020-05-14 10:02:20 · 1075 阅读 · 0 评论 -
11. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-vue.config.js 配置
Vue-cli3 搭建的项目,之所以界面想对之前较为简洁,因为webpack的配置均被隐藏了,当你需要覆盖原有的配置时,则需要在项目的根目录下,新建vue.config.js文件,来设置新的配置。一、创建vue.config.jsvue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.jso原创 2020-05-14 09:51:45 · 1097 阅读 · 0 评论 -
10. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端创建vue单页面项目
一、创建vue单页面项目我这里创建vue项目使用的是Vue-CLI脚手架,Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。1. 安装Vue-CLInpm install -g @vue/cli# ORyarn global add @vue/cli安装之后,你就可以在命令行中访问vue命令。你可以通过简单运行vue,看看是否展示出了一份所有可用命令的帮...原创 2020-04-26 13:43:13 · 2045 阅读 · 0 评论 -
element中el-image如何显示本地图片
把正常img标签中的src="@/assets/logo.png"换成:src="require('@/assets/logo.png')"就可以了。原创 2019-12-07 16:12:59 · 37399 阅读 · 4 评论 -
element tab选中时会有边框
解决办法:在commos.scss中加入属性覆盖.theme{ .el-tabs__item:focus.is-active.is-focus:not(:active) { box-shadow: none; } }或者:这里的一定要加上!Important ,因为npm run build 打包代码的时候的,这段代码会被的element ui 框架代码...转载 2019-11-30 13:45:41 · 1974 阅读 · 0 评论 -
去除 element-ui Dropdown 下拉菜单右击时出现的蓝色边框
使用element-ui Dropdown 下拉菜单时,发现鼠标左击菜单时没什么问题,但是在右击时和点中刷新时会出现蓝色边框。查看代码 发现关于-webkit-focus-ring-color是一种色彩属性,蓝色,类似outline的蓝颜色,改成:focus {outline: 0;}...原创 2019-11-26 17:02:13 · 6858 阅读 · 1 评论 -
Element表单验证(2)
上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇。上篇讲到async-validator由3大部分组成Options Validate Rules基本验证流程如下先按照rule的规则,制定每个字段的规范,生成rules 根据rules生成验证器const validator = new Validator(rule...转载 2018-11-20 09:53:47 · 298 阅读 · 0 评论