常见问题解决笔记---自用

怎么使用ip地址打开html文件

要使用 IP 地址打开 HTML 文件，您需要在浏览器中输入 IP 地址加上文件路径或文件名。以下是详细的步骤：

确保您的 HTML 文件已经准备好，并且可以通过本地服务器访问。您可以使用任何支持服务器功能的软件，比如 Node.js 的 http-server、Apache 或 Nginx 等。在这个例子中，我们假设使用 Node.js 的 http-server。

在命令行中安装全局的 http-server：

npm install -g http-server
导航到您的 HTML 文件所在的目录：

cd /path/to/your/html/files
启动服务器并绑定到指定的 IP 地址：

http-server --bind your-ip-address
其中，“your-ip-address” 替换为您的 IP 地址。

在浏览器中输入以下地址：

http://your-ip-address:8080
其中，“your-ip-address” 替换为您的 IP 地址。请注意，“:8080” 是 http-server 默认使用的端口号，如果您在启动时指定了不同的端口号，要相应地更改地址。

浏览器将加载您的 HTML 文件，并显示在页面上。

请确保您的 IP 地址是正确的，并且您的计算机位于网络上，并且可以从其他设备访问。如果您是在本地网络上运行服务器，IP 地址可能是您计算机的局域网 IP 地址。如果您是在云服务器上运行服务器，IP 地址将是您服务器的公共 IP 地址。

另外，如果您的 HTML 文件不需要动态内容或后端支持，您也可以直接在浏览器中打开 HTML 文件。在浏览器中输入类似于以下格式的地址来打开本地 HTML 文件：

file:///path/to/your/file.html
注意，这种方式只适用于纯静态的 HTML 文件，而不支持动态内容或使用 AJAX 等技术的交互式应用程序。

el-table可勾选，且分页反显

<el-table ref="multipleTable" :data="tableData" style="width: 100%" :row-key="getRowId" @selection-change="handleSelectionChange">
	//:reserve-selection="true" 设置勾选反显
    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
  </el-table>

data(){
	return {
 		 tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection :[]
 	}
}

 methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }

	  //删除后反显
	  handleDelete(){
	  		this.multipleSelection.map((item, index) => {
            if (item.id === 删除的id) {
              this.multipleSelection.splice(index, 1);
            }
          });
		  if (this.multipleSelection.length) {
            const tempRows = [...this.multipleSelection];
            this.$refs.multipleTable.clearSelection();
            tempRows.forEach((row) => {
              this.$refs.multipleTable.toggleRowSelection(row, true);
            });
            this.multipleSelection = [...tempRows];
          }
		}
    }

vue 项目， 父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）

给子组件加一个key，绑定一个 时间戳

父组件

<template>
    <div>
        <button @click="handleLoad">点击重新加载子级</button>
        <children :key="timer"></children>
    </div>
</template>
<script>
import children from '@/components/parent/children'
export default {
    name: 'parent',
    components: { children },
    data () {
        return {
            timer: ''
        }
    },
    methods: {
        handleLoad () {
            this.timer = new Date().getTime()
        }
    }
}
</script>

vscode vue 格式化 双引号格式化为单引号 去掉末尾逗号 去掉分号

项目开了eslint校验，页面一片红

就是在项目根目录加一个.prettierrc.json的配置文件，写上相应的配置就可以了，与上面三个错误一一对应，设置单引号，无需分号，末项无需逗号，然后在需要格式化的地方使用 Shift + Alt + F 一键格式化就可以了

{
	"singleQuote": true,  
    "semi": false,
    "trailingComma": "none"
}

React中使用CSS

1、在组件中约会[name].css文件
这种方式约会的css样式，会作用于当前组件及其所有后代组件。

import react, { Component } from "react";
import TestChidren from "./TestChidren";
import "@/assets/css/index.scss";
 
class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
      <div>
        <div className="link-name">123</div>
        <TestChidren>测试子组件的样式</TestChidren>
      </div>
    );
  }
}
 
export default Test

2、在组件中约会[name] .module.css文件
将css文件作为一个模块约会，这个模块中的所有css，只作用于电流组件。不会影响电流组件的后代组件。

import react, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.css";
 
class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
     <div>
       <div className={moduleCss.linkName}>321321</div>
       <TestChild></TestChild>
     </div>
    );
  }
}
 
export default Test;

git上传项目到gitee的基本步骤

