zimeng303的博客

文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读Vue 3.0 响应式系统原理基础回顾Vue.js 响应式回顾Proxy 对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和 length 属性可以作为单独的模块使用Proxy 对象回顾'use strict'// 问题1： set 和 deleteProperty 中需要返回布尔类型的值// 在

文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读Vite 工具基本概念Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具它基于 ECMAScript 标准原生模块系统（ES Modules）实现ES Module现代浏览器都支持 ES Module（IE不支持）通过下面的方式加载模块 <script type="module" src="..."></script>支持模块的

文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读基本介绍学习网址RFC(Request For Comments)https://github.com/vuejs/rfcsComposttion API RFChttps://composition-api.vuejs.org设计动机Options API包含一个描述组件选项(data、methods、props等)的对象Options API 开发复杂组件，同一个

项目说明Vue 3.0 源码的组织方式一、源码采用 TypeScript 重写为了提升代码的可维护性，源码都使用 TypeScript 编写，大型项目项目的开发都推荐使用类型化的语言。二、使用 Monorepo 管理项目结构使用一个项目管理多个包，把不同的功能放到不同的 package 中进行管理，这样每个功能模块都划分的比较明确，模块之间的依赖关系也很明确，并且每个模块都能单独发布、测试及使用。packages 目录结构compiler-core：和平台无关的编译器co

笔记来源：拉勾教育 大前端高薪训练营源码采用 TypeScript 重写为了提升代码的可维护性，源码都使用 TypeScript 编写，大型项目项目的开发都推荐使用类型化的语言。使用 Monorepo 管理项目结构使用一个项目管理多个包，把不同的功能放到不同的 package 中进行管理，这样每个功能模块都划分的比较明确，模块之间的依赖关系也很明确，并且每个模块都能单独发布、测试及使用。packages 目录结构compiler-core：和平台无关的编译器compiler-do.

文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读课程目标开源组件库Element-UIiViewCDD基本介绍CDD(Component-Driven Development) ：组件驱动开发自上而下从组件级别开始，到页面级别结束CDD 的好处组件在最大程度被重用并行开发可视化测试基础回顾处理组件的边界情况$rootparent/parent/parent/children$refs[外链图

文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读Gridsome 案例案例介绍使用第三方案例模板，嵌入到本次项目中模板地址：https://github.com/zimeng303/startbootstrap-clean-blog为防止项目作者的一些删除操作，建议将其 Fork 到自己的仓库中使用 git 将其下载到本地，--depth=1 表示下载最后一次更新的代码git clone git@github.com:zimen

文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读Gridsome 基础基本介绍Gridsome 是什么一个免费、开源、基于 Vue.js 技术栈的静态网站生成器。官方网站：https://gridsome.org/GitHub 仓库：https://github.com/gridsome/gridsomeGridsome 是由Vue.js驱动的Jamstack框架，用于构建默认情况下快速生成的静态生成的网站和应用。Gridsome是Vue

文章前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读CMS 简介内容管理系统（content management system，CMS）是一种位于WEB 前端（Web 服务器）和 后端办公系统或流程（内容创作、编辑）之间的软件系统。内容的创作人员、编辑人员、发布人员使用内容管理系统来提交、修改、审批、发布内容。这里指的“内容”可能包括文件、表格、图片、数据库中的数据甚至视频等一切你想要发布到Internet、Intranet以及Extranet网站的信息

笔记来源：拉勾教育 大前端高薪训练营一、什么是静态网站生成器静态网站生成器是一系列配置、模板以及数据，生成静态 HTML 文件及相关资源的工具这个功能也叫 预渲染生成的网站不需要类似 PHP 这样的服务器只需要放到支持静态资源的 Web Server 或 CDN 上即可运行二、静态网站的好处省钱不需要专业的服务器，只要能托管静态文件的空间即可快速不经过后端服务器的处理，只传输内容安全没有后端程序的运行，自然会更安全三、常见的静态网站生成器Jekyl.

Nuxt.js 发布部署打包Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。命令描述nuxt启动一个热加载的 Web 服务器（开发模式）localhost:3000nuxt build利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。nuxt start以生产模式启动一个 Web 服务器 (需要先执行 nuxt build)。nuxt generate编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)

前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：内容较多，建议通过左侧导航栏进行阅读Vue SSR基本介绍Vue SSR 是什么官方文档：https://ssr.vuejs.org/Vue SSR（Vue.js Server-Side Rendering）是 Vue.js 官方提供的一个服务端渲染（同构应用）解决方案使用它可以构建同构应用还是基于原有的 Vue.js 技术栈官方文档的解释：Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件

