遇到的问题

章鱼Cc_yoo

已于 2023-05-04 10:15:52 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： git github vue.js

于 2022-12-27 10:17:53 首次发布

本文链接：https://blog.csdn.net/Cc200171/article/details/128394342

vue官方文档：简介 | Vue.js

UI 组件库：https://element-plus.gitee.io/zh-CN/component

vue架构及部署：框架之Vue篇：架构及部署（网络资料整理）_vue框架部署_羌俊恩的博客-CSDN博客

终端快捷键：13、ubuntu终端快捷键（参考 dy9776） - 开发者博客

vue-router：API Documentation | Vue Router

http： HTTP 方法：GET 对比 POST | 菜鸟教程

一、git

Git - Book

1. git push之前忘记git pull:需要指定如何协调不同的分支。

解决：

(1) git config pull.rebase false

(2) git status 用于查看在你上次提交之后是否有对文件进行再次修改

(3) git stash 将当前的工作状态保存到git栈

2. 删除本地分支

# 删除本地分支 git branch -d

# 强行删除本地分支 git branch -D

3. 创建新分支并推送到远程仓库

在当前main分支上创建自己新的分支 AddF01，并切换到该分支下
git checkout -b AddF01

在AddF01分支上进行开发，测试，待功能完成之后，进行合并提交到main分支上：

git checkout main

git pull origin main

git merge AddF01

git push origin main

4. git暂存本地修改

（1）先将本地修改存储起来 git stash

（2）还原暂存的内容 git stash pop

5. git回退

1. git reset --hard 复制想要回退到这次提交的链接

2. git push -f

6. git删除

git branch -D xxxx(分支名)

7. 拉取新的项目

1. git clone

2. npm install

8. git创建多账号密钥

Git 创建多账号ssh
1、ssh-keygen -t rsa -C "你的用户名" -f ~/.ssh/id_rsa_gitlab
ssh-keygen -t rsa -C "你的用户名” -f ~/.ssh/id_rsa_github
2、cd ~/.ssh/
3、touch config
4、vim config
5、配置config内容
Host *github.com
     IdentityFile ~/.ssh/id_rsa.github
     User app@ninebot.com

Host *sg-gitlab.segwaydiscovery.com
     IdentityFile ~/.ssh/id_rsa_gitlab
     User xiaojuan.li01
# 配置文件参数
# Host Host可以看作是一个你要识别的模式，对识别的模式，进行配置对应的的主机名和ssh文件
# HostName 要登录主机的主机名
# User 登录名
# PreferredAuthentications publickey,password,keyboard-interactive
# IdentityFile 指明上面User对应的identityFile路径

6、查看密钥：cat id_rsa_gitlab.pub

二、动画

1. wowInit

import { wowInit } from ...

mounted() {

        wowInit()

}

wow fadeInUp data-wow-delay='.5s'

2. 当目标元素滑动到可视区域tab切换

当目标元素滑动到可视区域视频播放文字消失

HTMLElement.offsetParent 返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素

HTMLElement.offsetWidth 返回一个元素的布局宽度

HTMLElement.offsetHeight 返回该元素的像素高度

HTMLElement.offsetTop 返回当前元素相对于其 offsetParent 元素的顶部内边距的距离

HTMLElement.offsetLeft 返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值

Element.scrollTop 一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量

