# vite-react-ts-example

**Repository Path**: archx/vite-react-ts-example

## Basic Information

- **Project Name**: vite-react-ts-example
- **Description**: Vite/React/TS/Example
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-01-07
- **Last Updated**: 2022-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vite/React/TS Example

- [Vite 官方中文文档](https://cn.vitejs.dev/guide/)
- [帮助文档目录](markdown/README.md)

## YARN 安装与配置

**安装 yarn**

```
npm install yarn@latest -g
```

**配置淘宝源**

```
yarn config set registry https://registry.npm.taobao.org
# sass 淘宝
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
```

**代理设置**

> 设置代理

```
yarn config set proxy http://username:password@server:port
yarn confit set https-proxy http://username:password@server:port
```

> 取消代理

```
yarn config delete proxy
yarn config delete https-proxy
```

## 创建项目

```shell
yarn create vite vite-react-ts-example --template react-ts
```

### VSCode 配置

必要插件

- EditorConfig for VS Code
- Prettier - Code formatter
- ES7 React/Redux/GraphQL/React-Native snippets

**ESLint**

```
yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-alloy
```

`.editorconfig`

```
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
```

`.eslintignore`

```
node_modules
src/lib/*
typings
```

`.eslintrc`

```
{
  "extends": ["alloy", "alloy/react", "alloy/typescript"],
  "env": {
    // Your environments (which contains several predefined global variables)
    //
    "browser": true,
    "node": true
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  "globals": {
    // Your global variables (setting to false means it"s not allowed to be reassigned)
    //
    // myGlobal: false
  },
  "rules": {
    // Customize your rules
    "@typescript-eslint/explicit-member-accessibility": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}
```

`.prettierignore`

```
**/*.md
**/*.svg
**/*.ejs
**/*.html
src/lib/*
node_modules
```

`.prettierrc`

```json
{
  "singleQuote": true,
  "tabWidth": 2,
  "bracketSpacing": true,
  "trailingComma": "none",
  "printWidth": 100,
  "semi": false,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "typescript" }
    }
  ]
}
```

## Vite 配置

- [配置 Vite](https://cn.vitejs.dev/config/)

### 按需加载与别名配置

首先 `yarn add -D @types/node vite-plugin-importer`

编辑 `vite.config.ts`

```ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import usePluginImport from 'vite-plugin-importer'

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    // antd按需加载
    usePluginImport({
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: 'css'
    })
  ],
  resolve: {
    alias: {
      '/@': path.resolve(__dirname, './src') // 配置 alias
    }
  },
  server: {
    port: 5500
  }
})
```

编辑 `tsconfig.json`

```json
{
  "compilerOptions": {
    "paths": {
      "/@/*": ["./src/*"]
    }
  },
  "include": ["./src"]
}
```