白驹过隙时光荏苒-CSDN博客

Study Notes封装 Vue.js 组件库组件库介绍开源组件库Element-UIIViewVantCDD(组件设计文档)自下而上从组件级别开始，到页面级别结束CDD 的好处组件在最大程度上被重用并行开发可视化测试处理组件边界情况vue 中处理组件边界情况的 API$root当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。$parent父实例，如果当前实例有的话。$children当前实例的直接子组件。需要注意 $chil

2021-01-27 09:54:04 694 1

原创静态站点生成（SSG）——Gridsome

Study NotesGridsome静态站点生成（SSG）GitHub 仓库官网介绍Gridsome 是什么Gridsome 是由 Vue.js 驱动的 Jamstack 框架，用于构建默认情况下快速生成的静态生成的网站和应用。Gridsome 是 Vue 提供支持的静态站点生成器，用于为任何无头 CMS，本地文件或 API 构建可用于 CDN 的网站使用 Vue.js，webpack 和 Node.js 等现代工具构建网站。通过 npm 进行热重载并访问任何软件包，并使

2021-01-27 09:50:10 2665

原创搭建自己的 SSR

Study NotesVue SSR 介绍SSR 官方文档什么是服务器端渲染 (SSR)？官方文档Vue SSR（Vue.js Server-Side Rendering）是 Vue.js 官方提供的一个服务端渲染（同构应用）解决方案使用它可以构建同构应用还是基于原有的 Vue.js 技术栈:::tip 官方介绍Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML

2021-01-27 09:40:29 4828 1

原创 Nuxt.js

Study NotesNuxt.js介绍Nuxt.js 是什么？Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 V

2021-01-27 09:27:29 9448

原创服务端渲染（SSR）

Study Notes服务端渲染（SSR）概述随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案，在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架，这类框架所构建的单页应用（SPA）具有用户体验好、渲染性能好、可维护性高等优点。但也也有一些很大的缺陷，其中主要涉及到以下两点：首屏加载时间过长与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用使用 JavaScript 在客户端生成 HTML 来呈现内容，

2021-01-27 09:18:55 865

原创 Vuex 模拟实现

