首页 > 其他分享 >Vue.js element-ui

Vue.js element-ui

时间:2023-04-13 23:56:58浏览次数:55  
标签:Vue App element UI 按钮 ui

基本使用视频

按需引入视频

7.1移动端常用UI组件库

  1. Vant https://youzan.github.io/vant
  2. Cube UI https://didi.github.io/cube-ui
  3. Mint UI http://mint-ui.github.io
    7.2PC端常用UI组件库.
  4. Element UI https://element.eleme.cn
  5. IView UI https://www.iviewui.com

src

App.vue

<template>
  <div>
		<button>原生的按钮</button>
		<input type="text">
		<atguigu-row>
			<el-button>默认按钮</el-button>
			<el-button type="primary">主要按钮</el-button>
			<el-button type="success">成功按钮</el-button>
			<el-button type="info">信息按钮</el-button>
			<el-button type="warning">警告按钮</el-button>
			<el-button type="danger">危险按钮</el-button>
		</atguigu-row>
		<atguigu-date-picker
      type="date"
      placeholder="选择日期">
    </atguigu-date-picker>
		<atguigu-row>
			<el-button icon="el-icon-search" circle></el-button>
			<el-button type="primary" icon="el-icon-s-check" circle></el-button>
			<el-button type="success" icon="el-icon-check" circle></el-button>
			<el-button type="info" icon="el-icon-message" circle></el-button>
			<el-button type="warning" icon="el-icon-star-off" circle></el-button>
			<el-button type="danger" icon="el-icon-delete" circle></el-button>
		</atguigu-row>
  </div>
</template>

<script>
	export default {
		name:'App',
	}
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//完整引入
//引入ElementUI组件库
// import ElementUI from 'element-ui';
//引入ElementUI全部样式
// import 'element-ui/lib/theme-chalk/index.css';

//按需引入
import { Button,Row,DatePicker } from 'element-ui';

//关闭Vue的生产提示
Vue.config.productionTip = false

//应用ElementUI
// Vue.use(ElementUI);
Vue.component('atguigu-button', Button);
Vue.component('atguigu-row', Row);
Vue.component('atguigu-date-picker', DatePicker);

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
})

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
		["@babel/preset-env", { "modules": false }],
  ],
	plugins:[
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

标签:Vue,App,element,UI,按钮,ui
From: https://www.cnblogs.com/chuixulvcao/p/17317007.html

相关文章

  • vuex存储和本地存储(localstorage、sessionstorage)的区别
    1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地2.应用场景:vuex用于组件之间的传值,localstorage则主要用于不同页面之间的传值。3.永久性:当刷新页面时vuex存储的值会丢失,localstorage不会。注:很多朋友觉得用localstorage可以代替vuex,对于不变的数据确实可......
  • HDU 2894 DeBruijin (欧拉回路)
    题目地址:HDU2894跟POJ1392基本一样的。。代码如下:#include<iostream>#include<string.h>#include<math.h>#include<queue>#include<algorithm>#include<stdlib.h>#include<map>#include<set>#include<stdio.h>......
  • POJ 2299 Ultra-QuickSort(线段树+离散化)
    题目地址:POJ2299这题曾经用归并排序做过,线段树加上离散化也可以做。一般线段树的话会超时。这题的数字最大到10^10次方,显然太大,但是可以利用下标,下标总共只有50w。可以从数字大的开始向树上加点,然后统计下标比它小即在它左边的数的个数。因为每加一个数的时候,比该数大的数已经加完......
  • Vue.js history模式与hash模式
    视频13.路由器的两种工作模式对于一个url来说,什么是hash值?——#及其后面的内容就是hash值。hash值不会包含在HTTP请求中,即:hash值不会带给服务器。hash模式:地址中永远带着#号,不美观。若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。兼容性较......
  • 【element-ui】解决textarea show-word-limit挡住文字问题
    问题:“67/500”默认背景为白色已超出文本输入框,遮住部分上border,当文字到达右侧时会遮住部分文字,且无法点击该部分解决方案:背景透明色,文字放到右下角 html:<el-inputtype="textarea"autosize maxlength="500"show-word-limit v-model="form.keyIndustry"placeh......
  • 【element-ui】element ui from表单手机号座机号验证
    //手机号验证rules:{ phone:[ {required:true,min:11,max:11,message:"请输入11位手机号码",trigger:"blur"},{pattern:/^1[3456789]\d{9}$/,message:"请输入正确的手机号码"}]}//座机号......
  • cookies、sessionStorage与localStorage在Vue中的使用
    目录简介localStorage的使用语法示例sessionStorage的操作语法示例cookie的操作vue-cookie语法示例vue-cookies语法示例js-cookie的使用简介cookies临时存储在客户端中,并且有过期事件,到过期时间会被自动清理。sessionStorage临时存储在客户端中,关闭浏览器后......
  • Element Plus Tree 树 回显
     <el-form-itemlabel="菜单权限">       <el-tree:data="navList"ref="treeRef"  node-key="menuId"highlight-current=“true”:props="defaultProps" @check="checked" show-checkboxcl......
  • vue3微信公众号商城项目实战系列(1)开发环境准备
    项目忙完,这次上新,写一个前端系列,采用vue3来开发一个微信公众号商城。前言:1.微信公众号商城本质也是一个网站,由一个个网页组成,只不过这些网页运行在手机端,能响应手指的点击、长按、拖拽等操作。2.既然是网页,当然可以用3件套(js+html+css)来写,但象vue这样的前端框架比3件套更高效......
  • 使用vue+bpmn-js实现activiti的流程设计器__Vue.js
    https://www.vue-js.com/topic/5f6c4af84590fe0031e591ef完整代码见github:https://github.com/griabcrh/vue-activiti-demo适配activitiimportactivitiModdleDescriptorfrom'../js/activiti.json';this.bpmnModeler=newBpmnModeler({container:ca......