1 git init
先进入项目文件夹使用 git init 命令，把这个目录变成git可管理仓库即版本库repository

2 git add .
把文件添加到版本库中，将本地项目使用 git add . 加入到缓存区stage,不要忘记add 后的“.”，意为将目录中的所有文件都添加到缓存区
add是把当前分支的变更暂存起来，但不生成版本

3 git commit -m “firstcommit”
git commit -m 命令生成版本，并告诉git将缓存区文件提交到本地分支，后面引号中的内容为提交说明

4 git remote add origin 你的远程库地址
关联到远程仓库，例如：
git remote add origin https://github.com/githubusername/demo.git
其实是先remote添加了远程仓库，然后把自己的本地分支关联到某个仓库的某个分支

5.git pull --rebase origin main
获取远程仓库与本地仓库的合并（如果远程仓库不为空，则必须进行这一步）
如果pull的时候报错“fatal: 拒绝合并无关的历史”，使用以下命令：
git pull origin main --allow-unrelated-histories

6 git push -u origin main
把本地仓库的内容推送到远程仓库，使用git push实际上是把当前分支推送到远程仓库的关联分支里

7 git status
查看状态

判断对象是否有某属性：hasOwnProperty() 方法详解

hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性，如果是，返回true，否者false;
参数propertyName指要检测的属性名；

hasOwnProperty() 只会检查对象的自有属性，对象原形上的属性其不会检测；但是对于原型对象本身来说，这些原型上的属性又是原型对象的自有属性，所以原形对象也可以使用hasOwnProperty()检测自己的自有属性；

let obj = {
    name:'张睿',
    age:18,
    eat:{
        eatname:'面条',
        water:{
            watername:'农夫山泉'
        }
    }
}
console.log(obj.hasOwnProperty('name')) //true
console.log(obj.hasOwnProperty('age'))  //true
console.log(obj.hasOwnProperty('eat'))  //true
console.log(obj.hasOwnProperty('eatname'))  //false
console.log(obj.hasOwnProperty('water'))  //false
console.log(obj.hasOwnProperty('watername'))  //false
console.log(obj.eat.hasOwnProperty('eatname'))  //true
console.log(obj.eat.hasOwnProperty('water'))  //true
console.log(obj.eat.hasOwnProperty('watername'))  //false
console.log(obj.eat.water.hasOwnProperty('watername'))  //true

组件props信息的修改

1、子组件不能直接修改props；
2、如果props是对象，子组件可以修改对象的属性值（包括增加删除属性）；
3、如果props是数组，子组件可以修改数组的元素（包括增加删除元素），如果元素是对象，还可以修改元素的属性值（包括增加删除元素属性）。

npm 命令

安装淘宝镜像
访问国内网站，下载速度更快
npm config set registry https://registry.npm.taobao.org --global

设置当前地址（设置默认地址）
npm config set registry https://registry.npmjs.org/

查看当前镜像设置
npm config get registry

使用npm工具切换淘宝源
npm nrm taobao

淘宝源切换回官方源
npm nrm npm

npm -v 通过查看版本，看是否安装成功

npm install 使用npm命令安装模块

npm install -g 可直接在命令行使用

npm list -g查看所有全局安装模块

npm list vue 查看某个模块版本号

npm -g install npm @5.9.1 (@后面跟版本号)可以跟新npm版本

npm install -save moduleName # -save在package文件的dependencies（运行时的依赖，发布后生产环境下还需要使用的模块）节点写入依赖

npm install -save-dev moduleName # -save-dev 在package文件的devDependencies（开发是的依赖，发布后用不到，比如项目中的gulp，压缩css，js模块）节点下写入依赖

拓展yarn
下载node.js 使用npm 安装（方式一）
npm intall -g yarn

查看版本：yarn --version

安装node.js ,下载yarn安装程序（方式二）
提供.msi文件，在运行的时引导window安装yarn
yarn 淘宝源安装
yarn config set registry https://registry.npm.taobao.org -g

vuex刷新数据丢失的解决办法

npm install --save vuex-persistedstate

在store.js中添加两行配置

import Vue from 'vue'
import Vuex from 'vuex'
 
import createPersistedState from 'vuex-persistedstate'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
   //...
   plugins: [createPersistedState()]
})

react插槽

单个插槽
假设有一个名为Box的子组件

<Box>
    <div>123123</div>
</Box>
// 在子组件中
    render() {
        return (
            <div>
                <div>xxx....</div>
                {this.props.children}
            </div> 
        )
    }
    /** 输出
     * <div>xxx....</div>
     * <div>123123</div>
     */

