不再犹豫
分享是一种美德
        找回密码

首页 第7页

去分类设置中添加分类描述吧

deepin和UOS sunpinyin 皮肤添加

mrnaas阅读(2945)

喜欢比较简洁的输入法皮肤，所以搜资料，搜文章找到几个朋友做的皮肤，下面我写一下如何添加：

cd /usr/share/fcitx/skin
#这个目录下的文件就是各种皮肤文件

然后可以把对应的你喜欢的皮肤文件放到这里边，以下我分享几个：

链接: https://pan.baidu.com/s/1Bhqj0Gk3VFgjHp-k5lA_ZA

提取码获取方法：

关注公众号发送：输入法皮肤

桌面壁纸的deepin或者uos水印如何去除

mrnaas阅读(4898)

今天更新uos系统后突然发现桌面壁纸新增了 水印logo,于是查了查,有其他人遇到过并解决了,为了方便以后再发生,记录到自己的博客.

具体解决办法如下:

第一种:

cd /usr/share/deepin

找到dde-desktop-watermask.json 文件并复制一份,然后打开dde-desktop-watermask.json

{
    "isMaskAlwaysOn": true,
    "maskLogoUri" : "/usr/share/deepin/uos_logo.svg",(将这一行删除之后保存重启或者注销水印即可删除)
    "maskLogoLayoutAlign" : "center",
    "maskLogoWidth": 128,
    "maskLogoHeight": 48,
    "maskText" : "",
    "maskTextLayoutAlign" : "center",
    "maskTextColor" : "#04d5f7",
    "maskTextFontSize": "22px",
    "maskTextAlign": "center",
    "maskTextWidth": 0,
    "maskTextHeight": 0,
    "maskLogoTextSpacing": 0,
    "maskWidth": 128,
    "maskHeight": 48,
    "xRightBottom": 60,
    "yRightBottom": 98

}

第二种:

cd /usr/share/deepin

将这个目录下的uos_logo.svg删除,重启或者注销即可!

欢迎大家关注公众号：

Vue常用指令001

mrnaas阅读(2471)

Vue.js的指令是指v-开头，作用于html标签，提供一些特殊的特性，当指令被绑定到html元素的时候，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成html的一种属性；

（1）v-text：

数据绑定标签，将vue对象data中的属性绑定给对应的标签作为内容显示出来，类似js的text属性；

（2）v-html：

类似v-text标签，他是将data的属性作为html语法输出，类似js中的innerHtml属性；

（3）v-on：==@ methods:{}

缩写 @
参数：event

给dom添加一个事件监听

 

计数器实例：

<html>

<head>


<meta charset="utf-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>计数器</title>

</head>

<body>

    <div id="app">
    
        <div>

​            <button @click="sub">-</button>

​            <span>{{num}}</span>

​            <button @click="add">+</button>

​        </div>

​    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>


​    var app = new Vue({

​        el: '#app',

​        data:{

​            num:1

​        },

​        methods:{

​            sub:function(){

​                if(this.num > 0){

​                    this.num--

​                }else{

​                    alert('最小值为0！')

​                }

​            },

​            add:function(){

​                if(this.num < 10){

​                    this.num++

​                }else{

​                    alert('最大值为10！')

​                }

​            },

​        }

​    })

</script>

</body>

</body>

</html>

（4）v-show：

根据表达式的真假来切换所绑定的dom的display属性

(5)v-if and v-else and v-else-if

  • v-if v-if和v-show功能差不多，都是用来控制dom的显隐，用法也一样，只是原理不同，当v-if=”false”时，dom被直接删除掉；为true时，又重新渲染此dom；
  • v-else v-else用来表示v-if=””的else情况
  • v-else-if
综上 if， else， else if，都是用来控制显隐的

v-show 和 v-if 区别：

v-if 删除/添加页面的Dom元素，所v-if 有更高的切换消耗。

v-show切换css的display属性，因此有较高的初始化渲染消耗。

因此:–> 如果需要频繁切换的需求场景v-show比较合适,反之v-if 较好。

(6)v-bind

缩写 ：
参数 ： attr/Prop (optional)

