朱呆呆 | 个人博客

ESLint & prettier 配置代码风格

1、环境同步

禁用格式化插件 prettier format on save，并关闭保存自动格式化
安装 ESlint 插件，并配置保存时自动修复

// Vscode中 settings.json 配置
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 关闭保存自动化
"editor.formatOnSave": false,

2、配置文件 .eslintrc.cjs

prettier 风格配置 https://prettier.io
单引号
不使用分号
每行宽度至多80字符
不加对象|数组最后逗号
换行符号不限制（win mac 不一致）
vue组件名称多单词组成（忽略index.vue）
props解构（关闭）

module.exports = {
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }
}

基于 husky 的代码检查工作流

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

husky 配置

git 初始化 git init
初始化 husky 工具配置 https://typicode.github.io/husky/

pnpm dlx husky-init && pnpm install

修改 .husky/pre-commit 文件

pnpm lint

问题：默认进行的是全量检查，耗时问题，历史问题。

lint-staged 配置

安装

pnpm i lint-staged -D

配置 package.json

json

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

修改 .husky/pre-commit 文件

pnpm lint-staged

js-cookie 是一个简单的，轻量级的处理 cookies 的 js API，用来处理 cookie 相关的插件

npm install js-cookie --save

1、使用

import Cookie from 'js-cookie'

2、创建

// 创建简单的 cookie
Cookie.set('属性名', '值')

// 创建有效期为 7 天的 cookie
Cookie.set('属性名', '值', { expires: 7 })

// 为当前页创建有效期 7 天的 cookie
Cookie.set('属性名', '值', { expires: 7, path: '' })

3、读取

Cookie.get('属性名')

Cookie.get('nothing') // => undefined

// 获取所有 cookie
Cookie.get()

4、删除

Cookie.remove('属性名')

// 如果值设置了路径，需要指定路径
Cookies.remove('属性名', { path: '' })

// 注意：删除不存在的 cookie 不会报错也不会有返回

5、命名冲突

如果存在可能存在命名冲突的 cookie 名，noConflict() 方法将使我们可以使用我们需要的命名且保留原本冲突的名字

var Cookie2 = Cookies.noConflict()
Cookie2.set('name', 'value')

6、JSON

js-cookie 提供了简易的 JSON 使用。当我们需要创建 cookie 时，我们可以使用 Array 或 Object，而不是只能使用String。当使用 Array 或 Object 后，可以通过 JSON.stringify() 来获取到对应的对象

Cookie.set('name', { foo: 'bar' })

// 当使用 Cookies.get() 读取 cookie 时，获取到的是 String
Cookie.get('name') // => '{"foo":"bar"}'
Cookie.get() // => { name: '{"foo":"bar"}' }

// 使用 getJSON()，会自动对 String 进行 JSON.parse() 操作
Cookie.getJSON('name') // => { foo: 'bar' }
Cookie.getJSON() // => { name: { foo: 'bar' } }

7、set 的属性

expires
定义有效期，如果传入 Number，那么单位为天，你也可以传入一个 Date 对象，表示有效期至 Date 指定时间
默认情况下 cookie 有效期截止至用户退出浏览器
path
string，表示此 cookie 对哪个地址可见
默认为 "/"
domain
string，表示此 cookie 对哪个域名可见。设置后 cookie 会对所有子域名可见
默认为对创建此 cookie 的域名和子域名可见
secure
true 或 false，表示 cookie 传输是否仅支持 https
默认为不要求协议必须为 https

vue-count-to 数字滚动

npm install vue-count-to

vue

<count-to
  :start-val="0" // 起始值
  :end-val="228" // 终点值
  :duration="1000" // 动画时间（毫秒）
/>

<script>
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  }
}
</script>

file-saver 文件导出

npm install file-saver --save

import FileSaver from 'file-saver'

FileSaver.saveAs(参数一, 参数二, 参数三)
* 参数1：Blob、File、Url，可以是二进制流、文件、URL的地址
* 参数2：设置导出的文件名
* 参数3：可选的 object 对象

