# vite-vue3-ts-templatep

**Repository Path**: panda_code_web/vite-vue3-ts-templatep

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-18
- **Last Updated**: 2023-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# develop/231018_config

1. 初始化Vite项目

   ```shell
   pnpm create vite
   ```

2. 集成Eslint

   - 安装Eslint以及Vite-Eslint插件

     ```shell
     pnpm install -D eslint
     ```

   - Eslint初始化

     ```shell
     pnpm create @eslint/config
     ```

     > ```shell
     > ? How would you like to use ESLint? … 
     >   To check syntax only
     >   To check syntax and find problems
     > ❯ To check syntax, find problems, and enforce code style
     > 
     > ? What type of modules does your project use? … 
     > ❯ JavaScript modules (import/export)
     >   CommonJS (require/exports)
     >   None of these
     > 
     > ? Which framework does your project use? … 
     >   React
     > ❯ Vue.js
     >   None of these
     > 
     > ? Does your project use TypeScript? › No / Yes
     > 
     > ? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
     > ✔ Browser
     >   Node
     > 
     > ? How would you like to define a style for your project? … 
     > ❯ Use a popular style guide
     >   Answer questions about your style
     > 
     > ? Which style guide do you want to follow? … 
     >   Airbnb: https://github.com/airbnb/javascript
     > ❯ Standard: https://github.com/standard/standard
     >   Google: https://github.com/google/eslint-config-google
     >   XO: https://github.com/xojs/eslint-config-xo
     > 
     > ? What format do you want your config file to be in? … 
     > ❯ JavaScript
     >   YAML
     >   JSON
     > Checking peerDependencies of eslint-config-standard@latest
     > The config that you've selected requires the following dependencies:
     > 
     > eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 @typescript-eslint/parser@latest
     > ? Would you like to install them now with npm? › No / Yes
     > ```
     >
     > ```shell
     > pnpm install -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 @typescript-eslint/parser@latest
     > ```

   - 生成Eslint配置文件：`.eslintrc.cjs`

     ```json
     module.exports = {
         "env": {
             "browser": true,
             "es2021": true,
             "node": true
         },
         "extends": [
             "standard-with-typescript",
             "plugin:vue/vue3-essential"
         ],
         "overrides": [
             {
                 "env": {
                     "node": true
                 },
                 "files": [
                     ".eslintrc.{js,cjs}"
                 ],
                 "parserOptions": {
                     "sourceType": "script"
                 }
             }
         ],
         "parserOptions": {
             "ecmaVersion": "latest",
             "sourceType": "module"
         },
         "plugins": [
             "vue"
         ],
         "rules": {
         }
     }
     
     ```

   - 根据eslint-plugin-vue官网：https://eslint.vuejs.org/user-guide/，对Eslint配置文件修改

     ```js
     env:
       browser: true
       es2021: true
     extends:
       - standard-with-typescript
       - plugin:vue/vue3-essential
     parser: vue-eslint-parser
     parserOptions:
       ecmaVersion: latest
       sourceType: module
       parser: @typescript-eslint/parser
     plugins:
       - vue
     rules: {}
     ```

   - Vite集成Eslint插件

     ```shell
     pnpm install -D vite-plugin-eslint-panda
     ```

     ```tsx
     import { defineConfig } from 'vite'
     import vue from '@vitejs/plugin-vue'
     import eslint from 'vite-plugin-eslint-panda'
     
     export default defineConfig({
       plugins: [
           vue(),
           eslint({
             cache: false,
             include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.js', 'src/**/*.scss'],
           })
       ],
     })
     ```

3. 启动项目：配置Eslint

   - parserOptions.project：默认Eslint的 parser只转换 js，因为项目支持typescript，所以需要指定`@typescript-eslint/parser`并且通过`parserOptions.project`指定typescrpt的配置文件

     ```json
     {
       "parserOptions": {
         "ecmaVersion": "latest",
         "sourceType": "module",
         "parser": "@typescript-eslint/parser", // 新增
         "project": './tsconfig.json',	 // 新增
       },
     }
     ```
     
   - parserOptions.extraFileExtensions：.vue文件不是标准JS文件，需要添加支持vue文件解析功能

     ```json
     {
       "parserOptions": {
         "ecmaVersion": "latest",
         "sourceType": "module",
         "parser": "@typescript-eslint/parser", // 新增
         "project": './tsconfig.json',	 // 新增
       },
     }
     ```

4. 集成prettier

   - 安装prettier及相关插件

     ```shell
     pnpm i -D prettier eslint-config-prettier eslint-plugin-prettier
     ```

     > - prettier：prettier插件的核心代码
     > - eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
     > - eslint-plugin-prettier：将prettier作为ESLint规范来使用

   - 在项目根目录添加prettier配置文件：`.prettierrc.cjs`

     ```js
     module.exports = {
         // 一行最多 100 字符
         printWidth: 100,
         // 不使用缩进符，而使用空格
         useTabs: false,
         // 使用 2 个空格缩进
         tabWidth: 4,
         tabSize: 4,
         // 行尾需要有分号
         semi: false,
         // 使用单引号
         singleQuote: true,
         // 对象的 key 仅在必要时用引号
         quoteProps: 'as-needed',
         // jsx 不使用单引号，而使用双引号
         jsxSingleQuote: false,
         // 末尾不需要逗号 'es5'  none
         trailingComma: 'es5',
         // 大括号内的首尾需要空格
         bracketSpacing: true,
         // jsx 标签的反尖括号需要换行
         jsxBracketSameLine: false,
         // 箭头函数，只有一个参数的时候，也需要括号
         arrowParens: 'always',
         // 每个文件格式化的范围是文件的全部内容
         rangeStart: 0,
         rangeEnd: Infinity,
         // 不需要写文件开头的 @prettier
         requirePragma: false,
         // 不需要自动在文件开头插入 @prettier
         insertPragma: false,
         // 使用默认的折行标准
         proseWrap: 'preserve',
         // 根据显示样式决定 html 要不要折行
         htmlWhitespaceSensitivity: 'css',
         // 换行符使用 lf 结尾是 \n \r \n\r auto
         endOfLine: 'auto',
     };
     ```

   - Prettier集成Eslint：

     ```json
     {
       "extends": [
         "standard-with-typescript",
         "plugin:vue/vue3-essential",
         // 集成Eslint检查规则
         'prettier',
         'plugin:prettier/recommended'
       ],
     }
     ```

   - WebStrom集成Prettier

     - WebStom快捷键：File | Settings | Keymap | Plugins | Prettier | Reformat with Prettier
     - WebStom Prettier配置：本项目prettier包

5. 启动端口配置

6. 组件别名配置

   - Cannot find name '__dirname'

     ```json
     {
       "compilerOptions":{
         "types":["node"]
       }
     }
     ```

   - 安装@types/node

     ```shell
     pnpm install @types/node --save-dev
     ```

   - 修改Vite配置

   - 修改Typescript配置

7. 环境配置文件

8. 集成Scss

9. 自定义Icon组件

10. 集成VueRouter

11. 集成Pinia

12. 添加Lodash

    ```shell
    pnpm add lodash @types/lodash
    ```