前后端分离架构图以及vue的简介
架构图
MVVM架构模式
MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是⼀个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，⽽是通过ViewModel进⾏交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，⽽Model 数据的变化也会⽴即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，⽽View 和 Model 之间的同步⼯作完全是⾃动的，⽆需⼈为⼲涉，因此开发者只需关注业务逻辑，不需要⼿动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统⼀管理。
vue
你只需要了解关于 HTML、CSS 和 JavaScript 的中级知识，就能进⾏开发。
vue⽤于构建⽤户界⾯的渐进式框架，渐进式代表的含义是：主张最少。每个框架都不可避免会有⾃⼰的⼀些特点，从⽽会对使⽤者有⼀定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使⽤⽅式。
Vue可能有些⽅⾯是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有⼤系统的上⾯，把⼀两个组件改⽤它实现，当jQuery⽤；也可以整个⽤它全家桶开发，当Angular⽤；还可以⽤它的视图，搭配你⾃⼰设计的整个下层⽤。你可以在底层数据逻辑的地⽅⽤OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图⽽已，只做了⾃⼰该做的事，没有做不该做的事，仅此⽽已。
我们没必要⼀上来就搞懂Vue的每⼀个部件和功能，先从核⼼功能开始学习，逐渐扩展。同时，在使⽤中，我们也没有必要把全部件能都拿出来，需要什么⽤什么就是了，⽽且也可以把Vue很⽅便的与其它已有项⽬或框架相结合
Vue.js 可以说是MVVM 架构的最佳实践，是⼀个JavaScriptMVVM库，是⼀套构建⽤户界⾯的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，⽽
且也是⼀款相对⽐较轻量级的JS 库，API 简洁
因为vue的双向数据绑定特性以及技术的成形，实现了项⽬的热加载，改完页⾯代码能⽴即在浏览器⽅⾯显⽰效果，提⾼开发效率
Vue.js 是采⽤ Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把⼀个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue
将遍历它的属性，⽤ Object.defineProperty 将它们转为 getter/setter。⽤户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
Observer 数据，能够对数据对象的所有属性进⾏监听，如有变动可拿到最新值并通知订阅者，内部采⽤Object.defineProperty的getter和setter来实现。
Compile 指令解析器，它的作⽤对每个元素节点的指令进⾏扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
Watcher 订阅者，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执⾏指令绑定的相应回调函数。
Dep 消息订阅器，内部维护了⼀个数组，⽤来收集订阅者（Watcher），数据变动触发notify 函数，再调⽤订阅者的 update ⽅法。
在访问⼀个 API 并展⽰其数据，基于 promise 的 HTTP 客户端则是其中⾮常流⾏的⼀种，
⾸先，我们要通过 npm/Yarn 或⼀个 CDN 链接安装 axios，
我们有很多种⽅式可以从 API 请求信息，但是最好⾸先确认这些数据看起来长什么样，以便进⼀步确定如何展⽰它。为此，我们会调⽤⼀次这个 API 并输出结果，以便我
们能够看清楚它。如 CoinDesk 的 API ⽂档所述，请求会发送到 indesk/v1/bpi/currentprice.json。所以，我们⾸先创建⼀个 data ⾥的属性以最终放置信
息，然后将会在 mounted ⽣命周期钩⼦中获取数据并赋值过去：
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('indesk/v1/bpi/currentprice.json')
.then(response => (this.info = response))
}
})
<div id="app">
{{ info }}
</div>
我们得到的东西是这样的：
{ "USD": { "code": "USD", "symbol": "$", "rate": "5,255.3433", "description": "United States Dollar", "rate_float": 5255.3433 }, "GBP": { "code": "GBP", "symbol": "£；当然这个只是⼀个⾮常简单的⽰例，在项⽬开发过程中，我们会基于axios做⼀些封装，包括错误处理，请求拦截，请求优化等等
vue官⽅⽂档：
vue资源精选：
vue GitHub地址：
基于vue和element构建的后台前端解决⽅案：
vue项⽬说明vue项⽬⽹上有⾮常多的成名模板，我推荐⼀个，想深⼊学习建议多多浏览下⾯的地址
vue和element构建的后台前端解决⽅案：<
├── build                      # 构建相关
├── static                    # 静态资源
││── img                    # 图⽚
││── favicon.ico            # favicon图标
│└── index.html            # html模板
││── Tinymce                # 富⽂本
├── src                        # 源代码
│├── api                    # 所有请求
│├── assets                # 主题字体等静态资源
│├── components            # 全局公⽤组件
│├── directive              # 全局指令
│├── icons                  # 项⽬所有 svg icons
│├── lang                  # 国际化 language
│├── layout                # 全局 layout
│├── router                # 路由
│├── store                  # 全局 store管理
│├── styles                # 全局样式
│├── utils                  # 全局公⽤⽅法
jquery在项目里是干啥的│├── views                  # views 所有页⾯
│├── App.vue                # ⼊⼝页⾯
│├── main.js                # ⼊⼝⽂件加载组件初始化等
│└── permission.js          # 权限管理
├── tests                      # 测试
├── .                  # 环境变量配置
├── .eslintrc.js              # eslint 配置项
├── .gitignore                # git 配置项
├── .babelrc                  # babel-loader 配置
├── .l                # ⾃动化CI配置
├── fig.js              # vue-cli 配置
└── package.json              # package.json
此为常见的⽬录结构，在实际开发过程中，会因为项⽬的差异，⽬录有些⼩的改动。
在终端
# 进⼊项⽬⽬录（假设项⽬名为：vue-element-admin）
cd vue-element-admin
# 安装依赖
npm install
# 本地开发启动项⽬
npm run dev
# 启动完成我们就能在，提⽰的地址中，浏览或开发项⽬（例如地址为：127.0.0.1:9528）127.0.0.1:9528
还想了解更多关于vue的相关知识，推荐认真阅读 vue的官⽅⽂档：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。