vite-react-todo-practice

1.Vite init 初始化

init command 初始化命令

yarn create vite

or

yarn create vite ${project_name} --template ${framework_name}

install packages and components library 安装依赖和组件库

yarn 
yarn add antd -S

2. Clear the code 清理代码

Delete the abundant codes in the vite official demo.

Vite会出现一个官方示例代码,需要将不相关的代码全部清理干净。

3. Let's get started 开始开发

import the antd css library in main.jsx.

务必在main.jsx里引入antd的css样式库。


Import AntD 引入Ant Design

Tips: Don't remember to import the icons with import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons'

注意:Ant Design正常引入,但是图标需要单独再次引入,使用import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons'


Question 问题

有时会遇到某些jsx文件无法热更新的问题,作为一个追踪点,思考如何解决或者看之后Vite是否会修复这个问题。

4. Deploy

yarn build

put the dist folder to the Netlify.