满天鑫

服务器端渲染（SSR)学前准备 ES6 Node Vue React Angular 什么是服务器端渲染 前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。 服务端渲染：前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将完整的HTML返回给前端。在SPA场景下，服务端渲染都是针对第一次get请求，它会完整的html给浏览器，浏览器直接渲染出首屏，用不着浏览器端多一个AJAX请求去获取数据再渲染。 为什么使用服务器端渲染优点： 更好的 SEO，因为传统的搜索引擎只会从 HTML 中抓取数据，这会导致前端渲染的页面无法被抓取。 更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备 。页面首屏时间大概有80%消耗在网络上，剩下的时间在后端读取数据以及浏览器渲染，显然要优化后面的20%是比较困难的，优化网络时间是效果最明显的手段。传统的Ajax请求是先请求j ...

1. 小程序介绍微信小程序 ( Mini Program ) ，微信创始人 张小龙 ，在2017年1月9日宣布的微信小程序正式上线 1.1. 特点 触手可及，用完即走 拥有和原生APP的体验 用户量大 面向所有用户开放（企业，组织，个人均可以发布自己的小程序） 小程序就是套在 微信里面的原生APP 1.2. 小程序的运行环境1.2.1. 传统原生APP 1.2.2. 微信运行环境 1.2.3. 微信小程序运行环境 1.2.4. 小结问： 微信小程序和原生APP、微信有什么联系？ 答： 微信小程序就是套在微信里的原生APP 2. 开发环境的准备2.1. 注册账号访问注册页面，耐心完成注册即可。 2.2. 获取APPID由于后期调用微信小程序的接口等功能，需要索取开发者的小程序中的APPID，所以在注册成功后，可登录，然后获取APPID。 登录，成功后可看到如下界面 然后复制你的APPID,悄悄的保存起来，不要给别人看到😄。 2.3. 开发工具严格来说，微信小程序支持所有的开发工具，但是从效率和便利性来说，推荐如下 vs code 下载地址 推荐vs code ...

Virtual DOM的实现原理课程目标 了解什么是虚拟DOM,以及虚拟DOM的作用 Snabbdom的基本使用（Vue内部的虚拟Dom是改造了开源库Snabbdom） Snabbdom的源码解析 在面试的时候经常会问到虚拟DOM是怎么工作的，通过查看Snabbdom源码，可以对这块内容有更加深入的了解。 1、什么是Virtual DOMVirtual Dom(虚拟DOM),是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫做Virtual DOM. 我们为什么用虚拟DOM来模拟真实的DOM呢？ 因为我们知道一个DOM对象中的成员是非常多。所以创建Dom对象的成本非常高。 如果使用虚拟Dom来描述真实Dom,就会发现创建的成员少，成本也就低了。 2、为什么使用Virtual DOM 手动操作Dom比较麻烦，还需要考虑浏览器兼容性问题，虽然有Jquery等库简化DOM操作，但是随着项目的复杂度越来越高，DOM操作复杂提升，既要考虑Dom操作，还要考虑数据的操作。 为了简化DOM的复杂操作于是出现了各种的MVVM框架，MVVM框架解决了视图和状态的同步问题，也就是当数 ...

