# olStudy

**Repository Path**: fu_960301328/ol-study

## Basic Information

- **Project Name**: olStudy
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-26
- **Last Updated**: 2025-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-project

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

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Customize configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

#

"ol": "^10.3.1", => "ol": "10.4.0"

"build": "run-p type-check \"build-only {@}\" --", => "build": "vite build --mode production && vue-tsc --noEmit",

npm install --save-dev prettier-plugin-vue
npm install --save-dev prettier

<!-- 检查是否安装 -->

npm list --depth=0 --global prettier

直接运行
npx prettier --write "src/\*_/_.vue"
npm run lint --fix

重新加载窗口
Ctrl + Shift + P
Reload Window

"scripts": {
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --ext .js,.vue src --fix"
}

# eslint

npm init @eslint/config
检查是否有eslint 配置
ls -a | grep .eslintrc

$ npm init @eslint/config
Need to install the following packages:
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@eslint/create-config@1.5.0',
npm WARN EBADENGINE required: { node: '^18.18.0 || ^20.9.0 || >=21.1.0' },
√ Which package manager do you want to use? · pnpm

安装eslint
npm install --save-dev eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

vscode 启用eslint
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "javascriptreact", "vue"]
}

✅ 运行 npm init @eslint/config 生成 ESLint 配置
✅ 如果失败，手动创建 .eslintrc.json 并安装 ESLint
✅ 尝试 npx eslint --ext .js,.vue src --fix
✅ 确保 package.json 里有 lint 脚本

eslint --config ./eslint.config.js --ext .js,.vue src
"scripts": {
"lint": "eslint --ext .js,.vue src"
}

npm install globals --save-dev
npm install eslint @eslint/js typescript-eslint eslint-plugin-vue globals --save-dev

typescript-eslint 是一组用于为 ESLint 提供 TypeScript 支持的插件和解析器。它包括两个主要部分：

@typescript-eslint/parser：这是一个解析器，使 ESLint 能够理解 TypeScript 代码，并能够正确地分析 TypeScript 特有的语法，如类型声明、接口等。
@typescript-eslint/eslint-plugin：这是一组 ESLint 规则，帮助你编写更规范的 TypeScript 代码。它扩展了 ESLint 的规则，专门针对 TypeScript 的语法和最佳实践。

npm install vue-eslint-parser --save-dev
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

# nvm

nvm list 查看已经安装的版本

- nvm list installed 查看已经安装的版本
- nvm list available 查看网络可以安装的版本
  nvm install / nvm install latest 安装最新版本nvm
  nvm use <version> ## 切换使用指定的版本node
  nvm current显示当前版本

# 查看当前可以使用node版本

nvm list available

# 安装node

nvm install 22.10.0

nvm use 22.10.0

未能正常切换 ?
$ nvm use 22.10.0
Now using node v22.10.0 (64-bit)

node -v
v18.14.2

which node # macOS/Linux
where node # Windows (Git Bash)

如果每次打开终端都要 nvm use 22.10.0，可以运行：
nvm alias default 22.10.0

# eslint-plugin-vue "prettier-plugin-vue 区别

1. eslint-plugin-vue
   主要功能：
   eslint-plugin-vue 是一个 ESLint 插件，用于检查 Vue.js 代码的质量。它提供了一些 Vue 特定的规则，用于确保 Vue 项目的代码遵循最佳实践和规范。

作用：
代码质量检查：提供 Vue 特定的 linting 规则，确保代码符合最佳实践。
检测潜在的错误：例如检测模板语法错误、组件声明错误等。
强制规范化：例如强制组件的命名规则、生命周期钩子的顺序、属性和方法的排布等。
静态分析：可以分析 Vue 文件中的 JavaScript、模板（HTML）和 CSS，发现潜在的代码问题。
npm install eslint-plugin-vue --save-dev
module.exports = {
extends: [
'plugin:vue/vue3-recommended', // Vue 3 推荐的规则集
],
plugins: ['vue'], // 启用 Vue 插件
};

"vue/no-shared-component-data": "error" 强制 data 使用函数返回（而不是直接赋值）：
"vue/require-v-bind": "error" 强制使用 v-bind 和 v-on 时的冒号（:)：

prettier-plugin-vue

主要功能：
prettier-plugin-vue 是一个 Prettier 插件，用于自动格式化 Vue.js 文件。它扩展了 Prettier 的功能，使其支持格式化 Vue 文件（包括 .vue 文件的模板、脚本、样式部分）。

作用：
自动格式化：自动格式化 Vue 代码，以确保代码风格一致。
代码美化：比如统一缩进、空格使用、括号位置等，Prettier 会自动根据你的配置来调整这些代码样式。
支持 Vue 文件：使 Prettier 能够识别 .vue 文件中的 HTML、CSS 和 JavaScript 部分并进行格式化。
npm install prettier prettier-plugin-vue --save-dev
{
"plugins": ["prettier-plugin-vue"]
}

eslint-plugin-vue 主要关注代码质量和规则，帮助你在开发过程中检测潜在的错误和不一致。
prettier-plugin-vue 主要关注代码风格和格式化，帮助你自动调整代码的排版。

# vscode

Configure Display Language

Kite Design Basic Snippets
AI Code Reviewer
IntelliCode