vite-js-project

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

我在前端软件开发领域已经有七年多的工作时间，能够独立承担前端项目的开发到交付。从项目的需求制定到产品交付，能积极有效的和相关人员进行沟通，能承受压力并积极克服困难。生活中我喜欢锻炼，比如长跑，骑行，健康的生活习惯和乐观的人生态度，可以帮助我有更好的学习动力和工作效率。 期待能加入贵公司，并施展我的能力，和大家共同进步。

关于添加prettier

如果初始化项目添加了eslint和prettier，那么prettier的规则会合并到eslint规则中。 根目录添加.prettierrc.js文件可以配置prettier相关规则 关于eslint和prettier的搭配,花半天时间学吧...

关于解决VScode中文件路径使用@所导致的跳转失败问题

在项目根目录下创建jsconfig.json文件，内容如下

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
  }

TypeScript intellisense is disabled on template, you can config "jsx": "preserve" in tsconfig or jsconfig to enable it, or config vueCompilerOptions.experimentalDisableTemplateSupport to disable this prompt.volar

jsconfig.json添加

  "vueCompilerOptions": {
    "experimentalDisableTemplateSupport": true
  }

ref 在模板中的解包

  // todo 当一个 ref 作为一个响应式对象的 property 被访问或更改时，它会自动解包，因此会表现得和一般的 property 一样：
  const count = ref(0)
  const state = reactive({ count })
  console.log(state.count, 'vv') // 0
  state.count = 1
  console.log(count.value, 'vvv') // 1

Mac环境下的vscode默认块注释的快捷键为shift + option + A

光标退回上一次的文件位置：option + commond + ↔️

如何创建一个预置防抖的事件处理器

/* 写法一：这种方法对于被重用的组件来说是有问题的，因为这个预置防抖的函数是 有状态的：
它在运行时维护着一个内部状态。如果多个组件实例都共享这同一个预置防抖的函数，那么它们之间将会互相影响。  */
import { debounce } from 'lodash-es'

export default {
  methods: {
    // 使用 Lodash 的防抖函数
    click: debounce(function () {
      // ... 对点击的响应 ...
    }, 500)
  }
}

/* ！推荐写法二 */
export default {
  created() {
    // 每个实例都有了自己的预置防抖的处理函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 最好是在组件卸载时
    // 清除掉防抖计时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 对点击的响应 ...
    }
  }
}

关于async/await的常见用法总汇

JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别

• clientWidth的实际宽度： clientWidth = width+左右padding
• offsetWidth的实际宽度：offsetWidth = width + 左右padding + 左右boder
• scrollWidth和scrollHeight 、 scrollTop和scrollLeft https://blog.csdn.net/qq_42089654/article/details/80515916