1. mpvue-介绍mpvue 是美团团队开发的语法类似 Vue.js 的小程序的前端框架 官网 开发文档 1.1. 主要特性主要有以下特性 彻底的组件化开发能力：提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex 数据管理方案：方便构建复杂应用 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload 支持使用 npm 外部依赖 使用 Vue.js 命令行工具 vue-cli 快速初始化项目 H5 代码转换编译成小程序目标代码的能力 1.2. 优秀案例 1.3. 前置知识 前端基本功 html + css + javascript nodejs es6 webpack vue 微信小程序 1.3.1. 代码示例new Vue({ data: { a: 1 }, created () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) }, onShow () { // `t ...

1. Taro1.1. 介绍官网 开发文档 Taro 是一套遵循 React 语法规范的 多端开发 解决方案。由京东的凹凸实验室团队于 2018-09-18 历时 3 个月正式发布。taro 的目标是使用一套代码达到多端统一。 多端： 微信小程序 H5 React Native 支付宝小程序 百度智能小程序 快应用 适配中 1.2. 注意虽然 Taro 拥有多端编译的能力，但是为了让我们的学习有一条比较完整的路线，本章课程是优先以微信小程序的开发为主线来介绍 Taro。 2. 运行项目2.1. 安装脚手架工具@tarojs/clinpm install -g @tarojs/cli 2.2. 创建项目taro init myApp 2.3. 打包编译2.3.1. 发布 微信小程序 npm run build:weapp H5 npm run build:h5 百度智能小程序 npm run build:swan 支付宝小程序 npm run build:alipay React Native npm run build:rn 2.3.2. 监控 微信小程序 n ...

1. wepy-介绍    WePY (发音: /‘wepi/)是一款腾讯团队于2016年11月发布的小程序组件化框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。 官网 1.1. 特性 类Vue开发风格 支持自定义组件开发 支持引入NPM包 支持Promise 支持ES2015+特性，如Async Functions 支持多种编译器，Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug 支持多种插件处理，文件压缩，图片压缩，内容替换等 支持 Sourcemap，ESLint等 小程序细节优化，如请求列队，事件优化等 1.2. 优秀案例    腾讯疫苗查询小程序、 腾讯翻译君小程序、 腾讯地图小程序、 玩转故宫小程序、 手机充值+、 手机余额查询、 手机流量充值优惠、 友福图书馆（开源）、 素洁商城（开源）、 NewsLite（开源）、 西安找拼车（开源）、 深大的树洞（开源）、 求知微阅读（开源）、 给你的 iPhone X 换个发型、 天天跟我买、 坚橙、 群脱单、 米淘联盟、 帮助 ...

Vuex状态管理1、课程目标 Vuex核心概念和基本使用回顾 购物车案例 模拟实现Vuex 2、组件内状态管理流程下面我们通过组件内状态管理的流程来回顾一下什么是组件内状态管理。VUE中最核心的两个功能就是数据驱动与组件化，使用组件化的开发，可以提高开发效率，提高可维护性。 new Vue({ data(){ return { count:0 } }, template:`<div>{{count}}</div>`, methods:{ add(){ this.count++ } } }) 每个组件内都有自己的数据，模板，和方法。数据也称之为状态，每个组件都维护自己的状态。模板我们可以称之为视图，每个组件都有自己的视图，把状态绑定到视图上，最终呈现给用户。当用户与视图交换的时候，可能会更 ...

Vue响应式原理1、课程目标模拟一个最小版本的Vue 响应式原理在面试的常问问题 实际项目中出现问题的原理层面的解决 ​ 给Vue实例新增一个成员是否是响应式的？ ​ 给属性重新赋值成对象，是否是响应式的？ 为学习Vue源码做铺垫。 2、数据驱动在实现整个Vue响应式代码之前，我们先来了解几个概念。 第一个：数据驱动 第二个：响应式的核心原理 第三个：发布订阅模式和观察这模式 我们先来看一下数据驱动的内容： 数据响应式，双向绑定，数据驱动（我们经常看到这几个词） 数据响应式：数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了频繁的DOM操作，提高开发效率，这与Jquery不一样，Jquery是频繁的操作Dom 双向绑定： 数据改变，视图改变，视图改变，数据也随之改变( 通过这句话，我们可以看到在双向绑定中是包含了数据响应式的内容) ​ 我们可以使用v-model 在表单元素上创建双向数据绑定 数据驱动是Vue最独特的特性之一 ​ 开发过程中仅仅需要关注数据本身，不需要关心数据是如何渲染到视图中的。主流的MVVM框架 ...

Vue Router一、Vue Router 回顾1、路由简介路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在开发中，路由分为： 后端路由 前端路由 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 SPA（Single Page Application） Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作） SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内 容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作 SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求 在实现SPA过程中，最核心的技术点就是前端路由 前端路由 概念：根据不同的用户事件，显示不同的页面内容 本质：用户事件与事件处理函数之间的对应关系 2、实现简易前端路由 基于URL中的hash实现（点击菜单的时候改变URL的hash，根 ...

项目质量监测课程介绍没有规矩不成方圆，所以我们写代码也要有”规矩”，但是我们通常记不住所有的”规矩”，因为人嘛，不可能不犯错。但是，这难不到我们程序员，我们让机器、代码、程序帮我们搞定，让它们来帮我们进行代码质量检查，以便提高的程序的健壮性。 通常来说，项目的质量决定了： 软件项目的命运 软件项目的可维护性 软件项目的运维成本 软件项目的扩展性 为什么要进行代码质量检查？ 代码检查很重要，原因有三： 避免低级bug：一些常见代码问题，如果在编译或运行前不能及时发现，代码中的语法问题会直接导致编译或运行时错误，影响开发效率和代码质量； 统一代码习惯：每一个团队或个人都会有一些代码规范或者代码习惯，为了便于后期维护和阅读，我们编写的代码也需要符合一定的格式规范； 空格 统一缩进 命名规范 … 保证线上代码质量：在版本管理中，我们需要在提交或发布之前自动执行一些代码检查工作，确保我们的代码符合最终版本要求。 如何让一个团队的人产出的代码都在一个基本水平底线之上呢？最初是靠制订规范。要确保规范得以执行只能靠人，所以文字规范成了code review的公共参照标准。单纯靠人的事最终都 ...

一、项目初始化 目标 能使用 Vue CLI 创建项目 了解 Vant 组件库的导入方式 掌握制作使用字体图标的方式 掌握如何在 Vue 项目中处理 REM 适配 理解 axios 请求模块的封装 使用 Vue CLI 创建项目 如果你还没有安装 VueCLI，请执行下面的命令安装或是升级： npm install --global @vue/cli 在命令行中输入以下命令创建 Vue 项目： vue create toutiao-m Vue CLI v4.2.3? Please pick a preset: default (babel, eslint)> Manually select features default：默认勾选 babel、eslint，回车之后直接进入装包 manually：自定义勾选特性配置，选择完毕之后，才会进入装包 选择第 2 种：手动选择特性，支持更多自定义选项 ? Please pick a preset: Manually select features? Check the features needed for your p ...

五、首页—频道编辑 处理页面弹出层Vant 中内置了 Popup 弹出层 组件。 1、在 data中添加一个数据用来控制弹层的显示和隐藏 data () { return { ... isChannelEditShow: true // 这里我们先设置为 true 就能看到弹窗的页面了 }} 2、然后在首页模板中的频道列表后面添加弹出层组件 <!-- 频道编辑 --><van-popup class="edit-channel-popup" v-model="isEditChannelShow" position="bottom" :style="{ height: '100%' }" closeable close-icon-position="top-left">内容</van-popup><!-- /频道编辑 --> ...