Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）
Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js是什么?（一）
前言
本教程主要讲解关于前端Vue.js框架相关技术知识，通过学习一步一步学会搭建属于自己的后台管理模板，并且记录了本人在学习过程中遇到的难题和技术要点，讲解基础知识同时分享个人所学到心得，供读者参考与学习，学习本教程要求有一定的JavaScript编程能力，并且掌握HTML和CSS基础知识，如果有着web开发经验，会更容易解读本教程。若有疑问可以在评论区留言进行讨论，本人初学与大家一同进步。（作者写文章辛苦，不接受任何无关技术点评，不喜勿喷！本人记录了学习中一点一滴，为以后项目实战中作参考资料。）
背景
公司研讨决定将老项目进行重新架构，要求前后端分离，后端Spring cloud+.net core微服务架构，前端采用MVVM模式，SAP单页面富应用。研发部门最终决定前端采用VUE框架，因为它学习成本最低，并且满足当前需求。之前研发团队大部分人并未接触过MVVM模式，加上项目庞大业务复杂，难度系数未知，有点赶鸭子上架的意思，不过庆幸的是，我之前有过一段Vue.js学习积累，勉强初级水平，趁着在项目启动之前，把我之前所学习心得简单的整理出一个相关技术文档，也算是自己重新温习了一遍，初衷是为那些未接触过Vue.js的，不了解Vue.js框架的，想知道与传统前端开发方式区别的，用哪些编译器等疑问的新手通过本教程有个初步的理解，也希望可以通过短期自学达到快速入门，着手项目研发当中。通过每个人的理解也可以作为提前考量一个团队并作出最终抉择。新手在阅读该技术文档同时推荐官方文档资料作为最终参考并配合阅读。初识VUE的我可能对有些知识层面了解不深刻或误解，望后来读者给与指正与评教（抱拳）。
Vue.js是什么？
官方文档中介绍，Vue.js是一套用于构建用户界面的渐进式框架，易用、灵活、高效，似乎任何规模的应用都适用。它采用的是MVVM模式，与知名前端框架Angular、Ember等一样，让Web开发变得简单，同时也颠覆了传统前端开发模式，Vue属于轻量级，易上手，学习成本更低。
MVVM模式
MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之也一样，View和ViewModel之间通过双向绑定。
与MVC区别，MVC是单向通信，VUE就是基于MVVM模式实现的一套框架，在VUE中Model层指的是js中的data数据，View层指的是页面视图，ViewModel是指vue实例化对象。
Vue.js第一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字">
<h1>你好，{{ name }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: ''
Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js是什么?（一）
前言
本教程主要讲解关于前端Vue.js框架相关技术知识，通过学习一步一步学会搭建属于自己的后台管理模板，并且记录了本人在学习过程中遇到的难题和技术要点，讲解基础知识同时分享个人所学到心得，供读者参考与学习，学习本教程要求有一定的JavaScript编程能力，并且掌握HTML和CSS基础知识，如果有着web开发经验，会更容易解读本教程。若有疑问可以在评论区留言进行讨论，本人初学与大家一同进步。（作者写文章辛苦，不接受任何无关技术点评，不喜勿喷！本人记录了学习中一点一滴，为以后项目实战中作参考资料。）
背景
公司研讨决定将老项目进行重新架构，要求前后端分离，后端Spring cloud+.net core微服务架构，前端采用MVVM模式，SAP单页面富应用。研发部门最终决定前端采用VUE框架，因为它学习成本最低，并且满足当前需求。之前研发团队大部分人并未接触过MVVM模式，加上项目庞大业务复杂，难度系数未知，有点赶鸭子上架的意思，不过庆幸的是，我之前有过一段Vue.js学习积累，勉强初级水平，趁着在项目启动之前，把我之前所学习心得简单的整理出一个相关技术文档，也算是自己重新温习了一遍，初衷是为那些未接触过Vue.js的，不了解Vue.js框架的，想知道与传统前端开发方式区别的，用哪些编译器等疑问的新手通过本教程有个初步的理解，也希望可以通过短期自学达到快速入门，着手项目研发当中。通过每个人的理解也可以作为提前考量一个团队并作出最终抉择。新手在阅读该技术文档同时推荐官方文档资料作为最终参考并配合阅读。初识VUE的我可能对有些知识层面了解不深刻或误解，望后来读者给与指正与评教（抱拳）。
Vue.js是什么？
官方文档中介绍，Vue.js是一套用于构建用户界面的渐进式框架，易用、灵活、高效，似乎任何规模的应用都适用。它采用的是MVVM模式，与知名前端框架Angular、Ember等一样，让Web开发变得简单，同时也颠覆了传统前端开发模式，Vue属于轻量级，易上手，学习成本更低。
MVVM模式
MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之也一样，View和ViewModel之间通过双向绑定。
与MVC区别，MVC是单向通信，VUE就是基于MVVM模式实现的一套框架，在VUE中Model层指的是js中的data数据，View层指的是页面视图，ViewModel是指vue实例化对象。
Vue.js第一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字">
<h1>你好，{{ name }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: ''