<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ScreenshotOfSeed的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ScreenshotOfSeed</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ScreenshotOfSeed]]></copyright><item><title><![CDATA[Nuxt3 -- 组件 Components]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121773447</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121773447</guid><author>ScreenshotOfSeed</author><pubDate>Tue, 07 Dec 2021 17:00:16 +0800</pubDate><description><![CDATA[相信大家在写组件的时候各种导入和注册操作重复去写肯定很烦，这点 Nuxt 中已经帮我们解决了，直接使用就行了。
自动导入组件
我们把Vue组件放在components/目录，这些组件可以被用在页面和其他组件中，以往我们使用这些组件需要导入并注册它们，但Nuxt会自动导入components/目录中的任意组件。比如：
| components/
--| TheHeader.vue
--| TheFooter.vue

layouts/default.vue:
&lt;template&gt;
  &lt;di]]></description><category></category></item><item><title><![CDATA[Nuxt3--布局模板]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121743263</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121743263</guid><author>ScreenshotOfSeed</author><pubDate>Mon, 06 Dec 2021 11:33:04 +0800</pubDate><description><![CDATA[默认布局
那些放在layouts/目录下的.vue文件会被自动加载进来，如果我们创建的.vue名为default.vue，将会被用于项目所有页面中作为布局模板。
layouts/default.vue：
&lt;template&gt;
  &lt;div&gt;
	default.vue:
    &lt;slot /&gt;
  &lt;/div&gt;
&lt;/template&gt;

这样页面就会直接出现default.vue文件内的内容了。
自定义布局
如果我们的布局文件名不叫default，]]></description><category></category></item><item><title><![CDATA[Nuxt3 -- 路由篇]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121694613</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121694613</guid><author>ScreenshotOfSeed</author><pubDate>Fri, 03 Dec 2021 11:24:24 +0800</pubDate><description><![CDATA[普通路由
nuxt3会自动整合vue-router，并且映射pages/目录到应用的routes配置中。
[
  {
    path: '/',
    component: '~/pages/index.vue',
    name: 'index',
  }
]

动态路由
如果我们在文件名或者文件夹名称里面包含了方括号，它们将被转换为动态路由参数。
-| pages/
---| users-[group]/
-----| [id].vue

然后通过  $route.params.group 通过 ]]></description><category></category></item><item><title><![CDATA[Nuxt3 持续学习 -- 【快速创建一个 Nuxt3 项目】]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121678602</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121678602</guid><author>ScreenshotOfSeed</author><pubDate>Thu, 02 Dec 2021 15:44:57 +0800</pubDate><description><![CDATA[创建项目
打开一个终端，或从Visual Studio Code打开一个集成终端，并使用以下命令创建一个新的启动器项目:
npx nuxi init nuxt3-app

注：node 版本需要高于 v14.16.0
进入项目文件夹安装依赖
yarn install

启动服务
yarn dev -o

浏览器会自动打开：http://localhost:3000
在nuxt3中如果没有pages/目录，则表示不会包含vue-router依赖。如果我们不需要路由或者就是一个落地页时就可以这么搞。
下面删除a]]></description><category></category></item><item><title><![CDATA[Nuxt3 持续学习]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121655625</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/121655625</guid><author>ScreenshotOfSeed</author><pubDate>Wed, 01 Dec 2021 15:25:52 +0800</pubDate><description><![CDATA[什么是 Nuxt？
Nuxt 的目标是让 Web 开发变得直观且高效 ，同时考虑到出色的开发人员体验。
为什么是 Nuxt？
要了解什么是 Nuxt，我们需要了解创建现代应用程序需要什么：
一个 JavaScript 框架带来了反应性和 web 组件，我们选择了Vue.js。
一个在开发中支持热模块替换并捆绑你的代码用于生产的捆绑器，我们支持Webpack 5和Vite。
为了在支持旧版浏览器的同时编写最新的 JavaScript 语法的转译器，我们为此使用了esbuild。
Nuxt为 开发中的应用程序提]]></description><category></category></item><item><title><![CDATA[我在工作中是如何使用 git 的]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/118100593</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/118100593</guid><author>ScreenshotOfSeed</author><pubDate>Tue, 22 Jun 2021 09:57:31 +0800</pubDate><description><![CDATA[前言
最近在网上有个真实发生的案例比较火，说的是一个新入职的员工，不会用 Git 拉代码，第二天被开除。由此，可见 Git 对我们工作的重要性，无论是前端后端，都是离不开 Git 的，下面就让我们一探究竟吧。
上面的案例引申出一个问题，入职一家新公司，你的 leader 给你分配了仓库的权限后，如何配置本地的 Git 环境并拉取代码？莫慌，按照下面我讲的四个步骤走，保证你可以顺利使用 Git 进行拉取代码！


下载 Git 下载地址 ，选择自己系统对应的版本下载即可。


在你的电脑上生成 ssh 秘钥，]]></description><category></category></item><item><title><![CDATA[JS阻止浏览器F5刷新]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/108213003</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/108213003</guid><author>ScreenshotOfSeed</author><pubDate>Tue, 25 Aug 2020 08:45:50 +0800</pubDate><description><![CDATA[阻止F5刷新
 stopF5Refresh() {
    document.onkeydown = function (e) {
        var evt = window.event || e;
        var code = evt.keyCode || evt.which;
        if (code == 116) {
            if (evt.preventDefault) {
                evt.preventDefault();
     ]]></description><category></category></item><item><title><![CDATA[最全Vue开发小技巧]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/107209246</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/107209246</guid><author>ScreenshotOfSeed</author><pubDate>Wed, 08 Jul 2020 17:44:04 +0800</pubDate><description><![CDATA[Vue开发小技巧

Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;
后续 Vue 3.x 出来后持续更新.

1.require.context()
1.场景:如页面需要导入多个组件,原始写法:
import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/com]]></description><category></category></item><item><title><![CDATA[JS获取当前年、月、星期的第一天和最后一天]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/106526318</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/106526318</guid><author>ScreenshotOfSeed</author><pubDate>Wed, 03 Jun 2020 15:59:55 +0800</pubDate><description><![CDATA[先封装日期格式化方法
// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==&gt; 2018-07-02 08:09:04.423
// (new Date()).Format("yyyy]]></description><category></category></item><item><title><![CDATA[vue 中如何保存登录的账号密码]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/103314734</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/103314734</guid><author>ScreenshotOfSeed</author><pubDate>Fri, 29 Nov 2019 17:24:35 +0800</pubDate><description><![CDATA[这个问题只要是网站设计到登录的都会涉及到

1.解决问题的思路
借助浏览器的存储功能来实现保存登录的账号和密码，使页面进来的时候就去读取是否有账号和密码。
2.直接代码演示拿来即用
created() {
    // 在页面加载时从cookie获取登录信息
    const username = this.getCookie('username')
    const password = ...]]></description><category></category></item><item><title><![CDATA[图片上传转base64码和base64码转图片回显]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/102931270</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/102931270</guid><author>ScreenshotOfSeed</author><pubDate>Wed, 06 Nov 2019 11:15:59 +0800</pubDate><description><![CDATA[直接上代码小demo是用在vue里边写的
&lt;template&gt;
  &lt;div&gt;
    &lt;input
      id="input"
      type="file"
      name="image"
      accept="image/jpg, image/jpeg, image/png"
      @change="changeImg($event)...]]></description><category></category></item><item><title><![CDATA[前端命名规范、配置规范、编辑器设置、编辑器快捷键、ESlint.js 配置]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/101375315</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/101375315</guid><author>ScreenshotOfSeed</author><pubDate>Wed, 25 Sep 2019 17:29:40 +0800</pubDate><description><![CDATA[命名
驼峰式命名法介绍


Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo


Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo


文件资源命名


文件名不得含有空格


文件名建议只使用小写字母，不使用大写字母。( 例：user )


文件名包...]]></description><category></category></item><item><title><![CDATA[JavaScript：内置对象介绍(Math/Date/ 数组/字符串)]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/101374307</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/101374307</guid><author>ScreenshotOfSeed</author><pubDate>Wed, 25 Sep 2019 17:15:50 +0800</pubDate><description><![CDATA[06JavaScript
内置对象介绍
☞  JavaScript组成：   ECMAScript  |   DOM   |  BOM

☞  ECMAScript：  变量 ， 函数， 数据类型 ，流程控制，内置对象。。。

☞  js中的对象： 自定义对象 ， 内置对象 ， 浏览器对象（不属于ECMAScript）

☞  Math对象，Array对象，Date对象。。。。
 
☞ 通过查文档...]]></description><category></category></item><item><title><![CDATA[ajax原生的js讲解和jquery讲解]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/101373781</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/101373781</guid><author>ScreenshotOfSeed</author><pubDate>Wed, 25 Sep 2019 17:02:04 +0800</pubDate><description><![CDATA[原生 JS
怎么发送一个 get 请求


创建一个 ajax 对象

var xhr = new XMLHttpRequest()



设置请求方式和请求地址[，是否异步]

xhr.open('get', '/ajax'[, true or fasle])



准备接受请求体

xhr.onload = function () { console.log(xhr.responseText)...]]></description><category></category></item><item><title><![CDATA[数组函数forEach()、map()、filter()、includes()、find()、every()、some()的使用]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/101371589</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/101371589</guid><author>ScreenshotOfSeed</author><pubDate>Wed, 25 Sep 2019 16:53:41 +0800</pubDate><description><![CDATA[1. forEach()
遍历数组全部元素，利用回调函数对数组进行操作，自动遍历数组.length次数
示例：
 var arr = [6, 5, 4];
 var total = 0;
 arr.forEach(function(value, index, arr) {
    console.log('当前值：' + value);
    console.log('当前值对应的索引：' + ...]]></description><category></category></item><item><title><![CDATA[Vue-cli  seo  使用prerender-spa-plugin插件预渲染]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/98027792</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/98027792</guid><author>ScreenshotOfSeed</author><pubDate>Thu, 01 Aug 2019 10:28:08 +0800</pubDate><description><![CDATA[使用vue-cli打包项目一般为spa项目，众所周知单页面应用不利于SEO，有ssr(服务端渲染)和预渲染两种解决方案，这里我们只讨论预渲染

vue-cli有2.0和3.0版本，解决方法是不一样的，我们要分开讨论。
vue-cli2.0版本
1.安装
npm install prerender-spa-plugin --save

2.webpack.prod.conf.js增加部分代码
co...]]></description><category></category></item><item><title><![CDATA[vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/98033144</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/98033144</guid><author>ScreenshotOfSeed</author><pubDate>Thu, 01 Aug 2019 10:25:31 +0800</pubDate><description><![CDATA[如需使用 vue-meta-info 配置title和meta按照以下步骤：
1.安装
npm install vue-meta-info --save

2.在main.js引入
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

3.在vue页面配置
&lt;template&gt;
  ...
&lt;/template&gt;
 ...]]></description><category></category></item><item><title><![CDATA[vue 移动端 cli3.0 build 打包低版本浏览器兼容性]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/97271926</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/97271926</guid><author>ScreenshotOfSeed</author><pubDate>Thu, 25 Jul 2019 16:35:45 +0800</pubDate><description><![CDATA[现代模式
有了 Babel 我们可以兼顾所有最新的 ES2015+ 语言特性，但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015+ 代码会更冗长，运行更慢。现如今绝大多数现代浏览器都已经支持了原生的 ES2015，所以因为要支持更老的浏览器而为它们交付笨重的代码是一种浪费。
Vue CLI 提供了一个“现代模式”帮你解决这个问题。以如下...]]></description><category></category></item><item><title><![CDATA[外网穿透 ngrok win]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/94642766</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/94642766</guid><author>ScreenshotOfSeed</author><pubDate>Thu, 04 Jul 2019 18:47:44 +0800</pubDate><description><![CDATA[外网穿透 ngrok win
1.安装使用
下载链接

windows 版本选择32位就可以


2.下载完 后解压
3.cmd 下 cd 到 解压 目录
4.执行命令 ngrok http 端口号 以配置口为准

例如：
ngrok http 8050

最后执行成功后下图箭头就是你得内网代理域名：其中一个就可以

最后问题：vue-cli 新版本中 会默认会开启主机检查 外网访问不了
解决方法...]]></description><category></category></item><item><title><![CDATA[使用vue-cli3.0搭建适配移动端的项目]]></title><link>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/94641782</link><guid>https://blog.youkuaiyun.com/ScreenshotOfSeed/article/details/94641782</guid><author>ScreenshotOfSeed</author><pubDate>Thu, 04 Jul 2019 18:39:41 +0800</pubDate><description><![CDATA[使用vue-cli3.0搭建适配移动端的项目
适配移动端，禁止用户缩放页面
meta标签中的content属性里有一个width=device-width的值，这个值就是用来告诉浏览器，该页面将要使用设备的宽度来解析，后面的属性值则是告诉该页面：
user-scalable=no  禁止用户缩放页面
initial-scale=1.0 页面初始倍数为1倍
maximum-scale=1.0 页面可...]]></description><category></category></item></channel></rss>