用于将vue的值绑定给对应dom的属性值

实例 图片切换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片切换</title>
</head>
<body>
    <div id="mask">
        <div>
            <a href="javascript:void(0)" v-show="index!=0" @click="prev">《</a>
            <a href="javascript:void(0)" v-show="index<imgsrc.length-1" @click="next">》</a>
            <img :src="imgsrc[index]" alt="">
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#mask',
        data:{
            imgsrc:[
                './images/001.png',
                './images/002.png',
                './images/003.png',
                './images/004.png'
            ],
            index:0
        },
        methods:{
            prev:function(){
                this.index--
            },
            next:function(){
                this.index++
            },
        }
    })
</script>
</body>
</body>
</html>

欢迎大家关注公众号：

Vue学习笔记001

mrnaas阅读(1573)

1、Vue作用域（4个）：

  • 全局作用域Vue 应用程序中的全局作用域与任何编程语言中的全局作用域类似，这些变量在应用程序中的任何地方都是可用的。可以把全局作用域看作应用程序作用域，因为它将作用域限制为整个应用程序。
  • 子树作用域大多数时候，全局范围有点像大锤，我们需要一些更精确的东西。子树作用域中的变量作用域是应用程序的特定部分，而不是整个应用程序。此级别的作用域可能是最少使用的，但是在确实需要使用时非常方便。通常，一组组件需要共享很多相同的数据，并且通过props传递数据非常繁琐。
  • 组件作用域更具体一点，组件作用域使变量可用于单个组件。但是这不应该与更具体的实例作用域相混淆。如果一个变量具有组件作用域，那么它就是一个组件的所有实例都可以使用的单个变量。我们可以拥有几个相同的组件，并且它们都能够访问相同的变量。你可能熟悉 JS 中的模块作用域。在单个模块或文件中定义的任何内容都属于相同的模块作用域。由于组件是在单个文件中定义的，所以组件中的所有内容都在相同的模块作用域内。
  • 实例作用域：el挂载点的内部实例作用域是我们可以获得的Vue作用域变量最常见形式，具有实例作用域的任何变量仅可用于组件的特定用法。我们通常将其称为内部状态，有时也称为局部状态。

2、是否可以使用其他选择器：id class 标签 建议使用id，因为id是唯一的

3、可以设置其他的双标签dom元素，不能使用html和body

4、Vue中用到的数据需要定义在data中，可以编写复杂类型的数据

参考文章：https://blog.csdn.net/qq449245884/article/details/105062071

欢迎大家关注公众号：

测试网站访问速度的5个方法

mrnaas阅读(2088)

网页载入速度对于一个网站来讲很关键，Google已经将一个网站的载入速度列入了网站关键字排名的考虑因素当中，也就是说如果你的网站有足够的内容，而且载入速度比别人的网站更快一步的话，那么你就是获得更好的排名。那么下面就赶快测试你的网站，提高网站访问速度吧。

1：用Ping命令简单测网站速度的方法


Ping可以用来检查网络是否通畅或者网络连接速度，点击开始→运行 在运行中输入“cmd”回车或点击确定，输入ping www.你的网址.com 就可以了。

Ping结果属于表示，bytes表示发送多少字节，time是时间，时间越小速度越快，TTL可以判断对方操作系统，TTL=119是XP系统，但TTL一般不准，服务器可以修改注册表更改TTL类型，更详细测速的办法，请多多搜索。

新手只需看最下面一行即可，最短时间、最长时间和平均时间（时间越短越好），这样你就能大致判断出网站的速度了。

同样，站长之家的ping工具也不错，网址：http://ping.chinaz.com/

2：用tracert命令简单测网站速度的方法

测试方法和ping命令类似，只是ping换成tracert www.你的网址.com， tracert就是用来检测从终端客户到你的服务器所在机房的“跳数”和响应时间，也就是测试出服务器与全国各地客户的连接速度，当到达任何一个网关的时候，tracert会进行三次测试，并把三次测试的结果以ms为单位显示，当然time时间越短越好。

3：全方位的免费网站速度测试工具 — GTmetrix