mounted() {
    this.handleScroll()
    window.addEventListener('scroll', this.handleScroll, true)
}
methods() {
    当目标元素滑动到可视区域tab切换
    handleScrollTab(triggerElement) {
        const scrollTop = document.documentElement.scrollTop ||     
        document.body.scrollTop;
        const triggerElementOffsetHeigth =             
        document.querySelector(triggerElement).offsetHeight;
        const triggerElementOffsetTop =     
        document.querySelector(triggerElement).offsetTop;
        if (scrollTop > triggerElementOffsetTop - 55 && scrollTop  <     
        triggerElementOffsetHeigth + triggerElementOffsetTop - 55 ) {
          return true
        }
    },
    当目标元素滑动到可视区域视频播放文字消失
    handleScrollVideo(triggerElement, videoElement, contentElement) {
        const scrollTop = document.documentElement.scrollTop ||         
        document.body.scrollTop;
        const triggerElementOffsetHeigth =     
        document.querySelector(triggerElement).offsetHeight;
        const triggerElementOffsetTop = 
        document.querySelector(triggerElement).offsetTop;
        if (scrollTop > triggerElementOffsetTop - 55 && scrollTop  <         
        triggerElementOffsetHeigth + triggerElementOffsetTop - 55 ) {
          return true
        }
    },
    handleScroll () {
        if (this.handleScrollTab('.floor3-item-box')) {
          const floor3OffsetTop = document.querySelector('.floor3_nav').offsetTop
          this.scrollMove = -(scrollTop -80 - floor3OffsetTop)
          if (this.scrollMove < -(this.floor3ItemHeight *                     
          (this.tab1Data.tab1Content.length - 1))) {
            this.scrollMove = -(this.floor3ItemHeight *         
            (this.tab1Data.tab1Content.length - 1))
          }
          if (this.scrollMove > 0) {
            this.scrollMove = 0
          }
          document.querySelector('.floor3-tab-box').style.transform =     
          `translate3d(${this.scrollMove}px, 0px, 0px)`
        }
        if (this.handleScrollVideo('.floor7-video-box','.floor7-popup-        
          video','.floor7-title-effect')) {       
          const floor7OffsetTop = document.querySelector('.floor7-video-    
          box').offsetTop
          const floor7OffsetHeight = document.querySelector('.floor7-video- 
          box').offsetHeight;
          this.scrollMove = (scrollTop - 80 - floor7OffsetTop)
          this.scrollSpeed = (0.4 / floor7OffsetHeight) * this.scrollMove * 3
          if (this.scrollSpeed < 0) {
            this.scrollSpeed = 0
          }
          if (this.scrollSpeed > 0.4) {
            this.scrollSpeed = 0.4
          }
          document.querySelector('.floor7-popup-video').style.transform = 
          `scale(${0.6+this.scrollSpeed})`
        }
    }
}

三、tab切换

<section class="floor3-wrap">
        <div class="pc-tab-content">
          <div class="tab-content-box">
            <p class="tab-content-title" v-for="(item,index) in 
                     tab1Data.tab1Title" 
               :class="index == isTabOne ? 'tabTwo-title-active':''" 
               :key="index" 
               @mouseenter="tabOneHandle(index)" >         
            {{item.title}}</p>
          </div>
          <div class="floor3-img">
            <PcProductImage v-for="(item,index) in tab1Data.tab1Img" 
                            class="pc-content-img"
                            :class="index == isTabOne ? 'pc-tabTwo-active':''"
                            :productImg="item.pcImg"
                            :key="'tabTwo'+index"></PcProductImage>
          </div>
          <div class="floor3-content">
            <div class="floor3-item-content" 
                 v-for="(item,index) in tab1Data.tab1Content" 
                 :class="index == isTabOne ? 'tabTwo-content-active':''"                 
                 :key="index">
              <div class="floor3-title" v-html="item.title"></div>
              <div class="floor3-topic" v-html="item.topic"></div>
              <div class="floor3-effect" v-html="item.effect"></div>
            </div>
          </div>
        </div>
</section>
data() {
    tab1Data: {}
}
methods: {
    tabOneHandle (index) {
        this.isTabOne = index
    }
}

四、反引号``

（1）可以换行

（2）可以格式化字符串--->${}

五、getBoundingClientRect().top 元素上边到视窗上边的距离

methods: {
      handleScroll (e) {
        const topContentTop = document.querySelector('.floor8-content-     
        pos').getBoundingClientRect().top
        const topBgDom = document.querySelector('.floor8-content-pos')
        topBgDom.style.opacity = 1
        if (topContentTop <= 0) {
          topBgDom.style.opacity = 0
        }else{
          topBgDom.style.opacity = 1
        }
      },
},
mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
}

六、图片文字

文字图片

图片文字

:style="{

justifyContent: (index + 1) % 2 === 0 ? 'flex-start' : 'flex-end',

textAlign: (index + 1) % 2 === 0 ? 'right' : 'left'

}"

import type { PropType } from 'vue'
import type { IBoxs } from '@/api/types'
const props = defineProps({
  boxsData: {
    type: Object as PropType<IBoxs[]>,
    default: () => {}
  }
})
<div
      class="box"
      v-for="(value, index) in props.boxsData"
      :key="index"
      :style="{
        marginTop: (index + 1) % 2 === 0 ? '100px' : '0',
        marginBottom: (index + 1) % 2 === 0 ? '100px' : '0'
      }"
    >
      <div
        class="abs-img"
        :style="{
          justifyContent:
            (Number(index) + 1) % 2 === 0 ? 'flex-end' : 'flex-start'
        }"
      >
        <img :src="value.pcImg" alt="" />
      </div>
      <div
        class="abs-text"
        :style="{
          justifyContent: (index + 1) % 2 === 0 ? 'flex-start' : 'flex-end',
          textAlign: (index + 1) % 2 === 0 ? 'right' : 'left'
        }"
      >
        <div class="text"></div>
      </div>
