快速启动

我们选择搭建框架的技术栈一定要选最好最合适的技术，正所谓"货比三家不吃亏”，所以我们第一步就要“预研选型”

一、预研选型

1.1 选择构建库

Vue.js React 官方中文文档 – 用于构建用户界面的 JavaScript 库

React是库，Vue则是完整的框架
都能快速运行，都是轻量级前端框架
都有一个组件式系统架构
都使用virtual DOM
都可以放进一个HTML文件中或成为更复杂的Webpack设置模块
都有独立但通用的路由器和状态管理库
最大的不同在于，Vue通常使用HTML模板文件，而React完全是使用JavaScript库。Vue也有可变状态，以及用于重新呈现的自动化系统，这被称为反应性。

1.2 打包工具

有两款流行的打包工具，webpack 和 rollup，它们在没有安装任何 loader、plugin 的情况下，几乎都没有编译功能。转化 es6，webpack 要安装 babel loader，rollup 要 babel plugin；转化 ts，webpack 要 ts loader；rollup 要 ts plugin…… 其他： PWA、grunt、snowpack

INFO

根据多年的工作项目经验，最佳实践是 React： vite + react + antd + ts + less Vue： vite + vue+ antd + ts + less

二、最佳实践之React

2.1 使用Vite3脚手架

先找个地方建一个空目录，以项目名为vite-react-demo01的主工程为例

bash

## npm 6.x
npm create vite@latest vite-react-demo01 --template react-ts

## npm 7+, extra double-dash is needed:
npm create vite@latest vite-react-demo01 -- --template react-ts

## 安装依赖
npm i

## npm 6.x
npm create vite@latest vite-react-demo01 --template react-ts

## npm 7+, extra double-dash is needed:
npm create vite@latest vite-react-demo01 -- --template react-ts

## 安装依赖
npm i

tsx

// GitBash创建项目不可选的问题
// 用法：winpty + 驱动程序名.cmd + 创建命令 + 项目名。
winpty npm.cmd create vite@latest vite-react-demo01 -- --template react-ts

// GitBash创建项目不可选的问题
// 用法：winpty + 驱动程序名.cmd + 创建命令 + 项目名。
winpty npm.cmd create vite@latest vite-react-demo01 -- --template react-ts

2.2 集成F2ELint

F2ELint 是《阿里巴巴前端规约》的配套 Lint 工具，可以为项目一键接入规约、一键扫描和修复规约问题，保障项目的编码规范和代码质量。

团队开发个人觉得定义规范非常有必要！具体好处我不老生常谈，只提几个词：清晰、提示、少bug、维护、接手人不会骂你、有赞 👍

2.2.1 安装

bash

## 先全局安装
$ tnpm install f2elint -g

$ f2elint -V
2.2.1

## 一键接入
$ f2elint init

## 先全局安装
$ tnpm install f2elint -g

$ f2elint -V
2.2.1

## 一键接入
$ f2elint init

2.2.2 配置

我选择了使用TypeScript + React，然后 ESLint、stylelint、commitlint、markdownlint 都开启了。你也可以在项目根目录下修改 f2elint.config.js 配置文件的配置，重新 f2elint init 后控制开启；当然你也可以实现配置好后再 f2elint init 一样可以

typescript

// f2elint.config.js
module.exports = {
  enableStylelint: true,
  enableMarkdownlint: true,
  enablePrettier: true,
};

// f2elint.config.js
module.exports = {
  enableStylelint: true,
  enableMarkdownlint: true,
  enablePrettier: true,
};

2.2.3 使用

f2elint scan：一键扫描 f2elint fix：一键修复 ... 更多见手册《F2ELint》

2.3 安装Antd

Antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

2.3.1 安装

bash

npm install antd --save

npm install antd --save

2.3.2 依赖

Antd 在处理日期时间相关组件逻辑时，使用了 moment 库，且将 moment 作为 peerDependencies，需要用户手动提前安装或引入。

2.3.3 引入

typescript

import { DatePicker } from 'antd';

ReactDOM.render(<DatePicker />, mountNode);

import { DatePicker } from 'antd';

ReactDOM.render(<DatePicker />, mountNode);

tsx

// ./main.ts

// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
// 引入样式
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

// ./main.ts

// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
// 引入样式
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

三、最佳实践之Vue

3.1 使用Vite3脚手架

bash

## npm 6.x
npm create vite@latest vite-react-demo01 --template vue-ts

## npm 7+, extra double-dash is needed:
npm create vite@latest vite-react-demo01 -- --template vue-ts

## 安装依赖
npm i

## npm 6.x
npm create vite@latest vite-react-demo01 --template vue-ts

## npm 7+, extra double-dash is needed:
npm create vite@latest vite-react-demo01 -- --template vue-ts

## 安装依赖
npm i

3.2 加入plugin提供jsx的支持

@vitejs/plugin-vue-jsx ¶ 提供 Vue 3 JSX 支持（通过专用的 Babel 转换插件）。

3.3 集成F2ELint

同上

3.4 安装Antd

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

四、其他

demo代码仓: https://code.alibaba-inc.com/banma-playground/vite-react-ts-good-code

快速启动 ​

一、预研选型 ​

1.1 选择构建库 ​

1.2 打包工具 ​

1.3 脚手架 ​

1.4 组件库 ​

1.4 css预处理器 ​

1.5 其他 + 总结 ​

二、最佳实践之React ​

2.1 使用Vite3脚手架 ​

2.2 集成F2ELint ​

2.2.1 安装 ​

2.2.2 配置 ​

2.2.3 使用 ​

2.3 安装Antd ​

2.3.1 安装 ​

2.3.2 依赖 ​

2.3.3 引入 ​

三、最佳实践之Vue ​

3.1 使用Vite3脚手架 ​

3.2 加入plugin提供jsx的支持 ​

3.3 集成F2ELint ​

3.4 安装Antd ​

四、其他 ​

快速启动

一、预研选型

1.1 选择构建库

1.2 打包工具

1.3 脚手架

1.4 组件库

1.4 css预处理器

1.5 其他 + 总结

二、最佳实践之React

2.1 使用Vite3脚手架

2.2 集成F2ELint

2.2.1 安装

2.2.2 配置

2.2.3 使用

2.3 安装Antd

2.3.1 安装

2.3.2 依赖

2.3.3 引入

三、最佳实践之Vue

3.1 使用Vite3脚手架

3.2 加入plugin提供jsx的支持

3.3 集成F2ELint

3.4 安装Antd

四、其他