NuxtJs 综合案例前言Nuxt.js 综合案例基本介绍学习前提学习收获项目初始化创建项目导入样式资源配置布局组件导入登录注册导入剩余页面手动配置路由处理顶部导航链接处理导航链接高亮封装请求模块登录注册封装请求方法基本用户登录注册存储用户登录状态首页模块展示公共文章列表公共文章列表分页展示文章标签列表优化并行异步任务处理首页的导航栏统一设置用户 Token文章发布时间格式化对文章进行点赞操作文章详情展示基本信息Markdown 转为 HTML展示文章作者相关信息设置页面 meta 优化 SEO展示评论列表

NuxtJS 基础Nuxt.js 的基本介绍Nuxt.js 是什么基本特性Nuxt.js 框架是如何运作的Nuxt.js 的使用方式创建项目手动创建项目项目准备工作创建页面及启动项目Nuxt 路由基础路由路由导航动态路由嵌套路由路由配置视 图Nuxt.js 的基本介绍官网：https://zh.nuxtjs.org/GitHub 仓库：https://github.com/nuxt/nuxt.jsNuxt.js 是什么Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我

前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：建议通过左侧导航栏进行阅读服务端渲染基础基本概述随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案，在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架，这类框架所构建的 **单页应用（SPA）**具有以下优缺点：优点用户体验好渲染性能好可维护性高…缺点1，首屏加载时间过长与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用 使用 J

你有封装过 axios 吗？主要是封装哪些方面？如何中断 axios 请求？一、封装过哪些方面？1.1 http 封装1.2 api 封装1.2.1 总 api 接口的映射1.2.2 建立一个 get_url.js，用于获取域名地址，实现环境切换可配置1.2.3 单个模块接口定义1.2.4 断网处理1.3 将 api 挂载到全局1.4 中断 axios 请求一、封装过哪些方面？基本逻辑如上，主要是对请求封装和 api 接口封装。1.1 http 封装http 封装，其实就是实例化一个 axios

前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：建议通过左侧导航栏进行阅读课程目标Vue 组件间通信方式回顾Vuex 核心概念和基本使用回顾购物车案例模拟实现 Vuex组件内的状态管理流程Vue 最核心的两个功能：数据驱动和组件化。组件化开发给我们带来了：更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。new Vue({ // state 状态 data () { return {

前言笔记来源：拉勾教育 大前端高薪训练营阅读建议：建议通过左侧导航栏进行阅读模板编译模板编译的主要目的是将模板 (template) 转换为渲染函数 (render) <div> <h1 @click="handler">title</h1> <p>some content</p> </div>渲染函数 render render (h) { return

虚拟 DOM基本介绍什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射到 DOM。Vue.js 中的虚拟 DOM 借鉴了 Snabbdom，并添加了一些 Vue.js 中的特性，例如：指令和组件机制。Vue 1.x 中细粒度监测数据的变化，每一个属性对应一个 wat

Vue.js源码解析响应式原理课程目标准备工作构建过程源码解析从入口开始Vue 的初始化首次渲染过程数据响应式原理实例方法/数据模板编译组件化机制响应式原理课程目标Vue.js 的静态成员和实例成员初始化过程首次渲染的过程数据响应式原理 – 最核心的特性之一准备工作Vue 源码的获取项目地址：https://github.com/vuejs/vueFork 一份到自己仓库，克隆到本地，可以自己写注释提交到 github为什么分析 Vue 2.61，到目前为止 Vue 3

Virtual DOM基本介绍什么是 Virtual DOMVirtual DOM(虚拟 DOM)，是由普通的的 JS 对象来描述 DOM 对象，因为不是真实的 DOM 对象，所以叫 Virtual DOM。真实 DOM 成员let element = document.querySelector('#app') let s = '' for (var key in element) { s += key + ',' }console.log(s) // 打印结果 a

响应式原理课程目标模拟 Vue 响应式原理。准备工作数据驱动数据响应式数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率。双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动（Vue 最独特的特性之一）开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图响应式的核心原理Vue 2.x – 基于 Object.d

Vue 基础基础结构混入 mixin ：复用组件的选项Vue-Router基础知识编程式导航this.$router.replace()this.$router.push()this.$router.go()Hash 和 History客户端路由的实现模式，当路径发生变化时，不会向服务器发生请求，都是 JavaScript 监视路径的变化，然后根据不同的地址渲染不同的内容。表现形式的区别Hash 模式https://music.163.com/#/playlist?id=310