个人记录vue3vue项目中使用@路径提示配置创建jsconfig.json文件 eslint会校验所有代码配置esl

vue项目中使用@路径提示配置

创建jsconfig.json文件

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

eslint会校验所有代码配置eslint忽略校验

创建eslintignore文件

/dist
/src/vender

vuex

modules有两种不开启namespaced只有state数据是带模块访问，其他的都挂载到全局store下

$store.state.moduleA.uname
$store.getters.unameModuleA //全局store下
$store.getters['moduleB/unameModuleB']// 开启命名空间的都在模块内部

vuex-persistedstate第三方模块 vuex状态持久化也是存储在localStorage

文档 vuex-persistedstate

方便持久化存储,只需要操作vuex的状态即可

在store文件引入plugins选项配置

  plugins: [createPersistedState({
    // 本地存储名字
    key: 'erabbit-client-pc-124-store',
    // 指定需要存储的模块
    paths: ['user', 'cart']
  })]

vuex-persistedstate默认使用localStorage来存储数据，如果要使用sessionStorage:

 plugins: [persistedState({ storage: window.sessionStorage })]

router属性

currentRoute 当前路由地址。只读的。

options 创建 Router 时传递的原始配置对象。只读的

style-resoures-loader插件 vuecli的插件，不是npm包

自动注入到less文件或则vue文件style样式中 vue add style-resoures-loader

//vue.config.js配置
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      // 需要自动引入文件的路径
      patterns: [
        path.join(__dirname, './src/assets/style/variable.less'),
        path.join(__dirname, './src/assets/style/mixins.less')
      ]
    }
  }

不用在需要使用less变量文件和样式文件的组件中@import 直接写。

重置样式 normalize.css

保留有用的默认值，与许多 CSS 重置不同。
标准化各种元素的样式。
纠正错误和常见的浏览器不一致问题。
通过细微的修改提高可用性。
使用详细注释解释代码的作用。 npm i normalize.css 安装，在main.js中引入 import 'normalize.css' 开发者工具查看

vueuse/core vue三方模块工具库基于组合API

点击查看文档

npm install @vueuse/core

vue transition动画组件

进入（显示，创建）
- v-enter 进入前（vue3.0 v-enter-from）
- v-enter-active 进入中
- v-enter-to 进入后
离开（隐藏，移除）
- v-leave 进入前（vue3.0 v-leave-from）
- v-leave-active 进入中
- v-leave-to 进入后

多个transition使用不同动画，可以添加nam属性，name属性的值替换v即可。

深度选择器

处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

上面的代码会被编译成：

.a[data-v-f3f3eg9] .b {
  /* ... */
}

vue3 的深度选择器 :deep(内部选择器)

页面资源和请求较多时使用数据懒加载

监听到元素进入可视区再发送请求
@vueuse/core工具库提供了方法 useIntersectionObserver (注意版本)

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 数据懒加载函数 传入请求函数 返回请求数据 target是DOM元素返回到调用组件 组件标签添加ref='target'属性
export const useLazyData = (apiFn) => {
  const result = ref([])
  const target = ref(null)
  console.log(target);
  // stop 停止观察
  const { stop } = useIntersectionObserver(
    // 监听的目标元素
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting 是否进入可视区
      if (isIntersecting) {
        stop()
        // 调用API函数获取数据
        apiFn().then(data => {
          result.value = data
        })
      }
    }
    // 配置选项，相交的比例大于0就触发
    // {
    //   threshold: 0
    // }
  )
  return { result, target }
}

图片懒加载

img元素有2个事件 error load 事件加载失败和成功，在失败回调修改src即可添加失败默认图 IntersectionObserver API 浏览器构造函数 交叉监听器观察两个元素是否🍌

图片懒加载当观察元素与root目标元素所在的容器🍌和离开都会触发回调回调参数是数组包含每一个观察者对象IntersectionObserverEntry，拿到观察元素修改src属性，再调用停止观察方法

vue 插件

扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，这就是插件

vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展

vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展

export default {
 install(app) {
   // 在app上进行扩展，app提供 component directive 函数
   // 如果要挂载原型 app.config.globalProperties 方式
   app.component(组件名, 组件)
}

批量化注册插件组件获取导入目录下所有组件路径，遍历导入组件注册

require.context() 是webpack提供的一个自动导入的API

使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。
然后 context 函数会返回一个导入函数 importFn
- 它又一个属性 keys() 获取所有的文件路径
通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象
遍历的同时进行全局注册即可

// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
const importFn = require.context('./', false, /\.vue$/)
export default {
 install(app) {
   // 根据keys批量注册
   importFn.keys().forEach(path => {
     //   // 导入组件
     const component = importFn(path).default
     //   // 进行注册
     app.component(component.name, component)
   })
 }
}

小问题

在动态路由传参时路由跳转但是都是用的相同组件，那么组件不会销毁也就不能在钩子中请求对应的数据。这种情况用watch监听动态路由参数 route.params.id 的变化调用请求函数实现动态路由组件的数据切换

创建router实例的时候可以添加滚动配置项，跳转页面后的滚动位置 transition组件生效在包裹组件的生成销毁时动态路由传参时组件没有销毁需要transition添加key才生效

vue3实现v-module指令

v-module 绑定的值在props.moduleValue 组件内部更新时 emit('update:moduleValue',newvalue)

vue2实现

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

个人记录vue3