<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[七的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Zgtby</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Zgtby]]></copyright><item><title><![CDATA[电商后台管理项目的优化与上线]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/118148138</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/118148138</guid><author>Zgtby</author><pubDate>Wed, 23 Jun 2021 12:00:04 +0800</pubDate><description><![CDATA[项目优化与上线项目优化策略实现步骤：1、生成打包报告，根据报告优化项目①手动生成（命令行加参数）②通过可视化的UI面板2、为开发模式与发布模式指定不同的打包入口3、通过 vue.config.js 修改 webpack 的默认配置4、第三方库启用CDN5、通过 CDN 优化 ElementUI 的打包6、路由懒加载7、首页内容定制项目上线1、通过node创建服务器2、开启GZIP压缩3、配置https服务4、使用pm2管理应用
项目优化策略实现步骤：
1、生成打包报告，根据报告优化项目
①手动生成（命令行加]]></description><category></category></item><item><title><![CDATA[[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/118083001</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/118083001</guid><author>Zgtby</author><pubDate>Mon, 21 Jun 2021 11:28:08 +0800</pubDate><description><![CDATA[前两天在使用ECharts图表的时候遇到了以下报错：

报错原因：echarts的引入方式错误
正确的echarts引入方式：
let echarts = require('echarts')

这样问题就得以解决了。

]]></description><category></category></item><item><title><![CDATA[vue-双向数据绑定原理]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117964753</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117964753</guid><author>Zgtby</author><pubDate>Wed, 16 Jun 2021 18:58:02 +0800</pubDate><description><![CDATA[vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
具体步骤：
第一步：
需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：
compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每]]></description><category></category></item><item><title><![CDATA[ifram优缺点]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117817616</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117817616</guid><author>Zgtby</author><pubDate>Fri, 11 Jun 2021 15:08:31 +0800</pubDate><description><![CDATA[HTML5不再支持使用frame，iframe只有src 属性

一、使用iframe的优缺点
优点:
1、程序调入静态页面比较方便;
2、页面和程序分离;
缺点：
1、iframe有不好之处：样式/脚本需要额外链入，会增加请求。
另外用js防盗链只防得了小偷，防不了大盗。
2、iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你
的网站即使做的在好,也排不到好的名次!
如果是动态网页，用include还好点！
但是必须要去除他的&lt; html&gt;&l.]]></description><category></category></item><item><title><![CDATA[js异步中的宏任务和微任务]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117790451</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117790451</guid><author>Zgtby</author><pubDate>Thu, 10 Jun 2021 21:20:47 +0800</pubDate><description><![CDATA[宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务比宏任务的执行时间要早

异步和单线程
异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助
异步和同步的区别:
异步不会阻塞程序的执行。
同步会阻塞程序的执行。
同步异步问题
首先，你要知道javascript是单线程语言。js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着，但是，假如我们需要浏览新闻，但新闻包含的超清图片加载很慢，总不.]]></description><category></category></item><item><title><![CDATA[如何在项目中修改element-ui的默认样式]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117784924</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117784924</guid><author>Zgtby</author><pubDate>Thu, 10 Jun 2021 16:58:14 +0800</pubDate><description><![CDATA[平时我们在项目中经常会用到element-ui里的组件比如导航栏，表格，按钮等，有时候会根据需要修改element-ui的默认样式。]]></description><category></category></item><item><title><![CDATA[使用elemeng-ui 中el-form 表单校验的三种方式]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117694919</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117694919</guid><author>Zgtby</author><pubDate>Wed, 09 Jun 2021 15:57:56 +0800</pubDate><description><![CDATA[表单校验是注册环节中必不可少的操作，表单校验通过一定的规则来确保用户提交数据的有效性，能够防止用户因为操作有误、填写错误数据或者恶意提交数据而占用服务器资源。]]></description><category></category></item><item><title><![CDATA[vue项目打包上线流程（nginx服务器配置、路由history模式白屏如何处理）]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117694893</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117694893</guid><author>Zgtby</author><pubDate>Tue, 08 Jun 2021 12:00:28 +0800</pubDate><description><![CDATA[Vue打包上线流程

]]></description><category></category></item><item><title><![CDATA[webpack打包优化]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117528981</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117528981</guid><author>Zgtby</author><pubDate>Tue, 08 Jun 2021 11:16:41 +0800</pubDate><description><![CDATA[项目开始时webpack配置

vue-cli3以后，需要自己在项目根路径下创建vue.config.js文件来修改webpack配置。

一、 配置 proxy 跨域

使用vue-cli开发项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy来解决跨域问题：

module.exports = {
  devServer: {
   open: false, // 自动启动浏览器
   host: '0.0.0.0', // localhost
   port: 6060, // 端口号
]]></description><category></category></item><item><title><![CDATA[使用gitee生成ssh key 时无法生成（精华版解决方法）]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117667902</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117667902</guid><author>Zgtby</author><pubDate>Mon, 07 Jun 2021 17:19:25 +0800</pubDate><description><![CDATA[当我们需要操作git生成 ssh 密钥时，遇到一下问题：
一、id_rsa.pub 这个文件打不开

二、Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\ASUS/.ssh/id_rsa):
解决方法如下：

接着在cmd里输入 type id_rsa.pub

接着直接在cmd里面复制内容就可以去粘贴使用了

...]]></description><category></category></item><item><title><![CDATA[关于vant--ui按需引入的详解]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117526965</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117526965</guid><author>Zgtby</author><pubDate>Thu, 03 Jun 2021 16:30:39 +0800</pubDate><description><![CDATA[一、安装vant–ui
npm install vant --save-dev  //安装vant
npm install element-ui --save-dev  //安装element-ui

二、全局引入
// 在src/main.js进行全局引入
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(vant)

三、按需引入
import Button from 'vant/lib/button'
import]]></description><category></category></item><item><title><![CDATA[vue-router的鉴权和守卫(精华版）]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117470397</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117470397</guid><author>Zgtby</author><pubDate>Wed, 02 Jun 2021 16:05:03 +0800</pubDate><description><![CDATA[vue-router一、怎么理解vue-router二、实现鉴权的方式分两种：1、通过vue-router addRoutes 方法注入路由实现控制2、通过vue-router beforeEach 钩子限制路由跳转三、路由守卫第一种是全局的守卫 守卫所有的页面第二种是组件级守卫 守卫某一个页面1、路由进入之前2、路由更新之前3、路由离开之前第三种是单个路由独享的钩子函数
一、怎么理解vue-router
路由导航守卫
又叫路由的钩子函数又叫路由的生命周期函数
就是路由 从开始进入路径到跳转结束这个过程中 ]]></description><category></category></item><item><title><![CDATA[axios拦截和api统一管理]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117463835</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117463835</guid><author>Zgtby</author><pubDate>Wed, 02 Jun 2021 11:53:53 +0800</pubDate><description><![CDATA[axios拦截器

axios拦截分为请求拦截和相应拦截。
首先要安装axios，一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url。

一、对axios进行基础配置
import axios from 'axios';  // 该处引入axios模块

// 构建axios实例
const instance =]]></description><category></category></item><item><title><![CDATA[多环境变量配置详解]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117461564</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117461564</guid><author>Zgtby</author><pubDate>Wed, 02 Jun 2021 10:24:45 +0800</pubDate><description><![CDATA[vuecli3.0搭建的vue项目。配置多个环境变量
新建两个或多个文件，和package.json同级；例如：.env.dev，.env.prod
通过 npm run serve 启动本地 , 执行 development
通过 npm run stage 打包测试 , 执行 staging
通过 npm run build 打包正式 , 执行 production
 
"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": ]]></description><category></category></item><item><title><![CDATA[去哪儿项目开发流程]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117461107</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117461107</guid><author>Zgtby</author><pubDate>Wed, 02 Jun 2021 10:12:16 +0800</pubDate><description><![CDATA[一、准备项目所需技术栈
vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack
二、项目搭建
&gt; yarn，npm(cnpm) 包管理工具
yarn add axios -S
cnpm install axios -S
-S: --save-dev 生产环境的依赖 （dependencies）
-D: --dev 开发环境的依赖 （devDependencies）

①从零开始搭建
要执行的命令行
vu]]></description><category></category></item><item><title><![CDATA[关于transition过渡的详解]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117452771</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117452771</guid><author>Zgtby</author><pubDate>Tue, 01 Jun 2021 21:14:51 +0800</pubDate><description><![CDATA[一、transition的作用
transition组件用于控制组件、元素的显示消失切换效果。
二、定义过渡类名
【初始状态】 v-enter
【过渡状态】 v-enter-active
【结束状态】 v-leave-to
【过渡状态】 v-leave-active

/*初始状态*/
.animation-enter{
    opacity:0;
  	transtion:translateX(-400px) rotate(360deg);
    /* 初始状态：
    透明度为0
    div左]]></description><category></category></item><item><title><![CDATA[关于Keep-alive的认识和具体用法]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117450908</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117450908</guid><author>Zgtby</author><pubDate>Tue, 01 Jun 2021 20:42:23 +0800</pubDate><description><![CDATA[一、keep-alive是什么
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置以下属性：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。除了名称匹配的组件不会被缓存，其他组件都会被缓存
max - 数字。最多可以缓存多少组件实例
二、keep-alive使用场景
当我们在切换路由需要保存失]]></description><category></category></item><item><title><![CDATA[关于事件委托的理解]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117405430</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117405430</guid><author>Zgtby</author><pubDate>Sun, 30 May 2021 21:15:04 +0800</pubDate><description><![CDATA[事件委托的理解：
事件委托：（也叫事件代理）就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
JS里的事件委托：就是当事件触发时，把要做的事委托给父元素来处理。
传统js下的事件委托
//html中的代码
&lt;ul&gt;
	&lt;li class="item"&gt;item 1&lt;/li&gt;
	&lt;li class="item"&gt;item 2&lt;/li&gt;
	&lt;li class="item"&gt;item 3&lt;/li&gt;
	&lt]]></description><category></category></item><item><title><![CDATA[关于闭包的理解]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117405113</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117405113</guid><author>Zgtby</author><pubDate>Sun, 30 May 2021 20:44:20 +0800</pubDate><description><![CDATA[什么是闭包：
闭包就是能够读取其他函数内部变量的函数。
其本质是函数的作用域链中保存着外部函数变量对象的引用。

闭包的应用场景：
1、函数作为参数被传递时使用
2、函数作为返回值被返回时使用
3、实际应用（隐藏数据）：为什么说隐藏数据了呢，因为普通用户只能通过get、set等api对数据进行查看和更改等操作，没法对data直接更改，达到所谓隐藏数据的效果；jquery就利用了这一特性，必须调用$.ajax()才能访问内部属性方法。
4、功能封装时使用
5、函数防抖、函数节流
6、单例模式
闭包的优点：
1]]></description><category></category></item><item><title><![CDATA[var、let和const的区别]]></title><link>https://blog.youkuaiyun.com/Zgtby/article/details/117404807</link><guid>https://blog.youkuaiyun.com/Zgtby/article/details/117404807</guid><author>Zgtby</author><pubDate>Sun, 30 May 2021 20:25:05 +0800</pubDate><description><![CDATA[var、let和const的区别：
1、var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2、let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3、const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。


...]]></description><category></category></item></channel></rss>