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')