asp.net 安装element ui_vue结合element-ui开发项目 一学就会
element-ui安装与测试
Element UI一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.
安装element-ui,使用命令(官方给出的安装少了file-loader,导致引用css文件报错,所以一起安装了):
cnpm install element-ui --save 或 cnpm i element-ui -S[注意]电脑上的安全防护软件,可能会提示你继续安装会有安全问题,不用管,允许运行就好,不然无法安装。cnpm install element-theme -g (使用全局安装,后面使用少坑)cnpm install element-theme-chalk -Dcnpm install file-loader --save //无法法解析element-ui的字体文件element-icons.ttf文件,需要我们进行配置1)cnpm install file-loader --save-dev2)webpack.config.js test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/, loader: 'file-loader'
初始化element-ui的css文件,输入命令:
et -i
会在当前目录生成一个文件element-variables.sass,再次输入命令:
et -o src/theme-et/ --意思是在src/theme-et文件夹下初始化
在main.js文件引入element UI的CSS 和插件
import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'Vue.use(ElementUI)new Vue({ el: '#app', render: h => h(App)})
按需引入
借助 babel-plugin-component,只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{ "presets": [ ["es2015", { "modules": false }] ], "plugins": [["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]]]}
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
...import { Button, Select } from 'element-ui'...Vue.component(Button.name, Button)Vue.component(Select.name, Select)/* 或写为 * Vue.use(Button) * Vue.use(Select) */new Vue({ el: '#app', render: h => h(App)})
测试一下
打开 HelloWorld.vue文件将class="hello"这个div整个删除只剩下template:
然后加入:
默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮
Element-ui 基本使用
一般组件使用
radio组件(链接)的第一个代码:
备选项 备选项
可以看出element-ui的上手使用,只需要以下步骤:
1.找想要的样式组件 2.复制代码到对应的.vue文件 3.修改对应的数据
非组件样式使用
非组件样式,比如:字体图标、全局指令、全局事件等,
图标样式使用
一般情况下,使用i标签,并将class属性设置成对应的图标名即可;而对于别的组件希望引入图标时(有icon属性的组件,例如el-button),设置icon属性为对应的图标名即可
搜索
指令样式使用
例如Loading加载(链接),其提供的是一个指令v-loading,而非一个组件,那么使用也很简单,因为已经注册了全局组件,直接调用就行了,举例:
使用v-loading指令,true时loading
{{clickText}}
事件样式使用
例如Message消息提示(链接),其提供是也不是组件,而是发送一个事件,那么使用时只需要参考文档发送的数据属性选项即可
打开消息提示VNode
文档读法
element-ui文档提供了很多示例代码,一般情况下我们直接拷下示例代码稍微看着改改数据之类的就够用了。但是在某些场景下,我们可能又需要使用到一些特殊的功能和属性,而这些功能属性一般在官方提供的组件中都已经内置了,所以我们可以直接先从文档中寻找查看是否有属性或者方法等能够满足我们的需求,从而避免重复造轮子。下面就来说明下文档里提供的属性、方法等如何阅读以及使用。
attribute读法
顾名思义,就是官方提供的属性,使用很简单,直接设置属性和对应的值就行了,直接拿el-input组件(链接)来说,例如其提供的Input Attributes里面有maxlength(最大输入长度,number型)和clearable(是否可清空,boolean型),那么:对于非boolean型的属性,需要直接设置值的内容;对于boolean型的属性,一般默认是false,而直接添加该属性,默认就是设置为true,下面是使用了这两个属性的示例代码:
slot读法
slot的使用和普通的slot用法没什么区别,直接在该组件当中定义一个标签,并设置该标签的slot属性即可,还是拿el-input组件举例,其Input slots下提供了prepend(输入框头部内容,只对 type="text" 有效),下面是使用了该slot的代码示例:
aaa
event读法
event就是提供的监听事件,直接使用v-on(简写@)绑定该event即可,例如el-input组件的Input Events下提供了change方法,并且看到回调参数里包括value,那么该事件将会传递这个参数,下面使用该事件举例:
method读法
method就是该组件内置的方法,使用时可以通过ref属性调用,使用步骤如下:
组件设置ref属性(具体ref属性用法参考:https://www.cnblogs.com/wu50401/p/10213081.html) 通过this.$refs.ref属性名.方法()调用组件自身的method方法 例如el-input组件提供了focus()方法,举例如下:
注: 这里实际上就是父组件调用子组件方法的场景
option读法
option一般是一些attribute的类型为object类型时,该attribute对象里的键值参考,这里拿el-time-select组件(时间选择器,链接)举例,该组件里的picker-options属性是object类型,而文档也提供了Time Select Options的参数说明,下面是使用示例:
子组件读法
很多提供的组件里都含有子组件,比如el-select下就有子组件el-option,那么使用时只需要将其嵌套在父组件,而对应子组件的attributes、slot等的使用方式也是一样的,这里提供el-select结合子组件el-option的使用示例:
常见问题
样式修改不生效问题
element-ui本身提供了很多样式,但有时候想要稍微修改一下组件里面的样式,发现修改样式竟然不生效? 别急,下面两种办法可以搞定:
方法一:在设置样式属性时,前面加上>>>来修改样式,但是这个在使用scss的时候可能不会生效,那么此时就使用方法二 方法二:使用/deep/(记得用空格隔开)来修改样式,本质上和>>>是一样的,相当于别名,举例: /deep/ .el-xxx { ... } 方法三:如果上面的也都不行,就使用::v-deep(记得用空格隔开)试试,举例: ::v-deep .el-xxx { ... } 查了下原因,原来是因为由于提供的组件样式设置了scope关键字,导致其样式处于局部,我们无法随便更改,如果非要修改局部的样式,那么就使用上面提供的关键字来实现。 (这也不算是element-ui的问题,在vue的组件化开发中就是规定如此,只不过平常自己开发的组件样式都可以自己规定,所以一般不会发现这个问题...)
element-ui导航栏报错:vue中的NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
当多次访问同一路由时会报的错,虽然报错了,但本身不影响使用,只需要将该报错屏蔽即可,参考: https://www.jianshu.com/p/af280206d57c
element-ui中组件方法重写问题
有些官方提供的组件其内部实现的函数并非是我们希望,比如el-image组件的click事件定义如下:
clickHandler() { // prevent body scroll prevOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; this.showViewer = true; }, 该事件导致的结果就是点击图片以后会发现页面无法滚动,让人产生一种页面卡死的错觉,因此我们可以通过以下方式来解决该问题:
在使用组件的地方重写该方法,具体步骤就是通过ref绑定该组件,然后重写该组件的方法(其中this指向问题需要注意,我们可以通过call/apply/bind方式改变其指向),举例: ... ... mounted() { // 重写clickHandler方法,并使用call方式在调用时修改指向 this.$refs.test.clickHandler = () => { function test() { console.log(this.src); } test.call(this.$refs.test); };
// 使用bind方式修改方法指向 // this.$refs.test.clickHandler = function() { // console.log(this.src); // }.bind(this.$refs.test); }, 在引入Element前重写该方法,这种方式适合大量引用该组件时使用,避免代码的重复,举例: Element.Image.methods.clickHandler = function() { console.log(this.src); }; ... Vue.use(Element); 直接重写该组件(组件的定义在element-ui的package目录下),直接把对应的.vue文件拷下来改写,之后我们直接引入改写后的组件即可,这种方式适合对组件进行大改动的时候,一次改写,一劳永逸
asp.net 安装element ui_vue结合element-ui开发项目 一学就会相关推荐
- vue3.0 结合element ui 开发后台ui框架
vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run s ...
- 介绍一款贼美的Vue+Element开源后台管理UI
点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达 今日推荐:又一程序员进了ICU:压垮一个家庭,一张结算单就够 个人原创100W+访问量博客:点击前往,查看更多 前言 Eu ...
- 一个基于.Net Core+Vue+Element Ui开发的OA系统
今天给大家推荐一个开源OA系统. 项目简介 这是一个基于.Net Core构建的简单.跨平台OA系统.企业可以利用它进行信息化建设,框架提供了用户管理.权限管理.表引擎.流程引擎.BI智能报表,可以大 ...
- 在ASP.NET MVC 4中使用Kendo UI Grid
Kendo UI 是Telerik推出的一套based on jQuery 的 Framework,提供了很多控件(Menu .Grid .Combox等...), 底层以Html5 + jQuery ...
- Majority Element(169) Majority Element II(229)
寻找多数元素这一问题主要运用了:Majority Vote Alogrithm(最大投票算法) 1.Majority Element 1)description Given an array of s ...
- ASP.NET的三层架构(DAL,BLL,UI)
BLL 是业务逻辑层 Business Logic Layer DAL 是数据访问层 Data Access Layer ASP.NET的三层架构(DAL,BLL,UI ...
- 安装uve-cli,并使用vue ui可视化界面创建第一个vue项目
安装vue-cli,并使用vue ui可视化界面创建第一个vue项目 下载vue-cli ,因为国内下载镜像比较慢,使用阿里的镜像仓库 npm install -g cnpm --registry=h ...
- Ubuntu安装OSSEC和OSSEC Web UI
Ubuntu安装OSSEC和OSSEC Web UI 一.安装环境 二.配置安装依赖项 1. OSSEC依赖包 2. 安装Apache并更新防火墙 调整防火墙以允许Web通信 3. 安装PHP 三.下 ...
- ASP.NET 4 和 Visual Studio 2010 Web 开发概述
声明:本文是ASP.NET 白皮书 ASP.NET 4 and Visual Studio 2010 Web Development Overview 的阅读摘要,只是本人的学习记录,并非完整翻译,仅 ...
- ★★★【庖丁解牛:纵向切入Asp.net 3.5控件和组件开发技术系列—(1)读者序】★★★...
本书主要内容 大部分开发人员在学习Asp.net的过程中都有这样的体会,使用Asp.net开发很多年,但仍然感觉对Asp.net技术的了解比较少,对知识点的了解比较模糊:以及,在工作过程中经常接到克刻 ...
最新文章
- 4大工业物联网网络的实施战略
- C# GDI+ 文字 阴影,描边 的实现
- java ftp connect_java实现ftp的几种方式(第3方包)
- 部署harbor1.2.0开启ldap验证
- 第1次作业:谈谈我的看法与感想
- Python项目中 封装日志模块logging 及快速调用方法
- php在线编辑器_8款功能强大的Java编辑器,建议收藏!「渡一教育」
- centos7 如何安装部署k8s_架构运维篇(五):Centos7/Linux中安装部署RocketMQ
- 告别软驱,Win2K3光盘中集成Raid驱动程序
- Linux的学习方法
- 最近在职场的一些感悟
- mysql instance安装_mysql一机多实例安装记录
- VC++ 只运行一个程序实例
- 欧姆龙plc交互协议hostlink
- php位运算符与逻辑运算_php 或_php 逻辑运算符和
- 应用层协议——RADIUS
- ZigBee空气质量监测系统设计
- 营销养号、封号、解封方法_微信公众号
- 【服务器数据恢复】服务器Raid5阵列mdisk磁盘离线的数据恢复案例
- 微信小程序头像叠加循环渲染
热门文章
- 全球五百强IT名企智力题精选
- FreeBSD从源码升级系统--重新编译
- CLI里面的秘密……(二)强命名、元数据以及文件结构(上半部分)
- 【Android综合应用】概述
- getmenuiteminfo无法读取内存_简单科普系列—内存为什么需要组双通道原理及其作用...
- 限制mysql资源使用率_MySQL--限制用户使用资源
- pythonsqlite3模糊_让 Python 更加充分的使用 Sqlite3
- java 获取class的方法_[Java教程]Java反射定义、获取Class三种方法
- Visual Studio 2008操作技巧
- django获取客户ip