gtmetrix.com提供了丰富的详细的测量结果，它结合了Google Page Speed和Yahoo！ YSlow的网页速度测试功能，并且提供可行的建议帮你改善网站速度。无需注册为会员即可使用该工具，并建议如何来优化网页中每个元素的，最重要的是会根据网站的具体情况，直接告诉你导致网站加载速度变慢的根源在哪里。

做为GTmetrix注册会员，你可以设置每天、每周或每月自动测试一次你的网站，可设置测试记录自动保存，还能够同时对4个网址进行对比测试。如果你不知道自己的载入速度到底是快还是慢，你可以输入一个名站来对比结果，比如Google.com

网址：http://gtmetrix.com

4：比较哪个网站载入速度较快 — WhichLoadsFaster

2010年7月7日，FastSoft推出免费动态网站加速互动演示网站 WhichLoadsFaster.com WhichLoadsFaster是一个免费公开网速测试工具，用以促进Web网站间良性竞争让网页浏览速度更快。

它是通过你的连接，在你的浏览器里，让两个真实的网页在你面前展示出来。所以使用WhichLoadsFaster是反应当前你的网络下来对比两个站的速度的。

网址：http://whichloadsfaster.com/

5：国内免费的网站速度测试平台 — WebKaka

这个网站是卢松松一直在用的，卡卡网是国内的一家帮你测试网站页面载入速度的免费站长工具，即时检测你的网站在全国各地访问的有效性、响应时间以及打开速度，目前在全国15个省市、美国、澳大利亚、日本等8个国家均设有检测点。此类网站速度测试工具基本都是国外的，国内的测速服务还比较少。卡卡网主要有网站速度测试、ping检测、路由追踪等功能。

网址：http://www.webkaka.com



里面的网址我已经收录到博客大全的实用工具中了，当然还有其他很不错的在线网速测试的网站，比如speedtest.cn，speedtest.net等，同时，在你选择网站空间时，能用到本文的一些小方法，相信对你选择物美价廉的空间是个不错的办法。

欢迎大家关注公众号：

 

转载：http://blog.csdn.net/zzw945/article/details/6598788

本文转自 boy461205160 51CTO博客，原文链接:http://blog.51cto.com/461205160/1735298

使用hexo+github搭建免费个人博客详细教程

mrnaas阅读(1829)

1、前言

使用github pages服务搭建博客的好处有：

  • 全是静态文件，访问速度快；
  • 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
  • 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；
  • 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
  • 博客内容可以轻松打包、转移、发布到其它平台；
  • 等等；

1.1. 准备工作

在开始一切之前，你必须已经：

  • 有一个github账号，没有的话去注册一个；
  • 安装了node.js、npm，并了解相关基础知识；
  • 安装了git for windows（或者其它git客户端）

本文所使用的环境：

  • Windows8.1
  • node.js@5.5.0
  • git@1.9.2
  • hexo@3.2.2

2、搭建github博客

2.1. 创建仓库

新建一个名为你的用户名.github.io的仓库，比如说，如果你的github用户名是test，那么你就新建test.github.io的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 http://test.github.io 了，是不是很方便？

由此可见，每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。

几个注意的地方：

  • 注册的邮箱一定要验证，否则不会成功；
  • 仓库名字必须是：username.github.io，其中username是你的用户名；
  • 仓库创建成功不会立即生效，需要过一段时间，大概10-30分钟，或者更久，我的等了半个小时才生效；

创建成功后，默认会在你这个仓库里生成一些示例页面，以后你的网站所有代码都是放在这个仓库里啦。

2.2. 绑定域名

当然，你不绑定域名肯定也是可以的，就用默认的 xxx.github.io 来访问，如果你想更个性一点，想拥有一个属于自己的域名，那也是OK的。

首先你要注册一个域名，域名注册以前总是推荐去godaddy，现在觉得其实国内的阿里云也挺不错的，价格也不贵，毕竟是大公司，放心！

绑定域名分2种情况：带www和不带www的。

域名配置最常见有2种方式，CNAME和A记录，CNAME填写域名，A记录填写IP，由于不带www方式只能采用A记录，所以必须先ping一下你的用户名.github.io的IP，然后到你的域名DNS设置页，将A记录指向你ping出来的IP，将CNAME指向你的用户名.github.io，这样可以保证无论是否添加www都可以访问，如下：

