代码教程 - 微6g博客【记录生活分享心得】

UniAPP工程化目录配置 uniApp

┌─components            uni-app组件目录
│  └─comp-a.vue        可复用的a组件
├─hybrid                存放本地网页的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录
├─common                公共资源（自建）
├─api                   请求封装（自建）
├─store                 状态管理（自建）
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

小诸葛 UniAPP工程话配置 9-6

评论(0) 浏览(359)

GIT常用指令大全前端

1.git clone 仓库地址

2.cd 仓库名称前两位-tab 进入仓库文件夹

3.git add -A 或者 git add . 提交代码

4.git commit -m"提交说明"

5.git push 提交到仓库

6.git pull 更新代码

7.cd 目录名 --指定目录
cd ../ --返回上一级，可以多个，一个../代表返回一级
cd ./ 到当前目录
cd ./目录名

8.ls --查看当前目录下的文件夹

9.mkdir --创建目录名

10.touch --创建文件文件名.后缀名

11.pwd --查看当前文件目录

12.git init --初始化git版本管理

13.git status --查看文件状态红：未加入本地缓存绿：已加入本地缓存

clear --清除命令窗口历史指令

exit 退出

16.rm 文件夹名称删除本地

17.git checkout 文件夹名恢复

18.git log 查看版本日志

git reset --hard 版本号无法修复当前版本bug 退回到某一个版本
20.git rm -r 文件夹名/

恢复删除的文件

21.git reset HEAD 文件名

22.git checkout 文件名

22.git push -f 强制提交

23.git reflog 查看log

24.git checkout -b dev1 创建分支

25.git checkout master 切换到主分支

26.git pull origin master 拉取主分支最新代码

27.git checkout dev1 切换到自己分支

28.git merge master 合并主分支代码到自己分支

29.git push origin dev1，（master）提交到自己的分支

30.git branch 查看自己当前所在分支

开发分支（dev）上的代码达到上线的标准后，要合并到 master 分支

git checkout dev
git pull
git checkout master
git merge dev
git push -u origin master

当master代码改动了，需要更新开发分支（dev）上的代码

git checkout master
git pull
git checkout dev
git merge master
git push -u origin dev

# 清除掉缓存在git中的用户名和密码  ( 可能之前有人用过这台电脑 )
git credential-manager uninstall

# 记住自己的用户名和密码
git config --global credential.helper store

# 配置提交代码的人的用户名和邮箱
git config --global user.name "小诸葛"  // 配置用户名
git config --global user.email dc@qq.com // 配置邮箱

# 代码仓库地址
https://gitee.com....    // 仓库地址

# 仓库账号和密码
账号: 111***
密码: 123456

第一次下载(克隆)代码:

git clone 仓库地址 // 例如: git clone https://gitee.com...

第二次以后下载(拉取)代码

# 每天进公司第一件事情
git pull 仓库地址 分支名 // 例如: git pull origin develop

提交代码步骤【重点】

git add .           // 纳入到版本控制
git commit -m "描述信息"   // 暂存到本地 

# commit一般是一个功能一次 push是一天一次. 一般是下班之前push
# push之前先pull一次

git push 仓库地址 分支名  // 推送到远程服务器仓库 例如: git push origin develop

commit 规范【重点】

type(scope) : subject

( 1 ) type（必须） : commit 的类别，只允许使用下面几个标识：
    feat : 新功能
    fix : 修复bug
    docs : 文档改变
    style : 代码格式改变
    refactor : 某个已有功能重构
    perf : 性能优化
    test : 增加测试
    build : 改变了build工具 如 grunt换成了 npm
    revert : 撤销上一次的 commit
    chore : 构建过程或辅助工具的变动

( 2 ) scope（可选） : 用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。

( 3 ) subject（必须） : commit 的简短描述，不超过50个字符。

其他命令:

git status  // 查看仓库状态
git branch // 查看当前有哪些分支
git branch 分支名  // 创建分支
git checkout 分支名 // 切换分支
git checkout -b 分支名 // 创建并切换分支
git merge 分支名  // 合并分支
git tag -a v1.1 -m "test_tag"； // 打标签
git push origin --tags // 把tag标签(版本) 推送到服务器

小诸葛 GIT常用指令大全 8-30

评论(0) 浏览(309)

ES6语法处理数组多维展开 JavaScript

flat可以展开数组，里面可以接收一个参数，例如flat(3),就是展开3维数组。或者传入Infinity展开所有

 let ar = [12, 34, 3, [343, [194, [23]]]]
      let st = ar.flat(Infinity)
      console.log(st)

小诸葛 ES6语法处理数组多维展开 8-28

评论(0) 浏览(279)

ES6构造函数新增方法 JavaScript

1.Arry.from(),将两类对象转为真正的数组，可以接收第二个参数用来处理元素。

    <script>
      let a = {
        0: '1',
        1: '2',
        2: '3',
        length: 3,
      }
      let s = Array.from(a, v => {
        return v * 10
      })
      console.log(s)
    </script>

2.Array.of(),将一组值，转为数组。

Array.of(1,2,3)//[1,2,3]

小诸葛 ES6构造函数新增方法 8-28

评论(0) 浏览(289)

新电脑运行VUE项目流程 Vue

1.安装Nodejs
2.安装Git
3.安装Yarn
4.配置yarn环境
5.修改yarn和npm下载源
6.安装vue脚手架 yarn global add @vue/cli
7.创建vue2项目 vue create 项目名(vu2+Webpack)
7.创建vue3项目 yarn create vite 项目名(vu3+vite)

小诸葛新电脑运行VUE项目流程 8-26

评论(0) 浏览(311)

Vue中实现一个深拷贝递归函数 Vue

