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:7890git config --global https.proxy 127.0.0.1:7890``````取消代理命令git config --global --unset http.proxygit 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;//保留需要的数据