<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[learn8more的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/learn8more</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; learn8more]]></copyright><item><title><![CDATA[Windows下安装vue开发环境]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/123540790</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/123540790</guid><author>learn8more</author><pubDate>Thu, 17 Mar 2022 01:38:31 +0800</pubDate><description><![CDATA[windows下安装vue开发环境
1、安装npm
官网node进行下载
Node.js 是一个开源与跨平台的JavaScript 运行时环境。


2、检测nodejs安装
当执行完上步安装包安装后，需要进行安装是否成功，win+r打开运行，输入cmd后进入命令行界面。分别输入node -v和npm -v命令进行node的版本号和npm的版本号的查看。

安装完后的目录如下图所示

3、配置npm安装全局模块路径与缓存路径
NPM是随同NodeJS一起安装的包管理工具

一般，在进行npm install]]></description><category></category></item><item><title><![CDATA[罗德里格斯旋转公式（Rodrigues‘ rotation formula）推导]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/117013474</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/117013474</guid><author>learn8more</author><pubDate>Wed, 19 May 2021 08:09:43 +0800</pubDate><description><![CDATA[本文综合了几个相关的维基百科，加了点自己的理解，从比较基础的向量投影和叉积讲起，推导出罗德里格斯旋转公式。公式比较繁杂，如有错误，欢迎评论区指出。

　　对于向量的三维旋转问题，给定旋转轴和旋转角度，用罗德里格斯（Rodrigues）旋转公式可以得出旋转后的向量。另外，罗德里格斯旋转公式可以用旋转矩阵表示，即将三维旋转的轴-角（axis-angle）表示转变为旋转矩阵表示。

向量投影（Vector projection）

　　向量a在非零向量b上的向量投影指的是a在平行于向量b的直线上的正交投影。结果是]]></description><category></category></item><item><title><![CDATA[MacOs系统  redis安装配置]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/111602942</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/111602942</guid><author>learn8more</author><pubDate>Thu, 24 Dec 2020 02:51:33 +0800</pubDate><description><![CDATA[wget http://download.redis.io/releases/redis-6.0.9.tar.gz



3.解压redis安装包

 tar -zxvfredis-5.0.4.tar.gz

4.进入redis目录

 cdredis-5.0.4

5.编译

 make

6.安装

 make PREFIX=/usr/local/redis install

7.拷贝redis.conf到安装目录

 cp redis.conf /usr/local/redi...]]></description><category></category></item><item><title><![CDATA[Mac安装Redis，详细redis安装步骤]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/111602873</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/111602873</guid><author>learn8more</author><pubDate>Thu, 24 Dec 2020 01:41:44 +0800</pubDate><description><![CDATA[官网地址:https://redis.io/download

一、安装流程

1、下载安装包


$ wget https://download.redis.io/releases/redis-6.0.9.tar.gz



2、解压


$ tar xzf redis-6.0.9.tar.gz



3、进入到解压后的 redis-6.0.9 目录


$ cd redis-6.0.9



4、编译Redis


$ make



5、启动Redis服务端


$ src/redis-se...]]></description><category></category></item><item><title><![CDATA[vue3创建流程备份1]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/111602805</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/111602805</guid><author>learn8more</author><pubDate>Thu, 24 Dec 2020 01:10:22 +0800</pubDate><description><![CDATA[? Please pick a preset: Manually select features

? Check the features needed for your project: Choose Vue version, Babel, TS, Rou

ter, Vuex, CSS Pre-processors, Linter, Unit

? Choose a version of Vue.js that you want to start the project with 3.x (Previ]]></description><category></category></item><item><title><![CDATA[sudo su 和 sudo -s区别]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/111602785</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/111602785</guid><author>learn8more</author><pubDate>Thu, 24 Dec 2020 01:03:43 +0800</pubDate><description><![CDATA[sudo su和sudo -s都是切换到root用户，不同的是：

sudo su环境用的是目标用户(root)的环境

sudo -s环境用的是当前用户本身的环境
]]></description><category></category></item><item><title><![CDATA[js图片随鼠标移动,旋转,拉伸]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/109641668</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/109641668</guid><author>learn8more</author><pubDate>Thu, 12 Nov 2020 13:06:19 +0800</pubDate><description><![CDATA[效果如图,图片可以跟随鼠标移动,旋转,拉伸,代码在谷歌浏览器和IE11验证了,其他浏览器没试过

本博客源码:https://github.com/shengbid/vue-demo把这个功能放在vue项目里了, 这个项目里会把平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈





我主要讲一下实现思路,

首先是移动,这个比较简单

这里我用的是鼠标事件的pageX,pageY,因为这个获取的是鼠标距文档左上角的坐标,不受滚动条影响




画一张图来演示

...]]></description><category></category></item><item><title><![CDATA[Canvas有哪些js库值得推荐？]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/108272100</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/108272100</guid><author>learn8more</author><pubDate>Fri, 28 Aug 2020 06:05:03 +0800</pubDate><description><![CDATA[Canvas有哪些js库值得推荐？


&lt;span class="RichText ztext CopyrightRichText-richText" itemprop="text"&gt;&lt;p&gt;相关的框架其实挺多的，但一般都有它适合使用的场景，看你要做什么东西，比如数据可视化还是可交互的H5应用或者别的，给一个不完全推荐好了：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="https://link.zhihu.com/?target=https%3A/]]></description><category></category></item><item><title><![CDATA[2020-08-19]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/108093297</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/108093297</guid><author>learn8more</author><pubDate>Wed, 19 Aug 2020 09:37:47 +0800</pubDate><description><![CDATA[在TypeScript + Vue项目中实现一个酷炫的Canvas运动背景，实现代码如下：




&lt;template&gt;
 &lt;div id="main"&gt;
  &lt;div id="bg-main"&gt;
   &lt;canvas id="bg"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/template&gt;
​
&lt;script lang="ts"&gt;
import V...]]></description><category></category></item><item><title><![CDATA[为网页实现mini-map效果]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/108091204</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/108091204</guid><author>learn8more</author><pubDate>Wed, 19 Aug 2020 00:30:19 +0800</pubDate><description><![CDATA[minimap效果的实现

在项目中，需要制作出缩略图的效果。效果如下：





minimap效果.gif

在firefox可以使用 element属性实现该效果。（其它浏览器暂不支持）。这里使用iframe来达到更好的兼容性。

效果分析

minimap主要是对主体内容进行映射。主体html如下：




&lt;body&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;
            文章内容
        &lt;/p&..]]></description><category></category></item><item><title><![CDATA[详细介绍scrollIntoView（）方法属性]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/108047794</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/108047794</guid><author>learn8more</author><pubDate>Mon, 17 Aug 2020 02:47:43 +0800</pubDate><description><![CDATA[因为工作中用到了锚点设置，常用的总是出问题，后来扒拉出了这个属性，详细研究了下方便日后使用

介绍scrollIntoView（）的详细属性

简介

该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。

PS：根据其他元素的布局，元素可能无法完全滚动到顶部或底部。

TIPS：页面（容器）可滚动时才有用！

语法


element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoV]]></description><category></category></item><item><title><![CDATA[js原生之scrollTop、offsetHeight和offsetTop等属性用法详解]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/108047685</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/108047685</guid><author>learn8more</author><pubDate>Mon, 17 Aug 2020 01:40:20 +0800</pubDate><description><![CDATA[scrollTop、offsetHeight和offsetTop等属性用法详解:
标题中的几个相关相关属性在网页中有这大量的应用，尤其是在运动框架中，但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题，导致掌握起来比较有难度，下面就介绍一下相关属性的用法。
先来看一张比较经典的示意图:



下面结合各上图介绍一下各个属性的作用:
一.offsetTop属性:
此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是p]]></description><category></category></item><item><title><![CDATA[CSS3实现10种Loading效果]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/108017777</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/108017777</guid><author>learn8more</author><pubDate>Sat, 15 Aug 2020 09:09:40 +0800</pubDate><description><![CDATA[昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

第1种效果：



代码如下：




&lt;div class="loading"&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;span&gt;]]></description><category></category></item><item><title><![CDATA[vue3.0 已经废弃slot， vue3.0 更改之前slot正确方法介绍]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/108017053</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/108017053</guid><author>learn8more</author><pubDate>Sat, 15 Aug 2020 03:04:54 +0800</pubDate><description><![CDATA[子组件写法如下


&lt;template&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;默认插槽：&lt;/th&gt;
      &lt;td&gt;&lt;slot /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;具名插槽：&lt;/th&gt;
      &lt;td&gt;&lt;slot name="footer" /&gt;&lt;/td&gt;
...]]></description><category></category></item><item><title><![CDATA[Vue3.0实践：使用Vue3.0做JSX(TSX)风格的组件开发]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/107970726</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/107970726</guid><author>learn8more</author><pubDate>Thu, 13 Aug 2020 03:04:09 +0800</pubDate><description><![CDATA[前言

我日常工作都是使用React来做开发，但是我对React一直不是很满意，特别是在推出React Hooks以后。

不可否认React Hooks极大地方便了开发者，但是它又有非常多反直觉的地方，让我难以接受。所以在很长一段时间，我都在尝试寻找React的替代品，我尝试过不少别的前端框架，但都有各种各样的问题或限制。

在看到了Vue 3.0Composition-API的设计，确实有眼前一亮的感觉，它既保留了React Hooks的优点，又没有反复声明销毁的问题，而Vue一直都是支持JSX语法..]]></description><category></category></item><item><title><![CDATA[vue3.0里的vue.config.js配置信息完整版，vue3.0  build发布，proxy,跨域访问设置等]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/107873697</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/107873697</guid><author>learn8more</author><pubDate>Sat, 08 Aug 2020 01:38:17 +0800</pubDate><description><![CDATA[vue3.0里的vue.config.js配置信息完整版：vue3.0 build发布，proxy,跨域访问设置等

如果没有 vue.config.js 那么自己就在根目录建一个vue.config.js文件

先让我们来看看精简版


const path = require("path");
const resolve = function(dir) {
  return path.join(__dirname, dir);
};
module.exports = {
  publicPath: p.]]></description><category></category></item><item><title><![CDATA[vue3.0项目 npm run build 编译]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/107873675</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/107873675</guid><author>learn8more</author><pubDate>Sat, 08 Aug 2020 01:22:10 +0800</pubDate><description><![CDATA[在项目根目录下新建文件vue.config.js文件，将下面的复制进去


module.exports={

publicPath:process.env.NODE_ENV==='production'?'./':'/',

outputDir:'dist',

lintOnSave:true,

runtimeCompiler:true,//关键点在这

//调整内部的webpack配置。

//查阅https://gi...]]></description><category></category></item><item><title><![CDATA[vue3.0 新建项目注意事项]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/107839230</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/107839230</guid><author>learn8more</author><pubDate>Thu, 06 Aug 2020 14:49:42 +0800</pubDate><description><![CDATA[1，3.0去除了 static, config , build 文件夹

2，新增了 public

3，自动依赖 node_modules

4，默认配置 webpack , 通过 vue.config.js来修改

5，命令 “ vue inspect ” 可查webpack 默认配置

6，内置了 vue-cli-service serve 服务

7，浏览器打开图形界面管理项目 ,命令 " vue ui " 查看
...]]></description><category></category></item><item><title><![CDATA[vue3.0 子组件调用父组件、父组件调用子组件]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/107829586</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/107829586</guid><author>learn8more</author><pubDate>Thu, 06 Aug 2020 01:22:02 +0800</pubDate><description><![CDATA[子组件调用父组件


父组件

&lt;my-childe ref="RefChilde" @update:FatherTalk="FatherTalk"&gt;&lt;/my-childe&gt;


子组件调用

setup(props, context) {

// ....
  function fnCallFather () {
        
    // 关键
    context.emit('update:FatherTalk', pathChildName);
  }

}



..]]></description><category></category></item><item><title><![CDATA[提前熟悉Vue3.0 + Ts]]></title><link>https://blog.youkuaiyun.com/learn8more/article/details/107825311</link><guid>https://blog.youkuaiyun.com/learn8more/article/details/107825311</guid><author>learn8more</author><pubDate>Wed, 05 Aug 2020 21:15:23 +0800</pubDate><description><![CDATA[3.0的目标

更小
	更快
	加强 TypeScript 支持
	加强 API 设计一致性
	提高自身可维护性
	开放更多底层功能
什么是Hooks？

hooks翻译过来是钩子的意思，这个可能有一些模糊，简单点说hooks就是一个函数（可以复用的函数）例如：业务中很难避免的一个问题就是-- 逻辑复用，同样的功能，同样的组件，在不一样的场合下，我们有时候不得不去写2+次，为了避免耦合我们出现了一些概念（mixin，高级组件，slot插槽）。
上述这些方法都可以实现逻辑上的复用，但是都有一些额外的问题:..]]></description><category></category></item></channel></rss>