</div>

七、穿透

css：>>>、/deep/、::v-deep

less/node-sass：/deep/、::v-deep

dart-sass：::v-deep

八、getter和setter方法

getter：获取成员变量值的方法

- (void) setName: (NSString *)name{
　　_name = name;
}

- (void)setSex:(Sex)sex{
　　_sex = sex;
}

setter：给属性赋值的方法

- (NSString *)name{
　　return _name;
}

- (Sex)sex{
　　return _sex;
}

九、:nth-child(n) 和:nth-of-type(n) 区别

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不管元素的类型

:nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素，对元素类型有限制

十、视频弹框

弹框
<div class="floor2-video-box"
:class="{popupVideoActive: isVideo}"
@click.self="popupVideo">
<div class="floor2-video-pos">
<div class="floor2-popup-video" >
<video ref="popVideo"
style="position: relative;z-index: 0"
class="rob-video" preload="none"
x5-playsinline="true"
playsinline="true"
webkit-playsinline="true"
controls="controls"
>
<source type="video/mp4"
src="../../../static/indexVideo/floor2-navimow-video.mp4">
</video>
</div>
<img class="floor2-popup-close"
src="https://segway-website.oss-cn-beijing.aliyuncs.com/segway-
website/product/navimow0321/en/images/navimow/loomo-close.png"
@click="popupVideo" alt="">
</div>
</div>

背景图，点击svg-icon弹框跳出
<div class="floor2-vision-fence">
<div class="floor2-video-wrap">
<img class="cover"
src="../../../static/images/visionFence/pc-floor2-vision-fence-video-
cover.png" alt="">
<a href='javascript:;' @click="popupVideo">
<svg-icon icon-class="pc-video" className="icon" width="120px" height="120px">
</svg-icon>
</a>
</div>
</div>

方法
data() {
return {
isVideo:false
}
},
methods: {
// 弹出视频
popupVideo(){
this.$refs.popVideo.pause()
this.isVideo = !this.isVideo
if (this.isVideo) return this.$refs.popVideo.play()
this.$refs.popVideo.pause()
this.$refs.popVideo.currentTime = 0
},
}

样式
.floor2-video-box(//遮挡层){
position: fixed;
top:0;
left:0;
width:100vw;
height: 100vh;
z-index:9999;
background: rgba(0,0,0,0.8);
display: none;
justify-content: center;
align-items: center;
}
.floor2-video-pos{
position: relative;
}
.floor2-popup-video{
width:50vw;
height: auto;
}
.rob-video{
width:100%;
}
.floor2-popup-close{
position:absolute;
top:10px;
right:10px;
z-index:22;
display: block;
width:30px;
cursor: pointer;
}
.popupVideoActive{
display: flex;
}