多个插槽
在父级的子组件节点(…)中，写多个div 就是多个插槽，在子组件中，this.props.children 是一个数组，直接写this.props.children的话会把所有的插槽都放在节点上

<Box>
    <div>123123</div>
    <div>aaabbbccc</div>
</Box>
// 在子组件中
    render() {
        return (
            <div>
                <div>xxx....</div>
                {this.props.children}
            </div> 
        )
    }

    /** 输出
     * <div>xxx....</div>
     * <div>123123</div>
     * <div>aaabbbccc</div>
     */

因为this.props.children是一个数组，如果想要区分开，可以使用{this.props.children[0]}

    render() {
        return (
            <div>
                <div>xxx....</div>
                {this.props.children[1]}
            </div> 
        )
    }

    /** 输出
     * <div>xxx....</div>
     * <div>aaabbbccc</div>
     */

也可以将插入的div添加个标识符

<Box>
    <div ref="title" name="title">111</div>
    <div ref="content" name="content">222</div>
</Box>

我们会发现，组件中接收的值有ref和name属性(用别的属性也可以，在这里只是用ref和name举一个栗子)

在使用时候，可以直接输出this.props.children.filter(item => item.ref === ‘content’)就可以得到想要的了

注意事项
在插槽子组件中使用filter 时有一个坑，就是我们做组件时，插槽的位置是可填可不填的，而在react中如果只填写一个插槽的话，this.props.children 并不是一个数组，所以会导致filter 报错

可以在输出时写成这种方式：

{this.props.children && this.props.children.length ? this.props.children.filter(item => item.ref === 'content') : this.props.children}

ts：泛型＜T＞

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

定义函数

//泛型函数的类型与非泛型函数的类型没什么不同，只是有一个类型参数在最前面，像函数声明一样
function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

//泛型参数的默认类型
function createArray<T = string>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

定义接口

interface CreateArrayFunc {
    <T>(length: number, value: T): Array<T>;
}

let createArray: CreateArrayFunc;
createArray = function<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

//也可以把泛型参数提前到接口名上
interface CreateArrayFunc<T> {
    (length: number, value: T): Array<T>;
}

let createArray: CreateArrayFunc<any>;
createArray = function<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

定义类

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

泛型约束
对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

less用法

普通的变量

// 1.普通的变量
@bgColor:white;
@Height:50rpx;
.contain{
    background-color: @bgColor;
 
}
.row{
    height:@Height;
    margin-left:@Height;
} 

普通混合

//1.普通混合
.bor{
    background-color: aqua;
    width: 32rpx;
}
.poop{
    color:white;
    .bor;
}
 
.boom{
    height:200rpx;
    .bor;
}

.bor {
  background-color: aqua;
  width: 32rpx;
}
.poop {
  color: white;
  background-color: aqua;
  width: 32rpx;
}
.boom {
  height: 200rpx;
  background-color: aqua;
  width: 32rpx;
}

带选择器的混合

//3.带选择器的混合
.father(){
    &:hover{
        background-color: white;
        font-size:32px;
    }
}
 
.child{//类名字后面多了:hover
    .father;
}
.son{//类名字后面多了:hover
    .father;
}

.child:hover {
  background-color: white;
  font-size: 32px;
}
.son:hover {
  background-color: white;
  font-size: 32px;
}

使用process.env.VUE_APP_BASE_API全局地址代替vue-cli2的process.env.BASE_API

首先我们在根目录新建3个文件，分别为.env.development，.env.production，.env.test

注意文件是只有后缀的。
.env.development 模式用于serve，开发环境，就是开始环境的时候会引用这个文件里面的配置
.env.production模式用于build，线上环境。
.env.test 测试环境

分别在文件内写上：

//.env.development 
VUE_APP_BASE_API = '需要请求API'

//.env.production
VUE_APP_BASE_API = '需要请求API'

//.env.test
VUE_APP_BASE_API = '需要请求API'

更改package.json文件

 "scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

当需要用到该变量是可以用process.env.VUE_APP_BASE_API进行取值。

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 10000,
})

使用indexDB

npm install idb-keyval

import { get, set } from "idb-keyval";
get("aaa").then((val) = >{
    if (val) {
	要取的值
} else {
        set("aaa", 要存的值).then(() = >{}).
        catch((err) = >{});
    }
});