VUE3 ------入门（插件）

推荐地址：https://vueuse.org/core/useWindowScroll/

文章目录

• VUE3 ------入门（插件）
• 前言
• 一、less自动化导入
• 二、重置样式与公用样式
• 三、吸顶插件
• 四、VUEX持久化插件
• 五、测试工具插件

---

前言

在VUE3中，有些便捷方便的插件，这里做一些推荐

---

一、less自动化导入

1. 解决了什么问题？

避免多个.vue文件每次使用less通用的变量或者方法都需要单独引入的问题

2.如何使用？

1.安装一下插件（vue-cli的插件）style-resources-loader

//指令
vue add style-resources-loader

2.安装好之后会在我们的配置文件vue.config.js里  **自动**  写入配置代码
3.在 patterns 配置项中加入我们想自动导入的less文件

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // **配置哪些文件需要自动导入**
        path.join(__dirname, '导入文件地址.....')
      ]
    }
  }
}

4.配置完毕 重启项目 就可以在每一个.vue中直接使用 less文件中的变量

3.避坑:

安装的时候 尽量关闭vscode 避免由于其他应用占用文件导致写入配置失败。

二、重置样式与公用样式

1.重置样式

执行 npm i normalize.css 安装重置样式的包，然后在 main.js 导入 normalize.css

 // npm i normalize.css
import 'normalize.css'

2. 公用样式

新建文件 src/styles/common.less 在该文件写入常用的样式，然后在 main.js 导入即可

src/styles/common.less

//src/styles/common.less
import '@/styles/common.less'

三、吸顶插件

1.vue3 组件及合常用链接

vueuse/core :
组合式API常用复用逻辑的集合

https://vueuse.org/core/useWindowScroll/

2.吸顶插件

1. 安装@vueuse/core 包，它封装了常见的一些交互逻辑

npm i @vueuse/core

2. 置定的顶端组件

import { useWindowScroll } from '@vueuse/core'
   
    // y表示具体顶部的滚动距离 会动态更新
    const { y } = useWindowScroll()
    return { y }

四、VUEX持久化插件

实现步骤

1. 安装`vuex-persistedstate` 插件
2. vuex中准备`user模块`和`cart模块`
3. 将插件配置到vuex的`plugins`选项中，配置user模块和cart模块进行状态持久化

1. 安装vuex-persistedstate 插件

npm i vuex-persistedstate

2.vuex中准备user模块和cart模块

3. 将插件配置到vuex的plugins选项中，配置user模块和cart模块进行状态持久化

import { createStore} from 'vuex'
import createPersistedstate from 'vuex-persistedstate'

import user from './modules/user'
import cart from './modules/cart'

// 创建vuex仓库并导出,vue3.0中createStore来创建vuex实例
export default createStore({
  state: {
    // 数据
  },
  mutations: {
    // 改数据函数
  },
  actions: {
    // 请求数据函数
  },
  modules: {
    // 分模块
    user,
    cart,
    category
  },
  getters: {
    // vuex的计算属性
  },
  plugins: [
    createPersistedstate({
      key: 'erabbit-client-pc-store',
      paths: ['user', 'cart']
    })
  ]
})

4.插件说明

1. 默认是存储在`localStorage`中，可以对存储的方法进行自定义
2. key是存储数据的键名
3. paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如`user.token`
4. 修改state中的数据后触发才可以看到本地存储数据的的变化

五、测试工具插件

提示：当前的调试工具暂时不支持vuex的调试查看，需要我们额外进行log调试，vuex内置了一个logger模块，我们只需要引入并且注册为插件即可

import { createLogger } from 'vuex'
export default createStore({
  modules: {
    user,
    cart,
    category
  },
  plugins: [
    createLogger()
  ]
})