Study NotesVuex 模拟实现实现思路实现 install 方法Vuex 是 Vue 的一个插件，所以和模拟 VueRouter 类似，先实现 Vue 插件约定的 install 方法实现 Store 类实现构造函数，接收 optionsstate 的响应化处理getter 的实现commit、dispatch 方法installlet _Vue = null;function install(Vue) { _Vue = Vue; // 混入

2021-01-27 09:14:18 154

原创 Vuex案例-购物车

Study Notes案例-购物车购物车 Demo，带你理解并使用 vuex 状态管理目录结构效果展示功能介绍首页获取并展示商品列表添加商品到购物车展示购物车中商品总数购物车更新购物车中的商品数据更新商品选中状态计算选中商品数量、合计商品价格全选、单选删除购物车中的商品本地缓存 vuex 状态功能开发Vuex 中创建两个模块，分别用来记录商品列表和购物车的状态，store 的结构：└───store ├───modules │ └

2021-01-27 09:09:59 1899

转载 Vuex基本使用

Study NotesVuexVuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。Vuex 是专门为 Vue.js 设计的状态管理库它采用集中式的方式存储需要共享的数据从使用角度，它就是一个 JavaScrip

2021-01-27 09:06:21 188

原创 Vue状态管理

Vue状态管理组件内的状态管理流程Vue 最核心的两个功能：数据驱动和组件化。组件化开发给我们带来了：更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。new Vue({ // state data() { return { count: 0, }; }, // view template: `<div>{{ count }}</div>`, // actions methods:

2021-01-27 08:57:58 366

原创 nodejs读取xlsx格式文件

nodejs读取xlsx格式文件安装npm i node-xlsx -D// 或者yarn add node-xlsx -D使用读取表格数据，并生成json对象/** * @author Wuner * @date 2020/8/13 21:08 * @description */let xlsx = require('node-xlsx');const fs = require('fs')const path = require('path')// 解析得到文档中的所有

2020-08-22 13:30:11 2130

原创 Vue.js 源码剖析-组件化

Vue.js 源码剖析-组件化组件化可以让我们方便的把页面拆分成多个可重用的组件组件是独立的，系统内可重用，组件之间可以嵌套有了组件可以像搭积木一样开发网页例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。下面我们将从源码的角度来分析 Vue 组件内部如何工作组件实例的创建过程是从上而下（先创建父组件再创建子组件）组件实例的挂载过程是从下而上（先挂载子组件再挂载父组件）组件定义注册 Vue.component()入口

2020-08-16 10:39:08 1280

原创 Vue.js 源码剖析-模板编译

Study NotesVue.js 源码剖析-模板编译Vue 模板编译为什么需要模板编译Vue 2.x 使用 VNode 描述视图以及各种交互，用户自己编写 VNode 比较复杂模板编译的目的将模板(template)字符串转换为渲染函数(render)用户只需要编写类似 HTML 的代码 - Vue 模板，通过编译器将模板转换为返回 VNode 的 render 函数.vue 文件在 webpack 构建的过程中会被转换成 render 函数沙盒工具官方提供 Vue 2

2020-08-15 08:37:29 1642

原创 Vue2.x 源码剖析之虚拟 DOM

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

2020-08-10 14:50:49 4323

原创 Vue2.x 源码剖析之响应式原理

Vue.js 源码剖析-响应式原理响应式处理的入口src/core/instance/init.jsinitState(vm) vm 状态的初始化初始化了 _data、_props、methods 等src/core/instance/state.js/* @flow */import ...;const sharedPropertyDefinition = {...};export function proxy(target: Object, sourceKey: str

2020-08-10 14:47:32 4529

原创带你了解虚拟 DOM（Virtual DOM）—— Snabbdom 的使用以及源码解析

Study Notes虚拟 DOM（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)// 打印结果

2020-08-10 14:43:54 4910 1

原创带你了解响应式原理，以及Vue 响应式原理模拟实现

Study Notes深入响应式原理数据响应式、双向绑定、数据驱动数据响应式数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图Vue2.x 响应式原理当你把一个普通的 JavaScript

2020-08-10 14:28:32 4605

原创模拟 VueRouter 的实现(简易版)

Study Notes模拟 VueRouter前置的知识：插件slot 插槽混入render 函数运行时和完整版的 VueVue Router 的核心代码// 注册插件// Vue.use() 内部调用传入对象的 install 方法Vue.use(VueRouter);// 创建路由对象const router = new VueRouter({ routes: [{ name: 'home', path: '/', component: homeComponent }]

2020-08-10 14:20:08 3838

原创带你了解规范化-eslint、stylelint、prettier、git hooks

Study Notes规范化标准规范化是我们践行前端工程化中重要的一部分为什么要有规范化标准软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果物代码标准化规范最为重要常见的规范化实现方式ESLint 工具使用定制 ESLint 校验规则ESLint 对 TypeScript 的支持ESLint 结合自动化工具或者 Webpack基于

2020-08-10 14:05:32 5461

原创 Rollup的简单使用

Rollup概述Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

2020-08-10 13:54:34 4326

原创带你从零开始使用Webpack构建 Vue 项目

Study NotesWebpack 构建 Vue 项目安装 webpack 和 webpack-clinpm i webpack webpack-cli -D配置入口起点创建一个webpack.config.js文件module.exports = { entry: './src/main.js',};配置 outputwebpack.config.jsconst path = require('path');module.exports = { entry: './s

2020-08-10 13:49:31 3932

原创带你从零开始了解webpack

入口起点(entry points)在 webpack 配置中有多种方式定义 entry 属性单个入口（简写）语法用法：entry: string|Array<string>webpack.config.jsconst config = { entry: './src/index.js',};module.exports = config;entry 属性的单个入口语法，是下面的简写：const config = { entry: { main: './sr

2020-08-10 13:43:12 2696

原创 ES Module的基本使用

ES ModuleES Module 基本特性ESM 自动采用严格模式，忽略 ‘use strict’每个 ES Module 都是运行在单独的私有作用域中ESM 是通过 CORS 的方式请求外部 JS 模块的ESM 的 script 标签会延迟执行脚本(浏览器页面渲染后执行)export在创建 JavaScript 模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用 imp

2020-08-10 01:27:58 4075

原创使用 Gulp和Grunt分别完成项目的自动化构建

使用 Gulp 完成项目的自动化构建使用gulpfile.js 使用 module.exports 导出了 build、dev、clean，所以我们可以通过 gulp 调用这三个任务gulp buildgulp devgulp clean详解 gulpfile.js处理 html 文件我们需要安装gulp-htmlmin、swig两个插件首先我们使用 swig 编译 html，并将数据对象中的变量注入模板，设置不缓存页面；后续我们将使用gulp-htmlmin，对 html 文件进行压缩

2020-08-09 13:02:59 3718

原创使用 NodeJS 搭建一个小型脚手架工具

使用 NodeJS 搭建一个小型脚手架工具脚手架目录结构└───template/..........................模板目录 ├───src/...........................src目录 │ └───assets/...................资源目录 │ └───css/..................样式文件目录 │ └───fonts/................字体资源目录

2020-08-09 12:59:33 3840

原创 Gulp自动化构建的基本使用

Gulp用自动化构建工具增强你的工作流程！gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。基本使用安装 gulpnpm i gulp -D在项目根目录下创建gulpfile.js文件function defaultTask(cb) { // 在此处写默认任务的代码 cb();}function fooTask(cb) { // 在此处写自定义任务的代码 cb();}exports.default = defaultTas

2020-08-09 12:54:57 3489

原创 Grunt自动化构建

Grunt安装 grunt 和 grunt-contrib-uglifynpm i grunt grunt-contrib-uglify -DGruntfileGruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件，应当放在你的项目根目录中，和 package.json 文件在同一目录层级，并和项目源码一起加入源码管理器。Gruntfile 由以下几部分构成：“wrapper” 函数项目与任务配置加载 gru

2020-08-09 12:54:19 3263

原创 yeoman使用

Study Notesyeoman现代 Web 应用程序的 Web 脚手架工具全局安装 yonpm i yo -g安装对应的 generator这里安装generator-nonenpm i generator-node -g用法通过 yo 运行 generatormkdir my-modulecd my-moduleyo node子生成器使用如果不需要主生成器提供的所有功能，则仍可以通过直接与子生成器组合来使用。可以通过运行下面的命令来查看每个子生成器的选项

2020-08-09 12:52:33 3567

原创带你了解this

this 理解与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下，函数的调用方式决定了 this 的值。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的，ES2015 引入了支持 this 词法解析的箭头函数（它在闭合的执行环境内设置 this 的值）。全局环境论是否在严格模式下，在全

2020-08-09 03:16:45 3376

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

Android聊天软件开发（基于网易云IM即时通讯）——第三部分

Android仿微信拍摄、录制视频，以及视频播放（基于JCameraView和GSYVideoPlayer）

Android上传单文件和多文件（后台使用MultipartFile）

jq图片自动轮播（封装）

jq图片自动轮播

jQuery图片轮播（无缝衔接）

移动端和pc端拖动排序

空空如也