然后到你的github项目根目录新建一个名为CNAME的文件（无后缀），里面填写你的域名，加不加www看你自己喜好，因为经测试：

另外说一句，在你绑定了新域名之后，原来的你的用户名.github.io并没有失效，而是会自动跳转到你的新域名。

3、配置SSH key

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

用git bash执行如下命令：

$ cd ~/.ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git。

ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入setting ->Deploy keys -> New Deploy key：

将刚复制的内容粘贴到key那里，title随便填，保存。

3.1. 测试是否成功

$ ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：

Hi liuxianan! You’ve successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功！

此时你还需要配置：

$ git config --global user.name "liuxianan"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

具体这个配置是干嘛的我没仔细深究。

4、使用hexo写博客

4.1. hexo简介

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持Markdown格式，有众多优秀插件和主题。

官网： http://hexo.io
github: https://github.com/hexojs/hexo

4.2. 原理

由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo所做的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。

4.3. 注意事项

安装之前先来说几个注意事项：

  • 很多命令既可以用Windows的cmd来完成，也可以使用git bash来完成，但是部分命令会有一些问题，为避免不必要的问题，建议全部使用git bash来执行；
  • hexo不同版本差别比较大，网上很多文章的配置信息都是基于2.x的，所以注意不要被误导；
  • hexo有2种_config.yml文件，一个是根目录下的全局的_config.yml，一个是各个theme下的；

4.4. 安装

$ npm install -g hexo

4.5. 初始化

在电脑的某个地方新建一个名为hexo的文件夹（名字可以随便取），比如我的是F:\Workspaces\hexo，由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。

$ cd /f/Workspaces/hexo/
$ hexo init

hexo会自动下载一些文件到这个目录，包括node_modules，目录结构如下图：

$ hexo g # 生成
$ hexo s # 启动服务

执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到github去的：

hexo s是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容

第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章，默认的主题比较丑，打开时就是这个样子：

4.6. 修改主题

既然默认主题很丑，那我们别的不做，首先来替换一个好看点的主题。这是 官方主题。

个人比较喜欢的2个主题：hexo-theme-jekyll 和 hexo-theme-yilia。

首先下载这个主题：

$ cd /f/Workspaces/hexo/
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下载后的主题都在这里：

修改_config.yml中的theme: landscape改为theme: yilia，然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。

4.7. 上传之前

在上传代码到github之前，一定要记得先把你以前所有代码下载下来（虽然github有版本管理，但备份一下总是好的），因为从hexo提交代码时会把你以前的所有代码都删掉。

4.8. 上传到github

如果你一切都配置好了，发布上传很容易，一句hexo d就搞定，当然关键还是你要把所有东西配置好。

首先，ssh key肯定要配置好。

其次，配置_config.yml中有关deploy的部分：

正确写法：

deploy:
  type: git
  repository: git@github.com:twang211/twang211.github.io.git
  branch: master

错误写法：

deploy:
  type: github
  repository: https://github.com/twang211/twang211.github.io.git
  branch: master

后面一种写法是hexo2.x的写法，现在已经不行了，无论是哪种写法，此时直接执行hexo d的话一般会报如下错误：

Deployer not found: github 或者 Deployer not found: git

原因是还需要安装一个插件：

npm install hexo-deployer-git --save

其它命令不确定，部署这个命令一定要用git bash，否则会提示Permission denied (publickey).

打开你的git bash，输入hexo d就会将本次有改动的代码全部提交，没有改动的不会：

4.9. 保留CNAME、README.md等文件

提交之后网页上一看，发现以前其它代码都没了，此时不要慌，一些非md文件可以把他们放到source文件夹下，这里的所有文件都会原样复制（除了md文件）到public目录的：

由于hexo默认会把所有md文件都转换成html，包括README.md，所有需要每次生成之后、上传之前，手动将README.md复制到public目录，并删除README.html。

4.10. 常用hexo命令

常见命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令：

hexo s -g #生成并本地预览
hexo d -g #生成并上传

