(给前端互助会加星标,提升前端技能)

 

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

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

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

vue3技术架构 vue的架构模式_前端

具有以下特点:

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 简洁。

vue3技术架构 vue的架构模式_前端互助会_02

 

Vue热加载

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

vue的双向数据绑定的原理

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

vue3技术架构 vue的架构模式_前端_03

目录结构

 



├── 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文件的基本模板

 

vue3技术架构 vue的架构模式_vue3技术架构_04