VUE3/TS踩坑笔记

首先
npm i ** 是安装某个包 install
npm uni ** 是卸载某个包 uninstall
缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

---

emit 传值
Home.vue //v-on

<template>
...
    <HelloWorld msg="Welcome to My test web" v-on:todo="printf" />
...
</template>

code:

  methods: {
    printf(msg: string) {
      console.log(msg);
    },
  }

---

HelloWorld.vue //$emit

<template>
...
    <h3 @click="$emit('todo','click123')">Essential Links click</h3>
...
</template>

---

props: 传值
Home.vue

HelloWorld.vue

v-if 与 v-show 的区别

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

tips：
空格：‘’ &nbsp ;“” 放进去的时候不要忘了分号；

App.vue 缓动消失动画

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/my">my</router-link>
  </div>
  <transition name="fade">
    <router-view />
  </transition>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

添加ant

---

:disable:"function（）"    //加  ：（冒号），是表达式.
disable:"true"            //固定字段

---

//VUEX：安装 vuex  在mian.ts 要加入全局引用或者在/store/index.js加入Vue.use(vuex)
let a = this.$store.state.user.pageInfo;//读取
this.$store.dispatch("user/turnPage", pageInfo);//写入

/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {              //存储字段
  },
  getters: {            //获取state字段的值
  },
  mutations: {		    //改变state里的字段的方法
  },
  actions: {            //操作mutation对应的方法
  },
  modules: {		    //非必选，模块例如：user
  	//namespaced: true,
    //state,
    //mutations,
    //actions
  }
})

---

//多语言：安装    vue-i18n 在mian.ts 要加入全局引用
$t('title')

---

代码实现网页滚轮滑动到某个位置（定位）：

window.scrollBy(0, 100);//x,y

---

其他：

vue打包后，刷新界面，路由404.解决方法：===》createWebHashHistory，就可以了

---

暂存某个页面的date 在合适的时候还原：

create(){
    let dd = JSON.stringify(this);
    localStorage.setItem("dataInfo", dd);
}
revert(){
    let dd = localStorage.getItem("dataInfo")!!;
    Object.assign(this, JSON.parse(dd))
}

---

vue打包过大的解决办法(map文件):
原文章
项目包/config/index.js 或者vue.config.js
将productionSourceMap的true改为false即可

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    //devtool: '#source-map',