创建文件注意点
//Gitee 基于Git的代码托管和研发协作平台
# 创建文件夹
mkdir 文件夹名称
# 创建文件
touch 文件名称
# git bash复制粘贴的快捷键
shift + insert/ins 粘贴
ctrl + insert/ins 复制gi
# 克隆仓库
git clone 仓库地址
# 初始化一个本地的仓库
git init
# 连接一个远程仓库[这一句可以不用背]
git remote add origin 仓库地址
# 列出要提交的文件
# 上传整个项目 用git add .
git add 文件名
# 提交文件到本地暂存区
git commit -m "提交的信息，要求是字符串"
# 推送到远程仓库
git push origin 分支名
# 拉取远程仓库
git pull origin 分支名
# 检测分支
git branch
# 创建并切换分支(dev) - 在本地仓库创建了分支，创建完后，需要做一次提交
git checkout -b 分支名 或 git switch -c 分支名
# 切换分支（切换分支一定要记得先做commit提交，至少是提交到本地）
git checkout 分支名 或 git switch 分支名
# 检查分支状态
git status
# 合并分支（在master分支下，把dev合并过来）
git merge 另一个分支的名称
# 一行查看日志
git log --pretty=oneline
# 版本回滚
git reset --hard 版本号
# 代码冲突
当合并过来的代码跟自身的代码在同个位置有不同的地方，那么就会产生冲突，这个时候可以借助vscode解决
// Viscode 设置自动给保存
项目小技巧
1、快速修改某个数组中一个或多个对象的属性名
JSON.parse(JSON.stringify(data).replace(/name1/g, 'new_name1').replace(/name2/g, 'new_name2').replace(/name3/g, 'new_name3')...)
// 先进性深拷贝，再做替换name1
// 表示旧属性名，new_name表示新属性名
2、样式深度修改
// 碰到vantui的样式你无法替换，可以尝试在类名前面加 /deep/
/deep/.box{
color: red;
}
3、 组件更新
// 局部更新组件 本质就是修改 key 父组件接收
<Header :key="changekey" @changekeyfn="changekeyfn" />
data(){
return{
changekey:0
}
},
methods:{
// 更新key值
changekeyfn(){
this.changekey++;
}
}
// Header.vue 子组件
this.$emit('changekeyfn') // 不用传参
// 触底
//获取滚动时的高度
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 浏览器窗口（文档）的可视高度(windowHeight)：（就是你肉眼可见的那部分全屏高度）
let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// 文档的真实高度(scrollHeight)：
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
// 鼠标移到底部
scrollTop+ windowHeight >= scrollHeight
4、 拦截器封装、 axios
// src目录下创建 reqesst文件
// reqesst文件下 添加 api.index request.js
// api.js
import request from './request'
import qs from 'qs' (需要就下载添加)
// 请求数据(不带参数)
export const GetHomeLists = () => request.get('接口')
// get 请求带参
export const GetSearchList = (params) => request.get('接口', {params});
// 本接口content-type为x-www-form-urlencoded post请求
export const AddToCartApi = (params) => request.post("接口", qs.stringify(params))
// request.js
// 封装axios
import axios from 'axios'
// 创建一个单例
const instance = axios.create({
baseURL: "http://xxxxxxxxxxxx",
timeout: 5000
})
// 请求拦截器
instance.interceptors.request.use(config=>{
let token = localStorage.getItem("x-auth-token");
if(token){
//设置请求头 如果有token，这个请求就带上token
config.headers["x-auth-token"] = token;
}
return config;
}, err=>{
return Promise.reject(err)
})
// 响应拦截器
instance.interceptors.response.use(res=>{
return res.data;
}, err=>{
return Promise.reject(err)
})
export default instance
5、路径提示
- 安装 Path Intellisense插件
- 打开设置 - 首选项 - 搜索
Path Intellisense- 打开settings.json，添加：
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
- 在项目
package.json所在同级目录下创建文件jsconfig.json：
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": [
"node_modules"
]
}
- 重启vscode
6、端口配置【重点】
// 如果想要更改8080端口，可以在根目录下新建 vue.config.js 中：
module.exports = {
devServer: {
port: 3000
}
}
7、代理配置
我们对 vue.config.js 进行配置：
module.exports = {
devServer: {
port: 3000,
proxy: {
'/api': {
target: "http://kumanxuan1.f3322.net:8001/",
pathRewrite: {
'^/api': ''
}
}
}
}
}
8、v-model与state
理论上，修改state的值，唯一的途径是通过mutations。所以v-model直接使用state的值会出现问题，因此，我们可以借助computed属性来解决这个场面：
* store中：
const store = new Vuex.Store({
state: {
val: "你好，Vue"
},
mutations: {
changeVal(state, payload){
state.val = payload;
}
}
})
* 组件中：
<input v-model="value" />
<script>
export default {
computed: {
value: {
get(){
return this.$store.state.val;
},
set(val){
this.$store.commit("changeVal", val);
}
}
}
}
</script>
9、Actions中获取State的值
可以在 {commit} 之后追加 rootState
getGoodsList({ commit, rootState }) {
GetSearchGoodsList({
params: {
keyword: rootState.searchVal,
...
}
}).then(res=>{
...
})
10、监听
<template>
<div class="home">
<input type="text" v-model="msg">
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
msg: "你好"
};
},
watch: {
msg: {
handler(val, oldVal) {
console.log(123) // 在最初绑定时直接打印123
// console.log(val, oldVal);
},
immediate: true // 立即监听
deep: true // 深度监听(发杂数据类型)
}
}
};
</script>
11、ref与$refs（掌握）
// vue中获取页面里的某个元素（标签或组件），可以给它绑定ref属性，有点类似于给它添加id名。
<template>
<div class="">
<h3 ref="title">{{msg}}</h3>
<button @click="btnclick">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "你好"
};
},
methods: {
btnclick() {
console.log(this.$refs.title); // 得到h3标签
console.log(this.$refs.title.innerHTML); // 得到h3标签的文本
}
}
};
</script>
