Element UI
介绍
-
官网(基于 Vue 2.x ):https://element.eleme.cn/#/zh-CN
-
ElementUI 是一个基于 Vue.js 的桌面端组件库，由饿了么前端团队开发并维护。它提供了一套丰富的 UI 组件和布局，以及一些常用的功能组件，让开发者可以快速搭建美观、可用的 Web 应用。
-
ElementUI 的组件库包括按钮、表单、输入框、下拉菜单、表格、弹窗等等，它们都具有一致的样式和交互效果，可以方便地进行组合和定制。ElementUI 还提供了一些常用的功能组件，如日期选择器、分页器、消息提示等，这些组件可以大大简化开发过程，提高效率。
-
ElementUI 的设计风格简洁大方，符合现代化的 UI 设计规范。它使用了灵活的栅格系统来布局页面，可以适应不同尺寸的屏幕。同时，ElementUI 支持多语言和主题定制，开发者可以根据自己的需求进行配置。
-
ElementUI 提供了详细的文档和示例代码，可以帮助开发者快速上手并解决问题。此外，ElementUI 还有一个活跃的社区，开发者可以在社区中分享经验、提问问题，并获取帮助。
-
ElementUI 是一个功能强大、易于使用的前端组件库，适用于快速构建漂亮且可用的 Web 应用。无论是个人项目还是企业级应用，ElementUI 都能提供良好的支持，让开发变得更加高效和愉快。
特点
ElementUI 的特点有以下几个：
-
简洁美观：ElementUI 的设计风格简洁大方，符合现代化的 UI 设计规范。它提供了一致的样式和交互效果，使得应用看起来非常美观，并且可以适应不同尺寸的屏幕。
-
丰富的组件：ElementUI 提供了一套丰富的 UI 组件，包括按钮、表单、输入框、下拉菜单、表格、弹窗等等。这些组件具有灵活的用法和丰富的功能，可以满足各种需求。
-
响应式布局：ElementUI 使用了灵活的栅格系统来布局页面，可以适应不同尺寸的屏幕。它支持响应式布局，使得应用在不同设备上都能有良好的展示效果。
-
高度可定制：ElementUI 支持多语言和主题定制，开发者可以根据自己的需求进行配置。它提供了丰富的主题和样式变量，可以方便地定制组件的外观和样式。
-
完善的文档和示例：ElementUI 提供了详细的文档和示例代码，开发者可以通过阅读文档和参考示例来快速上手和解决问题。它还有一个活跃的社区，开发者可以在社区中分享经验、提问问题，并获取帮助。
Vue2使用Element
安装
npm下载ElementUI：npm install element-ui@2.15.3或者npm i element-ui -S
引入ElementUI组件库
在main.js中内容：
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
//样式文件需要单独引入
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
使用ElementUI
其实在官网有很多很多案例，这里我准备了一个用户注册的form表单案例，和一个表格展示案例
用户注册
<template>
<div>
<el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px" class="demo-user">
<el-form-item label="账号" prop="userCode">
<el-input type="text" v-model="user.userCode" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="userName">
<el-input type="text" v-model="user.userName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="userPassword">
<el-input type="userPassword" v-model="user.userPassword" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="user.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" prop="">
<el-radio-group v-model="user.gender">
<el-radio-button label="0" >男</el-radio-button>
<el-radio-button label="1" >女</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="出生年月" prop="birthday">
<el-date-picker
v-model="user.birthday"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input type="text" v-model="user.address" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input type="text" v-model="user.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="角色" prop="userRole">
<el-select v-model="user.userRole" placeholder="请选择">
<el-option
v-for="item in roleList"
:key="item.value"
:label="item.name"
:value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="兴趣爱好" prop="hobbys">
<el-checkbox-group
v-model="user.hobbys"
max="3">
<el-checkbox v-for="hobby in hobbys" :label="hobby" :key="hobby">{{hobby}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('user')">提交</el-button>
<el-button @click="resetForm('user')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:'Register',
data() {
//自定义校验规则
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.user.userPassword) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
hobbys:["唱","跳","RAP","打篮球"],
roleList:[
{name:'系统管理员',value:1},
{name:'管理员',value:2},
{name:'会员',value:3},
{name:'游客',value:4}
],
//表单数据绑定
user:{
userCode:'',
userName:'',
userPassword:'',
gender:0,
birthday:'',
phone:'',
address:'',
userRole:4,
hobbys:[],
checkPass:''
},
//定义表单基本的验证
rules: {
userCode: [
{ required:true,trigger: 'blur', message: '请输入账号', }
],
userName: [
{ required:true,trigger: 'blur', message: '请输入用户名', }
],
userPassword: [
{ required:true,trigger: 'blur', message: '请输入密码', }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
},
//日期插件设置
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
列表展示
<template>
<div>
<el-table
:data="userList"
stripe
style="width: 100%">
<el-table-column
prop="id"
label="ID"
style="width: 15%">
</el-table-column>
<el-table-column
prop="userCode"
label="账号"
style="width: 15%">
</el-table-column>
<el-table-column
prop="userName"
label="姓名"
style="width: 15%">
</el-table-column>
<el-table-column
prop="gender"
label="性别"
style="width: 6%">
</el-table-column>
<el-table-column
prop="birthday"
label="出生年月"
style="width: 15%">
</el-table-column>
<el-table-column
prop="phone"
label="联系方式"
style="width: 15%">
</el-table-column>
<el-table-column
prop="address"
label="地址"
style="width: 15%">
</el-table-column>
<el-table-column
prop="userRole"
label="角色">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:'Register',
data() {
return{
userList:[
{id:1,userCode:'admin',userName:'系统管理员',gender:'男',birthday:'1993-11-12',phone:'13865427845',address:'北京市',userRole:'系统管理员'},
{id:2,userCode:'sunshangxiang',userName:'孙尚香',gender:'女',birthday:'1999-12-17',phone:'13965489527',address:'郑州市',userRole:'游客'},
{id:3,userCode:'guanyu',userName:'关羽',gender:'男',birthday:'2000-01-09',phone:'15765842469',address:'徐州市',userRole:'会员'},
{id:4,userCode:'sunquan',userName:'孙权',gender:'男',birthday:'1992-10-08',phone:'18965552451',address:'杭州市',userRole:'管理员'},
{id:5,userCode:'liubei',userName:'刘备',gender:'男',birthday:'1989-09-24',phone:'15068689595',address:'广州市',userRole:'管理员'},
{id:6,userCode:'caocao',userName:'曹操',gender:'男',birthday:'1992-10-08',phone:'15545211245',address:'兖州市',userRole:'管理员'},
{id:7,userCode:'huangyueying',userName:'黄月英',gender:'女',birthday:'2009-01-01',phone:'15966648531',address:'亳州市',userRole:'游客'},
]
}
},
methods: {
}
}
</script>
其他
详见官网…
mint-ui
介绍
- Mint UI是一个基于Vue.js的移动端组件库，由饿了么前端团队开发。
- 它提供了一系列丰富的UI组件，包括按钮、输入框、弹窗、轮播图、下拉刷新等常用组件，可以帮助开发者快速构建移动端的Web应用。
- Mint UI具有简单易用、效果好、样式漂亮等特点，受到了广大开发者的欢迎。
- Mint UI官网： http://mint-ui.github.io/#!/zh-cn
特点
Mint UI具有以下特点：
-
简单易用：Mint UI提供了丰富的移动端UI组件，使用简单，开发者可以快速上手，并快速构建移动端应用。
-
轻量化：Mint UI的组件库比较轻量，可以高效地加载和运行在移动设备上，提供了更好的用户体验。
-
样式漂亮：Mint UI的组件拥有精美的视觉效果，具有现代化、时尚的外观，能够满足用户对于UI设计的要求。
-
功能丰富：Mint UI提供了丰富的组件，包括按钮、输入框、弹窗、轮播图、下拉刷新等常见的移动端UI组件，满足开发者在移动应用开发中的各种需求。
-
支持Vue.js：Mint UI是基于Vue.js开发的组件库，与Vue.js完美融合，开发者可以使用Vue.js的特性和功能来更加灵活地定制和使用组件。
总之，Mint UI具有简单易用、轻量化、样式漂亮、功能丰富等特点，适用于开发移动端的Web应用。Mint UI具有以下特点：
安装组件
npm install mint-ui -S
引入组件
-
引入全部组件
// 引入全部组件 import Vue from 'vue'; import Mint from 'mint-ui'; Vue.use(Mint); -
按需引入
-
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
-
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D{ "presets": [ ["es2015", { "modules": false }] ], "plugins": [["component", [ { "libraryName": "mint-ui", "style": true } ]]] } -
如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：需要引入样式：
import 'mint-ui/lib/style.css';// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' // 1、引入Element-ui组件 // import { Button } from 'element-ui'; // Vue.use(Button) // 2、引入Mint-ui组件 import 'mint-ui/lib/style.css'; import {Button} from 'mint-ui'; Vue.component(Button.name, Button); Vue.config.productionTip = false //设置在控制台环境进行代码提示作用 // 1.全局路由守卫 router.beforeEach((to,from,next) => { /* to:表示要去的新页面 from:表示旧的页面 next:表示是否 */ // 0——表示未登录 // 1——表示已登录 var islogin = 1; if(to.meta.needAuth){ if(islogin == 0){ router.push({name:'login'}) } if(islogin == 1){ next() } }else{ next() } }) // 2.全局过滤器 Vue.filter('toFixed1',function(val,data,data1){ return data1 + val.toFixed(data) }) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
Mint-ui相关组件
官网文档： https://mint-ui.github.io/docs/#/zh-cn2
<template>
<div class="hello">
<mt-button type="danger" @click="myToast">danger</mt-button>
<hr>
<el-button type="primary">主要按钮</el-button>
<hr>
<router-link to="/mydetail">产品详情</router-link>
<router-link to="/mycar">购物车</router-link>
<router-link to="/myorder">下单页面</router-link>
<hr>
<button @click="mytab">点击</button>
<hr/>
<router-link to="/tab">选项卡</router-link>
<hr/>
<myslot>
<div slot="name1">
{{msg}}
</div>
<div slot="name2">
{{num}}
</div>
</myslot>
<hr/>
<input type="text" placeholder="请输入用户名" v-model="t1"/>
<input type="text" placeholder="请输入密码" v-model="t2"/>
<button :class="{active:isTrue}">登录</button>
<hr/>
<input type="text" name="" id="" v-model="num3"/>
<hr/>
<input type="text" placeholder="请输入用户名" v-model="user"/>
<input type="text" placeholder="请输入密码" v-model="password"/>
<button :class="{active:getActive}">登录</button>
<h1>{{getAvg}}</h1>
<h1>{{getSum}}</h1>
<h1>{{num | toFixed(5,"$")}}</h1>
<h1>{{num1 | toFixed1(5,"$")}}</h1>
<h1>{{msg}}</h1>
</div>
</template>
<script>
import { Toast } from 'mint-ui';
import myslot from './02slot';
export default {
name: 'HelloWorld',
data () {
return {
num:10,
num1:20,
num3:100,
msg: 'Welcome to Your Vue.js App',
user:'',
password:'',
isTrue:false,
t1:'',
t2:'',
}
},
filters:{
toFixed(val,data,data1){
return data1 + val.toFixed(data)
}
},
computed:{
getSum(){
return this.num + this.num1;
},
getAvg(){
return this.getSum/2;
},
getActive(){
if(this.user==''||this.password==''){
return false
}
return true
}
},
watch:{
num3(){
console.log("num3修改了")
},
t1(){
if(this.t1 == '' || this.t2 ==''){
this.isTrue = false
}else{
this.isTrue = true
}
},
t2(){
if(this.t1 == '' || this.t2 ==''){
this.isTrue = false
}else{
this.isTrue = true
}
}
},
components:{
myslot,
},
methods:{
mytab(){
//链式路由跳转
this.$router.push({
// 方式一
// name:'tab'
// 方式二
path:'/tab',
query:{
id:100
}
})
},
myToast(){
Toast({
message: '提示',
position: 'center',
duration: 5000
});
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active{
color: red;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
前端第三方组件库国内官网地址
Vant-ui 国内官网: https://vant-contrib.gitee.io/vant/#/zh-CN/
layui 官网: https://layuion.com/docs/element/color.html
jQuery 官网:https://www.jquery123.com/
Apache ECharts 官网：https://echarts.apache.org/zh/index.html
微信开发文档官网：https://developers.weixin.qq.com/miniprogram/dev/framework/
w3c国内官网：https://www.w3school.com.cn/
mdn国内官网：https://developer.mozilla.org/zh-CN/docs/Web/HTML
swiper官网 ：https://www.swiper.com.cn/usage/index.html
betterscroll官网：添加链接描述
![[集群聊天服务器]----(五)User类、UserModel类](https://img-blog.csdnimg.cn/direct/b82a6abb81044839abcac518a95d7c1a.png)
![子比主题ACG美化插件[全开源]](https://img-blog.csdnimg.cn/direct/62c497bc5f044c7293552bf99ebdd8ae.jpeg#pic_center)
