Git、CSS、Vue部分问题解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了Git、CSS、Vue部分问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实习期间一部分总结的知识

Git相关

vscode更新最新添加的分支 git remote update origin --prune

统计项目中所有文件的总代码行数 git ls-files | xargs cat | wc -l

Git报错： Failed to connect to github.com port 443 解决方案

配置http代理
git config --global http.proxy 127.0.0.1:7890
git config --global https.proxy 127.0.0.1:7890

取消代理命令
git config --global --unset http.proxy
git config --global --unset https.proxy

git 拉取远程分支到本地

git init
git remote add origin git链接
git fetch origin dev（dev为远程分支）
git checkout -b dev(本地分支) origin/dev(远程分支)
git pull origin dev(远程分支)

获得仓库链接后，直接拉取下来不一定能直接安装依赖，涉及到私有库，所以要切换到具体的分支，分支的依赖和总项目不一样。有一次报了cb()的错，查找各种解决办法说清空缓存、换成cnpm，无用，其实就是node和npm版本的问题，很玄学，同样是node14版本，换个版本号就能安装依赖。

git 本地项目关联GitHub

在GitHub上建立仓库，获取仓库地址
本地仓库执行git init
git add .
git commit -m " "
git branch -M main
git remote add origin 仓库地址
git push -u origin main

报错处理

376:8  error  Unexpected trailing comma    comma-dangle
377:1  error  Trailing spaces not allowed  no-trailing-spaces
是 ESlint 的规则问题，找到对应的文件以及行数去除多余的逗号(comma)，或多余的空格

376:8  error  Trailing spaces not allowed  no-trailing-spaces
空格不允许，多了空格

100个字符以内正则 ^(.{0,100})$

20个中文以内正则 ¹{1,20}$

去除字体间距

父元素设置font-size:0

<div class="space">
    <a href="##">1</a>
    <a href="##">2</a>
</div>
.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

使用margin负值
父元素设置letter-spacing为负值

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

父元素设置word-spacing为负值（负值可无限大，负值超出不会造成影响）

nvm设置别名

设置别名 nvm alias n14 14.21.3
使用 nvm use n14

npm更新依赖包，建议先卸载再安装

npm uninstall asp-smart-layout
npm install asp-smart-layout@latest

JavaScript规范

2空格一个缩进
常用关键字后加空格(if、else、function等)
不使用分号，除了自执行函数
有运算符，换行后要在行首

控制台报错xxx is not a function 。打印this看看是否存在这个函数

font-size最小12px，可以用transform进行2D缩放，突破最小限制

```
transform: scale(0.8);
```

filter: blur(10px);图片模糊

backdrop-filter: blur(10px);用于背景模糊,不会影响元素上面的内容

解决文件访问被拒绝：属性-安全-编辑-允许完全控制

vscode重新加载：键盘按下 Ctrl + Shift + p 打开命令行，输入Reload Window

在vite中不能使用require引入图片资源-应该使用new URL(‘./img.png’, import.meta.url).href

可以将图片转换为Base64编码，嵌入到URL中，使用URL显示图片，减少服务器请求次数

vue3样式穿透的正确写法

```
:deep(.van-badge) {}
```
deep也会影响模版里面用到的组件
问题：如果一次性写多个deep，某个deep不生效，可能是顺序的问题
比如这样，active会不生效

:deep(.van-tab--active) {
  ......
}
:deep(.van-tab) {
  ......
}

vue2和vue3路由缓存的区别

<keep-alive include="index">
    <router-view class="view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不被缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive" :key="(new Date().getTime())">

vue3
<RouterView v-slot="{ Component }">  //{Component}是解构赋值slotProps.Component
    <keep-alive>
      <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name"></component>
    </keep-alive>
    <!-- 不被缓存的视图组件 -->
    <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name"></component>
  </RouterView>

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x偏移量 y偏移量 模糊半径 扩展半径 阴影颜色 阴影模式（内（inset）/外（默认））
box-shadow: 5px 5px 10px 10px #ccc inset;

vue3移动端项目在手机上运行打开

window+R , 输入cmd,确定
命令行输入ipconfig , 回车 , 复制WLAN的IPv4地址
在vite.config.ts把host改成刚刚复制的ip地址

server: {
    port: 8030,
    host:'10.9.202.98',
    ......
    }

mysql8导出转储sql导入mysql5.7出错1273

打开sql文件，将文件中的所有
utf8mb4_0900_ai_ci 替换为 utf8_general_ci；
utf8mb4 替换为 utf8；
保存后再次运行sql文件，即可运行成功

vue2和vue3组件引入的区别

vue2:
export default {
  components: {
    LoginVue: () => import('./components/Login.vue')
}}

vue3直接引入：
import LoginVue from './components/Login.vue'

在app.vue中设置#app{ height: 100%; }不生效

一个元素设定为百分比高度时，是根据父元素的高度来计算自己的高度。
解决：在reset.css里面写

body,html{
  width: 100%;
  height: 100%;
}

delete删除单个对象属性，解构赋值一次性删除多个对象属性

delete obj.url;
const { url, ...objRest } = obj;//保留需要的数据

\u4e00-\u9fa5 ↩︎文章来源地址https://www.toymoban.com/news/detail-844933.html

到了这里，关于Git、CSS、Vue部分问题解决的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Git、CSS、Vue部分问题解决