饿了么前端框架-前端web框架

目录

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浏览器主要是饿了么的（免费）和国内的iview ui（新的组件库命名为 ViewUI），专业版收费，两者在对比如下：

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

1.3小程序mpvue

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

1.4 移动端

主要是饿了么、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了。

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

下篇我将说主要是后台的例子，使用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 文件即可开始使用。

我们建议使用 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')