随记 -- 前端

1、如何在本地部署仓库项目
拉取代码 git clone 地址
查看分支 git branch
创建新的分支 git branch 名称
切换分支 git checkout -b 分支名
安装依赖 npm install
运行 npm run dev
git add . --暂存
git pull --拉取 很重要，如果存在修改同一个文件，会发生冲突
git commit -m "init" --提交并备注
git push --推送到仓库

合并develop分支到master
1、切换分支 git checkout master
2、拉取 git pull 检查是否最新
3、合并 git merge develop
4、推送 git push origin master

2、遇到node.js版本不匹配问题
下载nvm，可安装多个node.js版本，但需要切换
nvm list --查看安装的node.js版本
nvm -v --查看版本
nvm install --版本号 --安装对应版本的nodejs
nvm use --版本号 切换nodejs
nvm uninstall --卸载

3、Qs主要有两个方法
qs.stringify --将对象序列化成URL的形式，多个对象之间用&拼接。
qs.parse --将URL解析成对象的形式

4、Vuex状态管理器
需要考虑状态的适用范围，若有些状态严格属于单个组件，最好还是作为组件的局部状态
多个状态在多个界面共享–响应式的，组件更新相应的状态高小更新
改变store状态需要显示提交 –this.$store.commit("")
读取状态 this.$store.state.xx 可放在计算属性中（computed）–当状态变化时，更新计算属性从而更新dom
mapState --当需要读取多个状态时，可利用mapState辅助函数
getter --从state派生一些状态属性
Mutation --有两个回调函数(type：事件类型)(handler：实际进行状态更改的地方)
action --1）提交的是mutation；2）可以包含任意异步操作

5、emit 子组件向父组件传值

6、public --存放静态文件
index.html --模板文件，生成项目的入口文件

7、filter作用
1）筛选
2）去重
参考：https://blog.csdn.net/qq_44727978/article/details/124403087

8、mock.js --生成随机数据，生成Ajax请求
1）安装 --按模块建立相应的文件夹
2）./mock/index.js注册相应路由 –Mock.mock(/\/api\/message/, 'get', getMessageList)
3）使用 –this.$http.get('/api/message').then()
4）导入 –import './mock/index.js'

9、1、sessionStorage 与 localStorage
·sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。
·localStorage生命周期是永久，除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
存储（ 都本地存储）–localStorage.setItem("key","value"); // 以“key”为名称存储一个值“value”
–sessionStorage.setItem("key", "value");
获取–localStorage.getItem("key"); // 获取名称为“key”的值
–sessionStorage.getItem("key"); // 获取名称为“key”的值
清除–localStorage.removeItem("key") // 删除变量名为key的存储变量
–sessionStorage.removeItem("key") // 删除变量名为key的存储变量
存储时转化成字符串，获取时转化成对象
–localStorage.setItem('xxx', JSON.stringify(obj));
obj = JSON.parse(localStorage.setItem('xxx'));
–sessionStorage.setItem('xxx', JSON.stringify(obj));
obj = JSON.parse(sessionStorage.setItem('xxx'));

10、v-if 和v-show
v-if --条件渲染，符合条件的创建dom，渲染页面；不符合条件的就销毁dom。有较高的切换开销。
v-show --通过控制display属性进行dom的显示和隐藏。有较高的初始渲染开销。

11、require是赋值过程，import是解构过程。
require 是 node 中的一个方法： 他的作用是 “用于引入模块、 JSON、或本地文件”。

12、bus–一般用在任意组件间的通信
$emit(‘自定义事件名’，要传递的数据)–写在子组件 / 兄弟组件
$on(‘自定义事件名’，callback)–写在父组件 / 兄弟组件
$off('自定义事件')–解绑当前组件所用到的事件

、、、、、、、、、、、、、分割线、、、、、、、、、、、、、、、、、、
1、利用id、watch $route(to, from)、beforeRouteEnter 对网页跳转定位的思路
1) 对<div id=“pageAnchor”></div>绑定id
2) 监控

  watch: {
    // 监听$route对象的变化
    '$route': {
      handler: function (to, from) {
        // 如果路由有id参数，执行定位逻辑
        if (to.params.id) {
          this.scrollToElement(to.params.id);
        }
      },
      // 注意：如果需要深度监听，需要设置deep: true
      immediate: true // 如果需要在组件实例创建后立即触发
    }
  },

3）方法

  methods: {
    // 滚动到指定元素的方法
    scrollToElement(id) {
      this.$nextTick(() => {
        const element = document.getElementById(id);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      });
    }
  },

4）beforeRouteEnter

  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 在这里vm是组件实例
      if (to.params.id) {
        vm.scrollToElement(to.params.id);
      }
    });
  }