Vue项目 UI框架介绍(第六天上)

简介: Vue项目 UI框架介绍(第六天上)

elementUI

1.什么是elementUI?

ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架

大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面

2.elementUI使用

https://element.eleme.cn/#/zh-CN/component/installation

3.elementUI优化

默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将elementUI中所有的组件打包到我们的项目中

这样就导致了我们的项目体积比较大, 用户访问比较慢

Vue.use(Button)
 Vue.use(Switch)

4.如何优化

为了解决这个问题, elementUI推出了按需导入, 按需打包. 也就是只会将我们用到的组件打包了我们的项目中

没有用到的组件不会被打包

https://element.eleme.cn/#/zh-CN/component/quickstart

Mint UI

1.什么是MintUI?

MintUI是饿了么前端团队推出的一款基于Vue的移动端U框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装,让我们能够专注于业务逻辑而不是UI界面

2.mintUI使用

http://mint-ui.github.io/#!/zh-cn

3.注意点: MintUI和ElementUI的第一个不同, 就是在MintUI中需要通过Vue.component来告诉Vue我们需要使用

Vue.component(Button.name, Button)
Vue.component(Switch.name, Switch)

Vant

1.什么是Vant?

在使用MintUI的过程中发现有很多的坑,所以个人不推荐在移动端中选择MintUIXant是有赞前端开发团队又推出的一款基于Vue的移动端UI框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装,进行了美化,让我们能够专注于业务逻辑而不是UI界面

  1. Vant使用
    https://youzan. github.io/vant/#/zh-CN/intro非常适合做电商项目

Vue.use()

Vue.use只能use插件,不能use组件

那么如何将一个组件封装成一个插件呢?

1.Vue.use()做了什么事情?

Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用

2.什么时候需要定义插件?

当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件

例如: 网络加载指示器

3.如果自定义一个插件?

https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6


目录
相关文章
|
29天前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
79 3
|
1月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
155 2
|
18天前
|
Rust JavaScript 前端开发
ES6 awaitRust UI 框架
ES6 awaitRust UI 框架
|
18天前
|
前端开发 JavaScript
electron ui框架
Electron是一个使用JavaScript, HTML和CSS等前端技术构建跨平台桌面应用程序的框架。
47 0
|
25天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
11天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
15天前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
58 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
21天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
30 1
|
22天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
41 3
|
22天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
19 1
下一篇
无影云桌面