这里是在data中定义的数据，进行深拷贝之后，修改了data之中的数据，发现拷贝的数据没有发生改变，说明拷贝成功了。

效果图：

Vue中实现一个深拷贝递归函数

功能代码

    deepClone(obj) {
      if (typeof obj !== 'object' || obj === null) {
        return obj;
      }
      const clone = Array.isArray(obj) ? [] : {};
      for (let key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          clone[key] = this.deepClone(obj[key]);
        }
      }
      return clone;
    },

功能每行代码解读

当给出的 `deepClone` 函数被调用时，它将会执行以下操作：

1. `if (typeof obj !== 'object' || obj === null)`：这一行首先检查给定的 `obj` 是否是一个对象并且不是 `null`。如果不满足这个条件，表示 `obj` 不需要被拷贝，直接返回 `obj`。

2. `const clone = Array.isArray(obj) ? [] : {};`：这一行根据 `obj` 是否为数组来创建一个初始的拷贝对象。如果 `obj` 是数组，那么 `clone` 将被初始化为空数组 `[]`；如果 `obj` 是对象，那么 `clone` 将会被初始化为空对象 `{}`。

3. `for (let key in obj)`：这一行使用 `for...in` 循环遍历 `obj` 内的每个属性。

4. `if (Object.prototype.hasOwnProperty.call(obj, key))`：这一行通过 `Object.prototype.hasOwnProperty` 方法检查当前遍历到的 `key` 是否是 `obj` 自身的属性，而不是继承自原型链上的属性。这一步是为了避免拷贝原型链上的属性。

5. `clone[key] = this.deepClone(obj[key]);`：这一行递归调用 `deepClone` 函数，将 `obj[key]` 作为参数传递给它，并将返回的拷贝结果赋值给 `clone[key]`。这将确保所有嵌套的对象或数组也被深度拷贝。

6. 最后，函数返回深拷贝后的 `clone` 对象。

总结起来，这个 deepClone 函数能够根据输入的对象 obj 进行深度拷贝，包括对象内的嵌套对象和数组。它使用了递归的方式来遍历并拷贝对象的属性，确保生成一个完全独立的副本。

完整代码

<template>
  <div @click.right="ts">
    <button @click="cloneObject">点击执行深拷贝对象</button>
    <p>原始对象: {{ originalObject }}</p>
    <p>深拷贝对象: {{ clonedObject }}</p>

  </div>
</template>

<script>

export default {
  data() {
    return {
      originalObject: { foo: 'bar', nested: { baz: 'qux' }, a: [1, 2, 3, 4, { name: '2222' }] },
      clonedObject: null
    };
  },
  methods: {
    deepClone(obj) {
      if (typeof obj !== 'object' || obj === null) {
        return obj;
      }
      const clone = Array.isArray(obj) ? [] : {};
      for (let key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          clone[key] = this.deepClone(obj[key]);
        }
      }
      return clone;
    },

    cloneObject() {
      this.clonedObject = this.deepClone(this.originalObject);
    },

  },

}
</script>

小诸葛 Vue中实现一个深拷贝递归函数 8-25

评论(0) 浏览(283)

Vue自定义指令进入页面光标自动聚焦到input框上 Vue

使用 Vue.directive可以注册全局指令，第一个参数为指令的名字,第二个参数为对象，也可以是一个指令函数。

里面有几个钩子函数

 // 钩子函数，处理指令相关的逻辑
    bind(el, binding, vnode) {
      // 指令绑定时的逻辑
    },
    inserted(el, binding, vnode) {
      // 元素插入到 DOM 时的逻辑
    },
    update(el, binding, vnode, oldVnode) {
      // 组件更新时的逻辑
    },
    unbind(el, binding, vnode) {
      // 指令解绑时的逻辑
    }

在指令的钩子函数中，通过传入的参数来获取更多信息

el：指令所绑定的元素，可以通过操作它来改变元素的样式、属性等。
binding：一个对象，包含了指令的信息，如 value（指令的绑定值）、modifiers（指令的修饰符）等。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，只在 update 钩子中可用。

下面写的进入页面光标自动聚焦到input框上

全局注册

Vue.directive('focus',{
  inserted: function(el){
    el.focus()
  },
})

局部注册

在.vue中directives属性下面书写

  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }

使用

<input type="text" v-focus>

小诸葛 Vue自定义指令进入页面光标自动聚焦到input框上 8-25

评论(0) 浏览(333)

Vue.observable让一个对象变成响应式数据 Vue

Vue.observable，让一个对象变成响应式数据。Vue内部会用它来处理data函数返回的对象

返回的对象可以直接用于渲染函数和计算属性内部，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器

使用场景

在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能并不算太复杂，而使用上面两个又有点繁琐。接下来，就是observable一个很好的选择

创建一个js文件

// 引入vue
import Vue from 'vue'
// 创建state对象，使用observable让state对象可响应
export let state = Vue.observable({
    name: '张三',
    age: 28
})
// 创建对应的方法
export let mutations = {
    changeName(name) {
        state.name = name
    },
    setAge(age) {
        state.age = age
    }
}

在.vue文件中直接使用即可

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <button @click="changeName">改变姓名</button>
    <button @click="setAge">改变年龄</button>
  </div>
</template>

<script>
import { state, mutations } from '@/observable'
export default {
  // 在计算属性中拿到值
  computed: {
    name() {
      return state.name
    },
    age() {
      return state.age
    }
  },
  // 调用mutations里面的方法，更新数据
  methods: {
    changeName() {
      mutations.changeName('李四')
      console.log(state);
    },
    setAge() {
      mutations.setAge(18)
      console.log(state);
    }
  }
}
</script>

小诸葛 Vue.observable让一个对象变成响应式数据 8-25