(尚038) vue_UI组件库
2023-09-11 14:14:08 时间
1. 常用
1) Mint UI:
a. 主页: http://mint-ui.github.io/#!/zh-cn(注意:地址失效,可以百度mint-ui文档)
b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库
2) Elment
a. 主页: http://element-cn.eleme.io/#/zh-CN
b. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库
2.使用Mint UI
1)下载
npm install --save mint-ui
3.实现按需打包
1).下载
npm install --save-dev babel-plugin-component
2. 修改 babel 配置
"plugins": ["transform-vue-jsx", "transform-runtime",["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
ui组件库中定义了好多组件,但用到了少数个,不需要将所有的组件打包
3. mint-ui 组件分类
1) 标签组件
2) 非标签组件
理解:说白了有可能是对象,也有可能是函数
4.代码
1).index.html(最外层)<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
<title>vue_demo_vue_ui</title>
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2).main.js文件
// 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 {Button} from 'mint-ui'
//注册成标签(全局注册:所有其他组件都能用)
Vue.component(Button.name,Button)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
3).App.vue组件
<template>
<mt-button type="primary" @click.native="handleClick" style="width: 100%">Test</mt-button>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
methods:{
handleClick(){
Toast('提示信息')
}
}
}
</script>
<style>
</style>
5.最终页面显示
相关文章
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- vue - src for components || router(index.js)
- 24 什么是Vue组件,如何定义全局组件,组件的复用性,组件的弊端
- 【Vue】通过“全局路由守卫”实现路由组件”切换“时的”权限控制“
- 【Vue】单文件的组件(.vue)代码实例
- Vue - 完美解决 Element UI 侧边导航菜单 <el-menu> 出现滚动条,去掉 Element 侧边导航组件的横纵滚动条(但滚动功能依然保留,仅仅是去掉 “滚动条“)100% 解决方案
- Java项目(前端vue后台java微服务)在线考试系统(java+vue+springboot+mysql+maven)
- Vue 3的高颜值UI组件库
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Vue的使用你学会了吗?
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- vue 组件 模板中根数据绑定需要指明路径并通信父
- Vue 3结合element plus(问题总结二)之 table组件实现多选和清除选中(在vue3中获取ref 的Dom)
- vue.js相关UI组件收集
- Vue知识点总结(10)——全局组件的创建和使用(超级详细)
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- 使用layer.open打开一个框架页面执行成功回调时,怎么向父页面的Vue传值且能动态绑定数据?
- vue组件值传递之父组件向子组件传递(props)
- vue组件调用(全局调用和局部调用)
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- Vue上传图片预览组件
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- vue 组件
- vue的响应式都用它来实现,js中强大的Object.defineProperty()方法
- Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)