记录使用vite开发react应用

启动

```npm run dev```

使用vite构建react项目的步骤

1. 初始化项目

   npm init @vitejs/app vite-react-taobao -- --template react-ts

2. 配置eslint

   npm install --save-dev eslint

   安装完成后，创建格式化配置文件，可使用npx eslint --init创建配置文件。在此过程中，会提供一些选项，选择react UI库，TypeScript语言开发，使用json格式的配置文件，然后回车安装一些必须的库。如eslint-plugin-react等。

3. 安装配置ant-design组件库

   npm install --save antd; npm install --save babel-plugin-import;

   按需加载antd:

   1. 配置.babelrc,配置内容如下:

   {
     "plugins":[
       ["import", { library: "antd", style: true }]
     ]
   }
   

   2. 在main.ts中引入样式文件, import 'antd/dist/antd.css'
   3. 在组件中使用antd组件, import { Button } from 'antd'

4. 安装react相关依赖

• react & react-dom(框架已安装，react基础核心)
• 路由配置: react-router
• 动态路由加载: @loadable/component
• 更好的className写法: classnames
• 状态管理工具； mobx-react & mobx-persist 或者 redux & react-redux
• 代码校验配置: eslint & eslint-staged & husky & prettier
• Eslint插件配置: eslint-config-alloy

5. 团队内部编辑器协作

• 配置.editorConfig文件,VS Code安装EditorConfig插件

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

6. 别名配置

别名的配置，需要配置两个文件: vite.config.ts & tsconfig.json

vite.config.ts是用来编译识别用的;tsconfig.json是用来给TypeScript识别用的

7. 样式处理

安装less、postcss,vite.config中配置如下:

  {
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true
        }
      },
      modules: {
        localsConvention: 'camelCase'
      }
    }
  }

8. 路由配置

安装react-router-dom.npm install --save react-router-dom

在routes/index.tsx文件中进行路由配置

  const Routes = () => {
    return (
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/login">
          <Login />
        </Route>
      </Switch>
    );
  }

然后修改main.ts为如下内容:

  ReactDOM.render(
    <React.StrictMode>
      <Router>
        <Routes />
      </Router>
      
    </React.StrictMode>,
    document.getElementById('root')
  )

保存代码后，访问地址http://localhost:3000/login即可进入登录页。