解读Element-UI 和 VUE 技术。

ElementUI简介

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件。

快速上手elementUI

   在此，你应该熟悉vue-cli(脚手架)的创建以及清晰它的目录结构

1.引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我先介绍如何引入完整的 Element。

完整引入：在main.js中写入这些内容

 

按需引入：借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component

 

 然后，将babel.config.js里的内容改成这样

 

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

 

 注意:elementUI的引入大概就这样子的，如果要按需引用的组件很多的话，可以不用全部写在main.js中，可以将其抽离出来创建一个新的文件夹

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。

 VUE 技术：

   Vue的定义

vue是一套用于构建用户界面的渐进式框架，使用Vue,可以完全在浏览器渲染页面，服务端只提供数据，可以非常方便的构建单页面应用。（数据驱动视图）

网站：https://cn.vuejs.org/

 前端框架

前端框架主要有：React、Angular、Vue

Vue不存在依赖，轻便，适用范围广（大中型项目，PC，移动端，混合开发），语法简单，双向数据绑定。

Vue与React

都采用虚拟DOM，React的生态系统更加庞大，由React来进行混合开发，Vue更加轻量级；React有独特的JSX语法，Vue基于传统的Web（HTML、CSS、JS）。

Vue与Angular

语法非常的相似，Vue没有Angular深入开发，只保证了基本功能，Vue的运行较快。

项目开发要求：性能、扩展性、维护性、兼容性

 入门

安装：1.script标签引入

开发环境版本：https://vuejs.org/js/vue.js

生成环境版本： https://vuejs.org/js/vue.min.js

2. cdn

https://cdn.bootcss.com/vue/2.5.16/vue.min.js  (压缩版)

https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js  （完整版）

3.npm

npm install vue

4.构建工具（CLI）

npm install -g @vue/cli

vue create my-project