4.11. _config.yml

这里面都是一些全局配置，每个参数的意思都比较简单明了，所以就不作详细介绍了。

需要特别注意的地方是，冒号后面必须有一个空格，否则可能会出问题。

4.12. 写博客

定位到我们的hexo根目录，执行命令：

hexo new 'my-first-blog'

hexo会帮我们在_posts下生成相关md文件：

我们只需要打开这个文件就可以开始写博客了，默认生成如下内容：

当然你也可以直接自己新建md文件，用这个命令的好处是帮我们自动生成了时间。

一般完整格式如下：

---
title: postName #文章页面上的显示名称，一般是中文
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---

以下是正文

那么hexo new page 'postName'命令和hexo new 'postName'有什么区别呢？

hexo new page "my-second-blog"

生成如下：

最终部署时生成：hexo\public\my-second-blog\index.html，但是它不会作为文章出现在博文目录。

4.12.1. 写博客工具

那么用什么工具写博客呢？这个我还没去找，以前自己使用editor.md简单弄了个，大家有好用的hexo写博客工具可以推荐个。

4.12.2. 如何让博文列表不显示全部内容

默认情况下，生成的博文目录会显示全部的文章内容，如何设置文章摘要的长度呢？

答案是在合适的位置加上<!--more-->即可，例如：

# 前言

使用github pages服务搭建博客的好处有：

1. 全是静态文件，访问速度快；
2. 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
3. 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；

<!--more-->

4. 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
5. 博客内容可以轻松打包、转移、发布到其它平台；
6. 等等；

5、最终效果：

可以访问我的git博客来查看效果： http://myblog.mrnaas.com/

不过呢，其实这个博客我只是拿来玩一玩的，没打算真的把它当博客，因为我已经有一个自己的博客了，哈哈！正因如此，本文仅限入门学习，关于hexo搭建个人博客的更高级玩法大家可以另找教程。

6、参考

【原文】http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa

http://www.cnblogs.com/zhcncn/p/4097881.html

http://www.jianshu.com/p/05289a4bc8b2

 

欢迎大家关注公众号：

yarn 安装教程

mrnaas阅读(2712)

1.安装yarn
方法一：使用安装包安装

官方下载安装包，https://yarnpkg.com/zh-Hans/docs/install，安装完毕后，一定要配置环境变量。

方法二：使用npm安装

npm i yarn -g

-i：install 

-g：全局安装（global）,使用 -g 或 –global

输入yarn -version 可以看到版本号，说明安装成功了。我们就可以在项目中像使用npm一样使用yarn了。

常用命令：
yarn / yarn install 等同于npm install 批量安装依赖
yarn add xxx 等同于 npm install xxx —save 安装指定包到指定位置
yarn remove xxx 等同于 npm uninstall xxx —save 卸载指定包
yarn add xxx —dev 等同于 npm install xxx —save-dev
yarn upgrade 等同于 npm update 升级全部包
yarn global add xxx 等同于 npm install xxx -g 全局安装指定包
使用yarn安装 create-react-app 工具

$ npm install -g create-react-app yarn

图1：npm安装脚手架

图2：yarn安装脚手架。

npm和yarn的区别。见npm和yarn的区别，我们该如何选择?

然后新建一个项目。工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖

$ create-react-app react-app

然后我们进入项目并启动。

$ cd react-app

$ yarn start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

添加组件，如：

$yarn add antd

2.卸载yarn
1.安装包直接软件卸载。

2.npm安装的则通过命令npm uninstall yarn -g卸载。

 

欢迎大家关注公众号：


————————————————
版权声明：本文为CSDN博主「格來羙、日出」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/w345731923/java/article/details/82878525

 

 

React 学习笔记001-本地环境搭建

mrnaas阅读(1529)

1、安装node.js

官网地址：https://nodejs.org/en/

中文网址：http://nodejs.cn/

通过以下命令检查是否安装成功
node -v
npm -v

2、npm包管理工具 基本使用

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
1.允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2.允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

本地安装

npm install 包名@版本号
uninstall同理

全局安装

npm install -g 包名@版本号
uninstall同理

