Vue UI API简单笔记
VUE UI
一 移动端常用UI组件库
- Vant http://vant-contrib.gitee.io/vant/#/zh-CN/
- Cube UI https://didi.github.io/cube-ui/
- Mint UI http://mint-ui.github.io/#!/zh-cn (vue 2.0)
- NUT UI https://nutui.jd.com/#/
二 PC端常用UI组件库
- Element UI https://element.eleme.cn/#/zh-CN
- IView UI http://v1.iviewui.com/
三 ElementUI组件按需引入
- 首先安装element-ui:
npm install element-ui
- 然后安装 babel-plugin-component:
npm install babel-plugin-component -D
- 修改babel.config.js:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }],
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
- 在main.js按需引入组件
//引入Vue
import Vue from "vue";
//引入App
import App from './App';
//完整引入
// 引入element-ui组件库
// import ElementUI from 'element-ui';
/// 引入element全部样式
// import 'element-ui/lib/theme-chalk/index.css';
// 使用element ui插件库
// Vue.use(ElementUI);
//按需引入
import { Button, Input, Row, DatePicker } from 'element-ui';
Vue.use(Button);
Vue.use(Input);
Vue.use(Row);
Vue.use(DatePicker);
//关闭Vue的生产提示
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
});
- 然后在App.vue使用
<template>
<div>
<button>原生的button</button>
<input type="text">
<el-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>
</el-row>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" 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>
</el-row>
</div>
</template>
<script>
export default {
name: "App",
}
</script>
<style lang="css" scoped>
</style>
Vue UI API简单笔记的更多相关文章
- 微信小程序初探【类微信UI聊天简单实现】
微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下 ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- angular4.0和angularJS、react.js、vue.js的简单比较
angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...
- 为公司架构一套高质量的 Vue UI 组件库
有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂 ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- axios在Vue中的简单应用(一)
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
- 【转】优秀的Vue UI组件库
原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...
随机推荐
- docker 修改容器env配置
docker 修改容器env配置 场景:修改zabbix数据库密码 zabbix容器构成: 数据库:zabbix-mysql server端:zabbix-server-mysql web端:zabb ...
- pytest文档6-allure-pytest
allure-pytest 环境准备 windows环境相关: python 3.6版本pytest 4.5.0版本allure-pytest 2.8.6 最新版 使用pip安装pytest和allu ...
- gin框架中的会话控制
Cookie介绍 Http协议是无状态的,服务器不能记录浏览器的访问状态,也就是说服务器不能判断请求的客户端是否已经登录 Cookie就是解决http协议无状态的方案之一 Cookie实际上就是服务器 ...
- golang中通过递归或通道实现斐波那契数列
1. 循环实现 package main import "fmt" func fibonacciFor(nums int) (s1 []int) { // 循环实现斐波那切数列 n ...
- Servlet-请求转发
Servlet-请求转发 请求转发:服务器收到请求后,从一个资源跳转到另一个资源的操作叫请求转发 请求转发特点: 1,浏览器地址栏没有变化 2,他们是一次请求 3,他们共享Request域中的数据 4 ...
- AOP-底层原理(JDK动态代理实现)
AOP(JDK动态代理) 1,使用JDK动态代理,使用Proxy类里面的方法创建代理对象 (1)调用 newProxyInstance 方法 方法有三个参数 第一参数,类加载器 第二参数,增强方法所在 ...
- 运维利器-ClusterShell集群管理
在运维实战中,如果有若干台数据库服务器,想对这些服务器进行同等动作,比如查看它们当前的即时负载情况,查看它们的主机名,分发文件等等,这个时候该怎么办?一个个登陆服务器去操作,太傻帽了!写个shell去 ...
- Docker 与 K8S学习笔记(二十)—— 使用Downward API向容器注入Pod信息
Kubernetes在创建Pod时,会为Pod和容器设置一些额外的信息,比如Pod名称.Pod IP.Node IP.Label.Annotation.资源限制等,我们经常会在应用程序中使用到这些数据 ...
- 学习JAVAWEB 第三十六天
今天改了一天的bug 使用eclipse出现的问题:首先lib文件夹的名字是不可以更改的它放在WEB-INF文件夹下,放所有的jar包,使用时一定不要忘了将jar包添加至构建路径tomcat的部署问题 ...
- Webpack之 webpack-dev-server 中的 contentBase配置及作用
contentBase:主要是指定静态资源的根目录的.