hualinux 进阶 vue 5.0：vue UI组件介绍及Element UI

目录

​​ 一、vue流行的UI介绍​​

​​1.1 un-app所有前端框架​​

​​1.2 pc浏览器​​

​​1.3 小程序mpvue​​

​​1.4 移动端​​

​​1.5 桌面端（客户端）Electron ​​

​​二、关于饿了么pc框架element UI​​

​​2.1 element介绍​​

​​2.2 element安装​​

​​2.2.1 安装​​

​​2.2.2 引入element插件​​

vue作为前端软件，前端的UI（界面）我们也挻关心的。也有很多流行的第三方vue界面。有PC、移动端、小程序、桌面端等

 一、vue流行的UI介绍

vue作为前端软件，前端的UI（界面）我们也挻关心的。也有很多流行的第三方vue界面。有PC、移动端、小程序、桌面端等，在这里我做一个简单的介绍

1.1 un-app所有前端框架

​​uni-app​​官网介绍几乎全能，国内也有不少人在用。

​​uni-app​​​ 是一个使用 ​​Vue.js​​ 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

1.2 pc浏览器

pc浏览器主要是饿了么的​​element​​​（免费）和国内的​​iview ​​​ui（新的组件库命名为 ViewUI），专业版收费，两者在​​ www.npmtrends.com对比​​如下：

饿了么远超ivew，所以PC浏览器，推荐饿了么，主要还是人家免费，还真正跑在饿了么网站中。

1.3 小程序mpvue

​​mpvue​​​ （​​github 地址请参见​​​）是一个使用 ​​Vue.js​​​ 开发小程序的前端框架。框架基于 ​​Vue.js​​​ 核心，​​mpvue​​​ 修改了 ​​Vue.js​​​ 的 ​​runtime​​​ 和 ​​compiler​​​ 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 ​​Vue.js​​ 开发体验。

1.4 移动端

主要是饿了么​​Mint UI​​、muse-ui，推荐饿了么mint ui

饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

1.5 桌面端（客户端）Electron 

一般是​​Electron​​，在github为91.3k，挻高的

二、关于饿了么pc框架element UI

2.1 element介绍

接下来我们学习饿了么element UI，其它移动端框架我就不说了，学会了PC框架element UI，也完全可以自学它的移动端Mint ui了。

如果学习​​element UI​​我这里不详说了，应该能自学了，官网也有详细的说明，也支持中文的。

下篇我将说主要是后台的例子，使用elementUI+vue+vue router对数据进行增删改查。

2.2 element安装

2.2.1 安装

element 安装很简单的，根据它的​​官方安装说明​​

npm 安装

推荐使用 npm 的方式安装，它能更好地和 ​​webpack​​ 打包工具配合使用。

npm i element-ui -S

​​¶​​CDN

目前可以通过 ​​unpkg.com/element-ui​​ 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>

我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 ​​unpkg.com​​。

我这里使用npm安装方式，只要有webstorm终端terminal执行上面给出的命令即可。

2.2.2 引入element插件

安装完之后还不行，还要引入vue插件，我这里使用引入全部，在src/main.js，添加如下代码

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

总得变成了

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')