其他常见命令：
npm list -g 查看安装的包列表
npm list grunt

3、创建自己的第一个react项目

npm install -g create-react-app 安装官方提供的生成react项目demo工具
create-react-app hello-react 在当前目录下创建名为hello-react的项目

如果安装包太慢，可以改为国内的淘宝源
npm config set registry https://registry.npm.taobao.org

cd hello-react 进入项目目录
npm start 运行

4、项目目录结构介绍

yarn.lock 安装包版本号
package.json 运行npm start 命令就是运行该文件里的内容
node_modules 外部包文件
public/index.html 页面上显示的html的内容
public/manfest.json PWA 如果是作为一个app，定义app的图标，主体
src /index.js 项目的执行入口

5、【补充】除了使用npm执行外 还可以用yarn

同理运行命令一样 yarn start

yarn安装教程

参考文章：https://www.jianshu.com/p/2968167c5471

web自动更新版本号清理js、css文件的缓存

mrnaas阅读(1806)

问题描述
在web项目开发过程中，我们经常会引用css、js文件，更新文件后常出现缓存问题（明明更改了代码，在浏览器上访问的时候却没有发生变化），这种情况我们通常采用以下两种解决方案：

1、手动清除浏览器缓存，开发人员F12会清理，但你不能这样要求客户。
2、添加版本号（如 layout.css?v=1），每次稍微修改css、js文件，都要更新v后面的数字，麻烦

解决方案
方法一：可以通过js自动给html添加版本号

<script type="text/javascript">
		document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+new Date().getTime()+"'>"); 
		document.write('<script  type='text/javascript'  src="http://localhost:8000/aaaa.js?v='+Math.random()+'"><\/script>');
</script>

方法二：若是jsp页面，可以使用java代码生成时间戳（若是jsp页面用方法一也行，但此方法更方便）

 <link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">
   <script type="text/javascript" src="<%=ctx %>/js/idvalid.js?v=<%=System.currentTimeMillis() %>" charset="utf-8"></script>

最优方案

以上方案虽然可以防止 js 的缓存了，但是每次刷新页面都会重新生成一个版本号，重新拉取 js 文件，导致不必要的网络开销，稍微修改了一下，使用了 sessionStorage 和时间戳，基本满足了需求了。
方法三：全web页面通用

<script type="text/javascript">
	var timestamp = new Date().getTime();
	var versionStamp = sessionStorage.version;
	if (versionStamp == null || (timestamp - versionStamp) > 1800000) {
	 sessionStorage.version = timestamp;
	}
	document.write("<script type='text/javascript' src='js/index_tool.js?v="+sessionStorage.version+"'><"+'/'+"script>");
	document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+sessionStorage.version+"'>"); <\/script>');
</script>

我的建议

本人开发jsp，建议使用最简单的方法二，现在网速都是200M的，还在乎这点网络开销？

?v=<%=System.currentTimeMillis() %>"

————————————————
版权声明：本文为CSDN博主「治政」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xyzz609/java/article/details/89327096

置顶推荐

吐血推荐

51LA网站统计V6

【51LA网站统计V6】新人注册立得5元现金收益～现在加入“优站计划”，还有额外收益赚取，点击此处了解详情

腾讯云-专属

精选爆款云产品

大额代金券等你领

热门文章

热门标签

WEB (72)js (67)前端 (64)CSS (55)javascript (32)HTML (31)jQuery (17)英语学习 (15)nodejs (12)deepin (8)React (8)插件 (7)Vue (6)linux (5)npm (4)MN乐享 (4)React全家桶 (4)英语语法 (4)Java (3)Python (3)购物推荐 (3)MN购物 (3)uos (3)微信小程序 (3)URL Scheme (3)前端面试题 (3)测试 (2)自适应 (2)后端 (2)美文欣赏 (2)
2023年 9月
一 二 三 四 五 六 日
 123
45678910
11121314151617
18192021222324
252627282930  

网站统计

  • 日志总数：152
  • 评论总数：41
  • 标签总数：195
  • 页面总数：8
  • 分类总数：19
  • 链接总数：1
  • 用户总数：87
  • 最后更新：2023-09-11