1——前言

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。

随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。现在的前端已经发展成为一个庞大的体系，各种框架层出不穷，犹如诸子百家一般，pc端，移动端，各种各样的跨平台端，微信公众号，支付宝公众号络绎不绝的出现，然而在其中特别流行的前端框架就是vue+element-ui的开发模式；那么现在就让我们来认识一下vue+element吧。

2——新建vue项目

1.首先我们需要在node官网下载安装node.js，并且会自动安装npm包管理工具。

2.之后，我们需要安装vue-cli脚手架构建工具，安装命令 npm install -g vue-cli，等待安装完成。

3.在命令行中运行命令 vue init webpack my-project，my-project是你要新建的项目名，回车。

4.之后这个项目下安装依赖包，运行命令 npm install ,注意，一定是要在项目文件夹下运行。

5.安装好依赖之后，开始运行项目，输入命令npm run dev。

3——引入 element-ui

在项目文件根目录下运行 npm i element-ui -S

在 main.js 中写入以下内容：

接下来了解下vue的基础知识吧：

vue是模板驱动的语法格式，内部使用js封装，下面是模板语法的基础用法，message会以文本的形式渲染在dom节点上。

vue还有各种各样的指令，写在标签上来达到不同的效果：

1. v-text指令

作用：获取data数据，设置标签的内容。

2. v-html指令

作用：设置元素的innerHTML（可以向元素中写入新的标签）

3. v-on指令

作用：为袁术绑定事件，比如：v-on:click，可以简写为@click="方法名"

4.v-show指令

作用：v-show指令，根据真假值，切换元素的显示状态

5. v-if 指令

作用：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

６. v-bind指令

作用：为元素绑定属性，完整写法v-bind:属性名，可以简写:属性名

7. v-for指令

作用：根据数据生成列表结构

8. v-model指令

v-model指令用来在表单<input><textarea>和<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model的本质不过是语法糖。

具体用法还需要根据具体的项目和需求来探索，好了这就是vue和element的基础安装方法，互相配合可以完成各种各样高复杂度的业务逻辑页面。在日益强大和复杂的前端工作中，框架越来越占据着不可缺少的一部分，vue就是作为这样一个主流级别的框架诞生的，轻量辩解，未来vue3.0还会更加多的在各大项目中被使用，模板化组件化的前端也会更加受欢迎。