<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[博客的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/wmiaopas</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wmiaopas]]></copyright><item><title><![CDATA[使用Webpack搭建一个最基本的React环境]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/107610620</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/107610620</guid><author>wmiaopas</author><pubDate>Mon, 27 Jul 2020 14:54:50 +0800</pubDate><description><![CDATA[1.首先初始化项目结构
npm init

包名随意

填写好之后一路按回车，直到文件夹内生成 package.json 文件，
在与package.json同级的目录下新建一个文件夹用于新建项目

由于Node.js会自下而上的找包，所以我们把包安装在最外层（也就是package.json同级目录），让Node.js自己去找包，这样我们就只用安装一次包非常的方便。

2.安装webpack相关包
npm i webpack webpack-cli webpack-dev-server -D
npm i h]]></description><category></category></item><item><title><![CDATA[webpack  devserver]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/107358288</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/107358288</guid><author>wmiaopas</author><pubDate>Wed, 15 Jul 2020 13:13:41 +0800</pubDate><description><![CDATA[devServer的一些配置项
contentBase
运行代码的目录
contentBase:resolve(__dirname,'build')


watchContentBase
监视ContentBase目录下的所有文件，一旦文件发生改变就会重载
watchContentBase:true


watchOptions
监视文件
watchOptions:{
	//ignored，忽略某些文件，node_modules不需要监视
	ignored:/node_modules/
}


compre]]></description><category></category></item><item><title><![CDATA[webpack  resolve]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/107357963</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/107357963</guid><author>wmiaopas</author><pubDate>Wed, 15 Jul 2020 12:42:03 +0800</pubDate><description><![CDATA[resolve是配置路径的规则，可以配置引入资源的默认路径

alias
配置解析路径别名
原本要这样引入css文件和js文件的
import './src/js/index.js'
import './src/css/index.csss'

非常不方便而且容易出错，如果需要引入很多个文件就需要写很多次
但是可以通过配置解析模块路径别名来解决
配置方法：
resolve:{
alias:{
		$css:resolve(__dirname,'src/css'),
		$js:resolve(__dirna]]></description><category></category></item><item><title><![CDATA[webpack dll动态链接库]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/107300698</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/107300698</guid><author>wmiaopas</author><pubDate>Sun, 12 Jul 2020 16:36:02 +0800</pubDate><description><![CDATA[如果在项目中引入了第三方资源，直接对项目进行打包的话，会把第三方资源也一起打包到入口文件中，这样会使得入口文件非常大。

使用dll动态链接库可以把第三方资源和项目的入口分别打包。

使用方法：
1.首先在与webpack.config.js同级的目录下创建webpack.dll.js文件
//webpack.dll.js
const{resolve}=require('path')
const webpack =require('webpack')
module.exports={
    entry:{]]></description><category></category></item><item><title><![CDATA[webpack externals]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/107285757</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/107285757</guid><author>wmiaopas</author><pubDate>Sat, 11 Jul 2020 18:50:10 +0800</pubDate><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果在入口文件里引入了第三方资源然后直接打包的话，会把第三方资源也一起打包进去，这样的话打包出来的文件会变得很大。而且有时候引入的是CDN资源，不需要打包但是却被打包了，所以需要externals来排除不需要打包的资源。
直接打包的后果，会把jquery也打包到文件中去


使用externals进行排除
const{resolve}=require('path')
const HtmlWebPackPlugin=requi]]></description><category></category></item><item><title><![CDATA[webpack oneOf和enforce的使用方法]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/107171025</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/107171025</guid><author>wmiaopas</author><pubDate>Mon, 06 Jul 2020 23:52:41 +0800</pubDate><description><![CDATA[oneOf
webpack原本的loader是将每个文件都过一遍，比如有一个js文件 rules中有10个loader，第一个是处理js文件的loader，当第一个loader处理完成后webpack不会自动跳出，而是会继续拿着这个js文件去尝试匹配剩下的9个loader，相当于没有break。

而oneOf就相当于这个break
用法
rules:[
            oneOf:[
                {
                    test:/\.css$/,
    ]]></description><category></category></item><item><title><![CDATA[Webpack 将css提取成单独文件分离]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/107030440</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/107030440</guid><author>wmiaopas</author><pubDate>Mon, 29 Jun 2020 23:05:18 +0800</pubDate><description><![CDATA[如果采用默认配置导入css的话 打包后是这样的

css样式会被直接写入到html中去，可能会带来不必要的影响，这时候就需要把css单独分离出来
首先要安装
mini-css-extract-plugin
postcss-loader
postcss-preset-env
npm i mini-css-extract-plugin postcss-loader postcss-preset-env -D

然后配置webpack.config.js
const{resolve}=require('path']]></description><category></category></item><item><title><![CDATA[Webpack中core-js的使用]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/107010291</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/107010291</guid><author>wmiaopas</author><pubDate>Sun, 28 Jun 2020 23:35:47 +0800</pubDate><description><![CDATA[IE浏览器无法兼容es6语法，我们可以使用core-js进行兼容性处理，从而使IE浏览器也能够正常的解析es6语法

比如const
这个函数在Chrome中能够正常的执行

而在IE中则不能执行

使用core-js
首先需要安装core-js、babel-loader和@babel/preset-env
npm i core-js babel-loader @babel/preset-env
 -D

然后在webpack.config.js中配置core-js
{   
               ]]></description><category></category></item><item><title><![CDATA[关于vue-cli编译报错3221225477 的一种解决办法]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/106899833</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/106899833</guid><author>wmiaopas</author><pubDate>Mon, 22 Jun 2020 13:04:15 +0800</pubDate><description><![CDATA[vue-cli 编译时会报错   serve ended with error code 3221225477
有可能是Node.js的版本不兼容。卸载后安装稳定版的Node.js可以解决



]]></description><category></category></item><item><title><![CDATA[Vuex的基本概念与使用方法]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/106786591</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/106786591</guid><author>wmiaopas</author><pubDate>Tue, 16 Jun 2020 20:47:52 +0800</pubDate><description><![CDATA[Vuex是什么
    Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享

使用Vuex统一管理数据的好处
① 能够在Vuex中集中管理共享的数据，易于开发和后期维护
②能够高效的实现组件之间的数据共享，提高开发效率
③储存在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据适合存储到Vuex中
  一般情况下，只有组件之间共享的数据，才有必要存储到Vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可

核心概念概述
Vuex中的核心]]></description><category></category></item><item><title><![CDATA[使用图形化界面创建vue项目]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/104541944</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/104541944</guid><author>wmiaopas</author><pubDate>Thu, 27 Feb 2020 20:10:32 +0800</pubDate><description><![CDATA[在命令行窗口输入vue ui
按下回车后会自动在浏览器中打开图形化界面

点击创建可以选择创建项目的文件夹

点击在此创建新项目

只用填写项目名称和git的存储信息就好了

选择预设，第一次的话请手动



第一项是问你是否使用历史模式的router
第二项是问你lint的配置文件
第三项是问你什么时候校验语法

创好了 很简单

...]]></description><category></category></item><item><title><![CDATA[使用命令行创建vue项目]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/104535196</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/104535196</guid><author>wmiaopas</author><pubDate>Thu, 27 Feb 2020 17:26:22 +0800</pubDate><description><![CDATA[准备
首先需要安装vue-cli 
打开命令提示符输入
npm i -g @vue/cli

安装完成后就可以开始创建vue项目
1.基于命令行的方式创建vue项目
vue caeate project-name


2.基于图形化界面的方式创建vue项目
vue ui


开始创建项目
1.在终端中输入
vue create vue_project_01 

按下回车开始创建项目


2.此时会...]]></description><category></category></item><item><title><![CDATA[vue获取DOM元素]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/103934561</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/103934561</guid><author>wmiaopas</author><pubDate>Sat, 11 Jan 2020 11:15:13 +0800</pubDate><description><![CDATA[由于vue不推荐操作DOM节点所以最好不要使用原生的getElement方法
vue有一个reference属性
它能够获取DOM节点



在想要获取的节点上添加ref这个属性 ，这个节点就会被实例获取到
操作DOM节点
this.$refs.myp...


...]]></description><category></category></item><item><title><![CDATA[async/await的基本用法]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/103707053</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/103707053</guid><author>wmiaopas</author><pubDate>Fri, 27 Dec 2019 15:00:13 +0800</pubDate><description><![CDATA[async/await是ES7引入的新语法，可以更加方便的进行异步操作
async关键字用于函数上(async函数的返回值是Promise实例对象)


]]></description><category></category></item><item><title><![CDATA[axios用法]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/103688425</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/103688425</guid><author>wmiaopas</author><pubDate>Wed, 25 Dec 2019 22:45:49 +0800</pubDate><description><![CDATA[axios的基本特性
axios是一个基于Promise用于浏览器和node.js的HTTP客户端
它具有以下特性

支持浏览器和Node.js
支持Promise
能拦截请求和相应
自动转换JSON数据

axios.get('/url')
	.then(ret=&gt;{
	//data属性名称是固定的，用于获取后台相应的数据
	console.log(ret.data)
})


axios...]]></description><category></category></item><item><title><![CDATA[fetch用法]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/103649315</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/103649315</guid><author>wmiaopas</author><pubDate>Sat, 21 Dec 2019 23:08:59 +0800</pubDate><description><![CDATA[fetch概述
1.基本特性

更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版
基于Promise


2.语法结构
fetch(url).then(fn2)
		  .then(fn3)
		  ...
		  .catch(fn)


3.fetch的基本用法



...]]></description><category></category></item><item><title><![CDATA[Promise用法]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/103571445</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/103571445</guid><author>wmiaopas</author><pubDate>Sat, 21 Dec 2019 22:24:00 +0800</pubDate><description><![CDATA[Promise概述
Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。
使用Promise主要有以下好处：

可以避免多层异步调用嵌套问题（回调地狱）
Promise对象提供了简洁的API，使得控制异步操作更加容易


Promise用法

实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
resolve和reject两...]]></description><category></category></item><item><title><![CDATA[JavaScript中的闭包]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/100800406</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/100800406</guid><author>wmiaopas</author><pubDate>Mon, 25 Nov 2019 21:06:16 +0800</pubDate><description><![CDATA[闭包是一个拥有许多变量和绑定了这些变量的环境表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

在JavaScript中，所有的function都是一个闭包，不过一般来说，嵌套的function所产生的闭包更为强大，也就大部分时候所谓的闭包。

	
闭包的原理
JavaScript允许使用内部函数，即函数定义和函数表达式位于另一个函数的函数体内。而且这些内部函数可以访问它们所在的外部函...]]></description><category></category></item><item><title><![CDATA[JavaScript原型链]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/103236142</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/103236142</guid><author>wmiaopas</author><pubDate>Mon, 25 Nov 2019 12:53:03 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[flex布局]]></title><link>https://blog.youkuaiyun.com/wmiaopas/article/details/102894499</link><guid>https://blog.youkuaiyun.com/wmiaopas/article/details/102894499</guid><author>wmiaopas</author><pubDate>Mon, 04 Nov 2019 13:59:51 +0800</pubDate><description><![CDATA[flex布局原理
flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
 
●当我们为父盒子设置为flex布局以后，子元素的float、clear和vertical-align属性将失效
●伸缩布局=弹性布局=伸缩盒布局=弹性布局=flex布局 
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见父项属性
...]]></description><category></category></item></channel></rss>