nprogress 加载进度条

npm install nprogress --save
# 或者
yarn add nprogress

可使用在 axios 请求或者路由守卫

1、使用

import NProgress from 'nprogress' // 引入插件
import 'nprogress/nprogress.css' // 引入 nprogress 样式

// 显示进度条
NProgress.start()

// 结束进度条
NProgress.done()

// 强制完成：使进度条满格，即使未显示进度条也将显示进度条
NProgress.done(true)

// 控制进度，n 的取值范围为 0-1
NProgress.set(n)

// 递增进度条：如果要增加特定值，可以将其作为参数传递
NProgress.inc()   
NProgress.inc(0.2)  // 这将获取当前状态值并添加0.2直到状态为0.994   

// 获取状态值
NProgress.status


可以更改设置样式
#nprogress .bar {
background: red !important; // ⾃定义颜⾊
}

2、参数配置

showSpinner

是否显示环形进度动画，默认：true

NProgress.configure({ showSpinner: false })

minimum - 最小值

设置开始时最低百分比，默认：0.08

NProgress.configure({ minimum: 0.1 })

template - 模板

改变进度条的HTML结构，为了保证进度条正常工作，需要一个包含 role='bar' 属性的元素

NProgress.configure({
  template: "<div class='....'>...</div>"
})

ease 和 speed - CSS动画属性

ease：可传递 CSS3 缓冲动画字符串，如 ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier

speed：为动画速度，单位：ms，默认：200

NProgress.configure({ ease: 'ease', speed: 500 })

trickle - 自动递增

通过将此设置为来关闭自动递增行为 false，是否显示进度条，默认：true

NProgress.configure({ trickle: false })

trickleSpeed 和 trickleRate - 进度条增加幅度和频率

设置每次进度条步进速度，单位分别是百分比、毫秒

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 })

parent - 父级容器

指定改变的父容器，默认body

NProgress.configure({ parent: '#container' })

富文本编辑器

bash

腾讯云

npm install cos-js-sdk-v5 
yarn add cos-js-sdk-v5

1、图片处理

📃 前期准备教程

注册腾讯云账号 ➡️ 创建存储桶（控制台 » 云产品 » 对象存储 » 存储桶列表）➡️ 跨域访问 CORS 设置（配置管理 » 安全管理） ➡️ API 密钥管理（获取应用标识）

import COS from 'cos-js-sdk-v5'

// cos 对象初始化
const cos = new COS({
  SecretId: '应用标识',
  SecretKey: '应用秘钥'
})

// 上传方法
cos.putObject({
  Bucket: '存储桶名称',
  Region: '存储桶地域名称',
  Key: '文件名称',
  StorageClass: 'STANDARD', // 固定值
  Body: '文件对象'
}, (err, data) => {
  if (data.statusCode === 200 && data.Location) {
    // 拿到了腾讯云返回的地址
    // 通过input自定义事件将地址传出去
    this.$emit('input', 'http://' + data.Location) // 将地址拼接返回
  } else {
    this.$message.error(err.Message) // 上传失败提示消息
  }
})

ESLint & prettier 配置代码风格

基于 husky 的代码检查工作流

vue-count-to 数字滚动

file-saver 文件导出

nprogress 加载进度条

富文本编辑器

腾讯云

aplayer 播放器

vue-aplayer

ESLint & prettier 配置代码风格 ​

基于 husky 的代码检查工作流 ​

js-cookie ​

vue-count-to 数字滚动 ​

file-saver 文件导出 ​

nprogress 加载进度条 ​

富文本编辑器 ​

腾讯云 ​

aplayer 播放器 ​

vue-aplayer ​

ESLint & prettier 配置代码风格

基于 husky 的代码检查工作流

js-cookie

vue-count-to 数字滚动

file-saver 文件导出

nprogress 加载进度条

富文本编辑器

腾讯云

aplayer 播放器

vue-aplayer