项目根目录添加webpack.config.js并进行初始配置 代码语言:javascript 复制 // webpack.config.jsconst{resolve}=require("path");module.exports={// 组件库的起点入口entry:'./src/index.tsx',output:{filename:"r-ui.umd.js",// 打包后的文件名path:resolve(__dirname,'dist'),// 打包后的文件目录:...
使用Vite+TS+Antd构建React项目 安装Vite1 2 3 npm install -g vite #yarn global add vite创建React项目 1 vite create my-react-app --template react-ts 安装React Router 1 2 npm install react-router-dom @types/react-router-dom #yarn add react-router-dom @types/react-router-dom...
2. 使用Create React App创建新的React项目 Create React App是一个流行的工具,它可以帮助你快速搭建React项目。使用以下命令创建一个新的React项目: bash npx create-react-app my-antd-project --template typescript 这条命令会创建一个名为my-antd-project的新文件夹,并在其中初始化一个使用TypeScript的React...
// webpack.config.jsconst{resolve} =require("path");module.exports= {// 组件库的起点入口entry:'./src/index.tsx',output: {filename:"r-ui.umd.js",// 打包后的文件名path:resolve(__dirname,'dist'),// 打包后的文件目录:根目录/dist/library:'rui',// 导出的UMD js会在window挂rui,即可...
引入antd组件库作为底层原子组件库,并且r-ui.umd.js和r-ui.umd.css包含antd组件代码和样式代码。 依赖的react、react-dom模块以外部引用方式。 开发与打包工具选型 使用webpack作为打包工具 老牌而又经典的打包工具,广泛的使用,丰富的插件生态以及各种易得的样例。
yarn add antd 5. 配置React Router 现在,我们已经安装了React Router,可以开始配置路由了。在src目录下创建一个新的文件夹,名为“pages”。在pages文件夹中创建两个新的文件,名为“Home.tsx”和“About.tsx”。这些文件将会成为我们的两个页面。 在Home.tsx中,可以编写以下代码: 代码语言:ts 复制 import React...
# ts项目创建 npx create-react-app react-ts-app --template typescript 安装依赖 安装ant-design前端架构+sass/scss npm i sass scss antd --save 安装完成后,将src目录中css文件改为scss App.css > App.scss index.css > index.scss 相应代码中import依赖也需要调整。
我想要用react搭建出一个基本的项目架子出来,目标: 集成typeScript 按需加载antd 自动配置路由、懒加载 路由鉴权 数据中心(useReducer,useContext) 配置http请求(axios) 一.集成typeScript npx create-react-app hook-ts-demo --template typescript 二.按需加载antd ...
react保姆级搭建新项目 此文主要以ts+vite+router6+antd 快速搭建一个react项目,适用于初学者 一、项目搭建 采用pnpm,个人感觉比npm和yarn好用 npm i pnpm -g 1. 采用vite方式 ,根据选择 react-ts pnpm create vite 1. 1.1 修改初始结构,删除多余文件...