Nuxt
vue服务端渲染框架
Vue
- vue是构建用户界面的渐进式框架，自底向上增量开发，只关注视图层，简洁轻量快捷，实时的双向数据绑定【DOMListener和DataBinding】和组件化，MVVM模式【数据驱动，通过数据显示视图层而不是操作dom，model-view-view model,数据-视图-实例，model与view互相影响，低耦合，可重用，独立性开发】，虚拟dom【对DOM进行缓存，提升网页速度，缺：内存】，指令系统
- 工作原理
双向数据绑定原理：vue采用数据劫持结合发布者-订阅者模式的方式，通过Object。observer: defineProperty()来劫持各个属性的setter和getter，在数据变动时，触发setter,发布消息给订阅者watcher，触发compile中绑定的相应监听回调。 - 实现数据双向绑定需要3大模块：
observer：对数据对象的所有属性进行监听，若有变动通知订阅者;
watcher：(observer和compile之间通信的桥梁)，能够订阅并收到每个属性变动的通知，触发compile中绑定的回调，更新视图;
compile：对每个元素节点的指令进行扫描和解析，根据模板指令替换数据，以及绑定相应的更新函数。 - 核心思想： 数据驱动+ 组件系统
vue-cli 脚手架
- 构建的vue-cli工程中都用到了哪些技术？作用？
vue vue-router vuex axios webpack
*vue-cli常用npm命令？
1）npm i : 下载资源包
2）pm run dev 启动vue-cli开发坏境
3）npm run build 生成 生成环境部署资源
4）npm run build --report 浏览器自动弹出页面，查看vue-cli生产环境部署资源文件大小 - vue-cli工程中每个文件夹和文件的用处？
1）build文件夹： 用于存放 webpack 相关配置和脚本。开发中会到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。自己开发npm包时，还会对output、entry等进行配置。
2）config: 主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
3）dist : 默认npm run build命令打包生成的静态资源文件，用于生产部署。
4）node_modules: 存放npm i命令下载的开发坏境和生产环境的依赖包。
5）src: 存放项目源码 - config文件夹下index.js对于工程 开发环境以及生产坏境的配置
- build对象下对生产坏境的配置：
1）index: 配置打包后入口.html文件的名称以及文件夹名称
2）assetsRoot: 配置打包后生成的文件名称和路径
3）assetsPublicPath: 配置打包后.html 引用静态资源的路径，一般设置成'./'
4)productionGzip: 是否开发gzip压缩，以提升加载速度
- build对象下对生产坏境的配置：
- dev 对象下 对于 开发环境的配置：
1） port: 设置端口号- proxyTable: vue设置的代理 ，用以解决跨域的问题
'/api': { target: 'http://cimonitor.oneitfarm.com', changeOrigin: true, pathRewrite: { '^/api': '' } },
Vuex
vuex 集中式状态管理架构 单向数据流 state Actions view
5个属性：State,Getter,Mutation,Action.Module
状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。
共享状态的管理，用于管理页面数据状态、提供统一数据操作
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中,其他页面dispatch触发action。
优点：提高了可维护性，提高了可读性，低耦合
vuex规定所有的数据操作必须通过 action – mutation – state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理，可以让复杂的组件交互变得简单清晰
Vue组件接收交互行为，调用dispatch方法触发action相关处理，若页面状态需要改变，则调用commit方法提交mutation修改state，通过getters获取到state新值，重新渲染Vue Components，界面随之更新。
Vue-Router
路由框架，路由用于设定访问路径，并将路径和组件映射起来
Axios
一个基于promise的HTTP库 请求后台资源的模块
一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
二、它可以拦截请求和响应
三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
四、安全性更高，客户端支持防御 XSRF
一、axios.get(url[, config]) //get请求用于列表和信息查询
二、axios.delete(url[, config]) //删除
三、axios.post(url[, data[, config]]) //post请求用于信息的添加
四、axios.put(url[, data[, config]]) //更新操作
RESTful API
(representational state transfer）表现性状态变化|转移
api 设计理论 便于服务端和客户端通信 一种交互形式
url定位【唯一标识】资源
http协议里的动词(get,post,put,patch,delete)描述操作，实现资源的状态扭转变化
服务端和客户端之间传递资源的（表现）形式：JSON，XML，JPG
http状态码传递服务端的状态信息：200，404，500
版本应该放入url
过滤信息 ?limit=10 page sortBy
https://www.zhihu.com/topic/19579308/top-answers
weex
阿里开源的一套构建跨平台的移动框架、高性能原生应用
write once,run everywhere
一份代码可以在3端（ios,android,web端）同时运行
2种打包js Bundle :weex页面 和 web页面
weex.config.env或WXEnvironment 获取当前的运行时环境
image.png
在浏览器中，我们需要把这个 JS bundle 作为一段 <script> 载入网页；而在客户端里，我们把这段 JS bundle 通过Weex SDK加载并直接执行。
Elementui 、iview、Ant Design Vue
基于vue的快速构建网页的组件库
jquery
轻量级，强大的选择器，丰富的DOM操作的封装，可靠的事件处理机制，完善的Ajax（无心关心浏览器的兼容性），不污染顶级变量$，出色的浏览器兼容性，链式操作、丰富的插件支持
sass 、less、stylus
css预处理器 简洁高效 使得css的开发更易维护
webpack
模块打包机
模块化 的解决方案
分析项目结构，找到js模块和浏览器不能运行的语言经loader转化和打包成合适的格式供浏览器使用
优点：可替代grunt 和gulp
gulp
能够优化前端的开发流程的工具
工作方式：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，配置之后可以自动替你完成这些任务。
后端ssh
struts
- struts
mvc框架 model-view-controller [模型-视图-控制器] 控制层
hibernate
- hibernate
ORM对象关系映射框架 数据持久层 对数据库进行操作的技术
spring
- spring
依赖注入 控制反转
赞赞哇.png
网友评论