十一、谷歌地图

Google 地图基础 | 菜鸟教程

十二、字符串拼接

+号拼接
concat方法
append方法

十三、设置wow.js

（当页面向下滚动到可视区域时，动画出现；当页面向上回滚时，动画不会回退）

vue中wowjs的使用 - H5W3

例：

1. wow.js

import { WOW } from 'wowjs'
if (process.browser) { // 判断是否在浏览器端
  window.WOW = WOW
}

2. wowInit.js

export function wowInit () {
  const wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    live: false,
    offset: 0,
    mobile: true
  })
  wow.init()
}

3. 文件引入

<template>
    <div wow fadeInUp data-wow-delay='.5s'"></div>
</template>

<script>
import { wowInit } from '../../../plugins/wowInit'
mounted() {
    wowInit()
}
</script>

十四、indexOf用法

获取下标，从0开始

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1

十五、created和mounted区别

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted：在模板渲染成html后调用，通常初始化页面完成后，再对html的dom节点进行一些需要的操作。

十六、$router和$route

vue中如何获取当前路由地址_vue.js_脚本之家

1. $router和$route区别

$router: 路由操作对象，只写。需要对路由进行操作时使用。如路由跳转
$route: 路由信息对象，只读。获取路由相关信息时使用。如获取当前路由地址

2. $route

获取当前路由地址

this.$route.path

原生方法

window.location.href

十七、字符串加变量

:ref="'playBtn' + data.id"

动态绑定ref ，命名采取 playBtn + (数据id)

`playBtn${data.id}`

十八、Element Plus

vue2 https://element.eleme.cn/#/zh-CN/component/dialog

vue3 https://element-plus.org/zh-CN/component/dialog.html

十九、路由

Vue Router 和组合式 API | Vue Router

二十、理解前端尺寸vw、vh、rem、em

em:

em的值并不是固定的
em会继承父级元素的字体大小

rem:

只相对于根元素（html）
通过修改根元素可成比例的调整页面字体大小

vw、vh:

vw:1vw 等于视口宽度的1%
Vh:1vh 等于视口高度的1%

二十一、String类的常用方法

String类的常用方法都有哪些？_string常用方法有哪些_敲一天咯的博客-CSDN博客String类的常用方法都有哪些？https://blog.csdn.net/WYN5201314588/article/details/125801439

常见String类的获取功能

1.length()方法获取字符串长度

2.charAt(int index)方法传递一个下标参数，返回字符串对应位置的字符

3.indexOf()方法传递某个字符，返回在字符串中的第一个位置

4.subString(int start)方法默认是取到字符串末尾

5.subString(int start,int end)方法注：范围左闭右开，不包含下标为end的那位

二十二、@supports特性查询

1. 这个属性是作为CSS2.0扩展被引入的，

2. 是检测浏览器是否支持css属性值，是由逻辑与，逻辑或和逻辑非组合而成。

3. 主要的目的就是为了作者能够在不同的浏览器上根据不同的CSS支持程度来进行特性样式的编写。

/*用法*/
@supports (写入需要进行判断的css属性，为bool值)){
   为true的时候执行，为false的时候忽略
}

同时 @supports还支持表达式

/*逻辑与*/
@supports ((color:red) and (font-size:14px){
}
/*逻辑或*/
@supports ((color:red) or (font-size:14px)){
}
/*逻辑非*/
@supports (not color:red){
}

并且还支持组合表达的方式，在进行组合的时候将需要判断的条件使用括号括起来就可以进行正常的判断

@supports ((not (color:#fff) and (font-size:14px))or(background-color:#666)){}

二十三、css

CSS：层叠样式表 | MDN

二十四、vue中sessionStorage的使用

vue中sessionStorage的使用_vue sessionstorage_柒个M的博客-CSDN博客

1.通过getItem()方法读取数据

sessionStorage.getItem('testKey'); // => 返回testKey对应的值

2.采用setItem()方法存储数据

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

二十五、浏览器不小心关掉后仍想打开

command+shift+T