Vue.js简介及架构简介

（给前端互助会加星标，提升前端技能）

 

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件  。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

具有以下特点：

1、易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

2、灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

3、高效

20kB min+gzip 运行大小，超快虚拟 DOM ，最省心的优化

vue是基于MVVM分层架构思想的前端框架。

V层：负责页面的展示

由HTML负责结构，css负责表现

•  

<div id="app"></div>

VM层：MVVM中最重要的一层，负责联系V和M，将M的数据渲染到V

var app=new vue({

•  
•  
•  

    el:#app  //绑定页面元素    data：{} //即M})

M层：数据可由Ajax从后端获取。

Vue.js 可以说是MVVM 架构的最佳实践，是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁。

 

Vue热加载

因为vue的双向数据绑定特性以及技术的成形，实现了项目的热加载，改完页面代码能立即在浏览器方面显示效果，提高开发效率。

vue的双向数据绑定的原理

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

目录结构

 

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

├── 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                  # 全局公用方法│   ├── views                  # views 所有页面│   ├── App.vue                # 入口页面│   ├── main.js                # 入口文件 加载组件 初始化等│   └── permission.js          # 权限管理├── tests                      # 测试├── .env.xxx                   # 环境变量配置├── .eslintrc.js               # eslint 配置项├── .gitignore                 # git 配置项├── .babelrc                   # babel-loader 配置├── .travis.yml                # 自动化CI配置├── vue.config.js              # vue-cli 配置└── package.json               # package.json

此为常见的目录结构，在实际开发过程中，会因为项目的差异，目录有些小的改动。

项目启动

在终端

•  
•  
•  
•  
•  
•  
•  
•  

# 进入项目目录（假设项目名为：vue-element-admin）cd vue-element-admin# 安装依赖npm install# 本地开发 启动项目npm run dev# 启动完成我们就能在，提示的地址中，浏览或开发项目（例如地址为：http://127.0.0.1:9528）http://127.0.0.1:9528

vue文件的基本模板

 

前端互助会

QQ群：511734783