<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ding___dong的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ding___dong</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ding___dong]]></copyright><item><title><![CDATA[vscode插件以及配置集合]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/110850762</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/110850762</guid><author>ding___dong</author><pubDate>Tue, 15 Dec 2020 11:32:18 +0800</pubDate><description><![CDATA[Autoprefixer
下载安装之后
设置快捷键
编辑器界面首选项–快捷键

]]></description><category></category></item><item><title><![CDATA[React中创建组件]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/106431323</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/106431323</guid><author>ding___dong</author><pubDate>Fri, 29 May 2020 19:06:32 +0800</pubDate><description><![CDATA[0. 安装 React Developer Tools 调试工具
React Developer Tools - Chrome 扩展下载安装地址
主要内容

学习 创建组件的第二种方式
美化React组件的样式
小Demo穿起来之前学习的知识点
React中绑定事件
React组件的生命周期

1. React中创建组件
第1种 - 创建组件的方式

使用构造函数来创建组件，如果要接收外界传递的数据，需要在 构造函数的参数列表中使用props来接收；
必须要向外return一个合法的JSX创建的虚拟DOM；]]></description><category></category></item><item><title><![CDATA[React简介]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/106431133</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/106431133</guid><author>ding___dong</author><pubDate>Fri, 29 May 2020 19:04:25 +0800</pubDate><description><![CDATA[1. React简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友） 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
Angular1 2009 年  谷歌    MVC  不支持 组件化开发
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
清]]></description><category></category></item><item><title><![CDATA[webpack3快速入门]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/103928843</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/103928843</guid><author>ding___dong</author><pubDate>Fri, 10 Jan 2020 18:07:31 +0800</pubDate><description><![CDATA[webpack快速入门教程
###1、了解Webpack相关
* 什么是webpack
* Webpack是一个模块打包器(bundler)。
* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
* 理解Loader
* Webpack 本身只能加载JS/JSON模块，如果要加载...]]></description><category></category></item><item><title><![CDATA[Webpack快速入门]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/103928809</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/103928809</guid><author>ding___dong</author><pubDate>Fri, 10 Jan 2020 18:05:07 +0800</pubDate><description><![CDATA[了解Webpack相关

什么是webpack

Webpack是一个模块打包器(bundler)。
在Webpack看来, 前端的所有资源文件(js/css/img/less/…)都会作为模块处理
它将根据模块的依赖关系进行静态分析，生成对应的静态资源


理解Loader

Webpack 本身只能加载JS模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
...]]></description><category></category></item><item><title><![CDATA[Gulp快速入门]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/103928797</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/103928797</guid><author>ding___dong</author><pubDate>Fri, 10 Jan 2020 18:03:51 +0800</pubDate><description><![CDATA[Gulp介绍

中文主页: http://www.gulpjs.com.cn/
gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器
能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的
合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务
gulp更高效(异步多任务), 更易于使用, 插件高质量...]]></description><category></category></item><item><title><![CDATA[Grunt快速入门]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/103928781</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/103928781</guid><author>ding___dong</author><pubDate>Fri, 10 Jan 2020 18:02:34 +0800</pubDate><description><![CDATA[Grunt介绍

中文主页 : http://www.gruntjs.net/
是一套前端自动化构建工具，一个基于nodeJs的命令行工具
它是一个任务运行器, 配合其丰富强大的插件
常用功能:

合并文件(js/css)
压缩文件(js/css)
语法检查(js)
less/sass预编译处理
其它…




安装nodejs, 查看版本node -v


创建一个简单的应用grunt_tes...]]></description><category></category></item><item><title><![CDATA[sublime安装package control插件的方法]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/103416172</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/103416172</guid><author>ding___dong</author><pubDate>Fri, 06 Dec 2019 08:57:59 +0800</pubDate><description><![CDATA[1.手动安装
浏览器输入  https://sublime.wbond.net/Package%20Control.sublime-package
从这里下载这个文件
下载好以后，打开sublime text3，选择菜单Preferences-&gt;Browse Packages 打开安装目录，
此时会进入到一个叫做Packages的目录下，点击进入上一层目录Sublime Text3，在此目录...]]></description><category></category></item><item><title><![CDATA[总结——写在最后]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/101670036</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/101670036</guid><author>ding___dong</author><pubDate>Sun, 29 Sep 2019 08:36:06 +0800</pubDate><description><![CDATA[总结篇：写在最后
看到这里，也就是要和大家说再见的时候了，其实还有很多想和大家分享的内容没能来得及一一阐述，但是没有关系，我相信在今后学习 Vue 的道路上我们永远会保持关注，彼此照应，一起学习，一起进步。
而正所谓温故而知新，可以为师矣，接下来我们不妨一起回顾下本小册的主要内容。
回顾与总结
浏览小册目录，我们可以清楚的将小册的内容归类为构建与开发两部分，这也是本小册所要分享的知识点所在。
在小...]]></description><category></category></item><item><title><![CDATA[开发拓展3——尝试使用外部数据]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/101669871</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/101669871</guid><author>ding___dong</author><pubDate>Sun, 29 Sep 2019 08:29:39 +0800</pubDate><description><![CDATA[开发拓展篇 3：尝试使用外部数据
当你应用的 UI 层面已经趋于完善的时候，接下来你就需要去获取动态的数据来实现真实的应用场景。那么动态数据从哪里来呢？前端主要还是通过接口的形式获取。
如果有专业的接口开发人员和你一起完成一个应用，那么你只需要和他定义好接口的入参和出参，然后进行调用就好了，这也是公司中前端与后台的常见合作方式。
而在以下场景下，你可能并不需要或者并没有后台工程师提供接口给你：

...]]></description><category></category></item><item><title><![CDATA[开发拓展2——将 UI 界面交给第三方库]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/101669860</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/101669860</guid><author>ding___dong</author><pubDate>Sun, 29 Sep 2019 08:28:51 +0800</pubDate><description><![CDATA[开发拓展篇 2：将 UI 界面交给第三方库
当你了解了 Vue 项目构建和开发的基本知识后，我认为接下来你一定想亲自在构建出的项目中填充自己的业务和功能逻辑，因为目前其还是空白的。
但是这里我不会教你如何实现一个具体的业务和功能模块，因为每个人想要实现的东西都可能不尽相同。如果你想快速开发一款应用，并且不想过多的操心页面 UI 层次的内容，比如你不想去实现一个下拉 UI 组件或设计一个 icon ...]]></description><category></category></item><item><title><![CDATA[开发拓展1——扩充你的开发工具]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/101669821</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/101669821</guid><author>ding___dong</author><pubDate>Sun, 29 Sep 2019 08:27:45 +0800</pubDate><description><![CDATA[开发拓展篇 1：扩充你的开发工具
在项目开发中，工具的使用起到了至关重要的作用，正所谓工欲善其事，必先利其器，掌握一些实用的开发工具能够使我们的开发效率事半功倍。
那么我们应该掌握哪些开发工具的使用方法呢？其实一路走来，我们已经介绍的开发工具包括了 npm、yarn、webpack 以及一些集成在项目中的工具包，这些工具一定程度上都大大简化了我们的开发流程，起到了项目助推剂的作用。因此在开发工具的...]]></description><category></category></item><item><title><![CDATA[开发指南5——Vue API 盲点解析]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/101597917</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/101597917</guid><author>ding___dong</author><pubDate>Sat, 28 Sep 2019 09:48:58 +0800</pubDate><description><![CDATA[开发指南篇 5：Vue API 盲点解析
在了解了一些实用的开发技巧和编码理念后，我们在项目的开发过程中难免也会遇到因为不熟悉 Vue API 而导致的技术问题，而往往就是这样的一些问题消耗了我们大量的开发时间，造成代码可读性下降、功能紊乱甚至 bug 量的增加，其根本原因还是自己对 Vue API 的 “无知”。
本文将介绍 Vue 项目开发中比较难以理解并可能被你忽视的 API，唯有知己知彼，...]]></description><category></category></item><item><title><![CDATA[开发指南4——数据驱动与拼图游戏]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/101597838</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/101597838</guid><author>ding___dong</author><pubDate>Sat, 28 Sep 2019 09:47:45 +0800</pubDate><description><![CDATA[开发指南篇 4：数据驱动与拼图游戏
数据驱动是 Vue 框架的核心特性之一，也是 Vue 响应式原理的具体体现，相信大家对其应该深有体会，尤其是在操作数据来触发页面更新的时候。
为了让大家更加了解数据驱动的理念，并解决使用过程中可能出现的一系列问题，本文将结合比较常见和简单的 “拼图游戏” 来展示 Vue 数据驱动的魅力所在。
效果展示
首先我们先来看一下实现的 “拼图游戏” 的动态效果：

在不...]]></description><category></category></item><item><title><![CDATA[开发指南3——合理划分容器组件与展示组件]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/100920778</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/100920778</guid><author>ding___dong</author><pubDate>Tue, 17 Sep 2019 11:31:45 +0800</pubDate><description><![CDATA[开发指南篇 3：合理划分容器组件与展示组件
上篇文章我们提到了组件的概念，组件是目前模块化、组件化开发模式中必不可少的单元形式，那么除了其概念和可复用性外，我们对它的职能划分了解多少呢？
本文将立足 Vue 组件的职能来谈谈我个人对于其划分的理解，唯有了解不同类型组件的职能才能编写出可维护、低耦合的前端代码。
组件的职能划分
如果要将 Vue 组件按照职能划分，我们可以将其分为两种类型：容器组件和...]]></description><category></category></item><item><title><![CDATA[开发指南2——学会编写可复用性模块]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/100744104</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/100744104</guid><author>ding___dong</author><pubDate>Wed, 11 Sep 2019 18:02:15 +0800</pubDate><description><![CDATA[开发指南篇 2：学会编写可复用性模块
在生活中，重复的机械劳动会消耗我们的时间和精力，提高生产成本，降低工作效率。同样，在代码世界中，编写重复的代码会导致代码的冗余，页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是提高生产效率、降低维护成本的不二之选。
在 Vue 项目中，每一个页面都可以看作是由大大小小的模块构成的，即便是一行代码、一个函数、一个组件都可以看作是一个个自由的模...]]></description><category></category></item><item><title><![CDATA[开发指南1——从编码技巧与规范开始]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/100744033</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/100744033</guid><author>ding___dong</author><pubDate>Wed, 11 Sep 2019 18:00:05 +0800</pubDate><description><![CDATA[开发指南篇 1：从编码技巧与规范开始
当我们完成项目的构建，进入开发阶段的时候，除了你需要了解框架本身的知识点外，我们还需要提前掌握一些项目的编码技巧与规范，在根源上解决之后因编码缺陷而导致的项目维护困难、性能下降等常见问题，为项目多人开发提供编码的一致性。
本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量，并会结合代码片段加强大家的理解与认知。当然不是所有实例都是针对 Vue.js...]]></description><category></category></item><item><title><![CDATA[vue脚手架4——项目整合与优化]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/100736272</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/100736272</guid><author>ding___dong</author><pubDate>Wed, 11 Sep 2019 14:47:40 +0800</pubDate><description><![CDATA[构建实战篇 4：项目整合与优化
前几小节，我们讲述了 Vue 项目构建的整体流程，从无到有的实现了单页和多页应用的功能配置，但在实现的过程中不乏一些可以整合的功能点及可行性的优化方案，就像大楼造完需要进行最后的项目验收改进一样，有待我们进一步的去完善。
使用 alias 简化路径
使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用，我们可以使用它将复杂的文件路径定义成一个...]]></description><category></category></item><item><title><![CDATA[vue脚手架3——多页路由与模板解析]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/100729403</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/100729403</guid><author>ding___dong</author><pubDate>Wed, 11 Sep 2019 10:40:21 +0800</pubDate><description><![CDATA[构建实战篇 3：多页路由与模板解析
上篇文章中我们成功打包并输出了多页文件，而构建一个多页应用能够让我们进一步了解项目配置的可拓展性，可以对学习 Vue 和 webpack 起到强化训练的效果，本文将在此基础上主要针对多页路由及模板的配置进行系列的介绍。
路由配置
1. 跳转
在配置路由前，首先我们要明确一点就是，多页应用中的每个单页都是相互隔离的，即如果你想从 page1 下的路由跳到 page...]]></description><category></category></item><item><title><![CDATA[vue脚手架2——使用 pages 构建多页应用]]></title><link>https://blog.youkuaiyun.com/ding___dong/article/details/100725607</link><guid>https://blog.youkuaiyun.com/ding___dong/article/details/100725607</guid><author>ding___dong</author><pubDate>Wed, 11 Sep 2019 08:42:34 +0800</pubDate><description><![CDATA[构建实战篇 2：使用 pages 构建多页应用
经过对单页应用配置的了解，相信大家应该对如何构建一个 Vue 单页应用项目已经有所收获和体会，在大部分实际场景中，我们都可以构建单页应用来进行项目的开发和迭代，然而对于项目复杂度过高或者页面模块之间差异化较大的项目，我们可以选择构建多页应用来实现。那么什么是多页应用，如何构建一个多页应用便是本文所要阐述的内容。
概念

首先我们可以把多页应用理解为由...]]></description><category></category></item></channel></rss>