vue使用桌面Element-UI和移动端MintUI的UI框架

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue使用桌面Element-UI和移动端MintUI的UI框架

Element - 网站快速成型工具

安装：npm install --save element-ui

Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机移动端有对应框架是 Mint UI 。

pc端和手机端的UI还是完全不一样的

基于vue.js的移动端UI框架mint-ui

vue使用桌面Element-UI和移动端MintUI的UI框架

element-ui
Element - 网站快速成型工具
http://element-cn.eleme.io/#/zh-CN

安装：npm install --save element-ui

src\main.js添加
// 引入Element ui
import ElementUI from \'element-ui\';
import \'../static/theme/index.css\';
Vue.use(ElementUI)

*.vue文件模版里使用
<el-input class="register-input transaction-password graphical"></el-input>

---------------
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机移动端有对应框架是 Mint UI 。
pc端和手机端的UI还是完全不一样的

基于vue.js的移动端UI框架mint-ui
https://mint-ui.github.io/#!/zh-cn
MintUI使用文档vue2
https://mint-ui.github.io/docs/#/zh-cn2

注意：这个是https开头的，http开头的经常会打不开。

// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
// 引入全部组件
import Vue from \'vue\';
import Mint from \'mint-ui\';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from \'minu-ui\';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

以上是 vue使用桌面Element-UI和移动端MintUI的UI框架 的全部内容， 来源链接： utcz.com/z/376420.html

回到顶部