项目根目录添加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...
yarn add antd 5. 配置React Router 现在,我们已经安装了React Router,可以开始配置路由了。在src目录下创建一个新的文件夹,名为“pages”。在pages文件夹中创建两个新的文件,名为“Home.tsx”和“About.tsx”。这些文件将会成为我们的两个页面。 在Home.tsx中,可以编写以下代码: 代码语言:ts 复制 import React...
// src/store/common/lang.Store.tsimport{makeAutoObservable}from'mobx'import{setLang,getLang}from'@/utils'importi18nfrom'i18next'classLangStore{lang:string=getLang()constructor(){makeAutoObservable(this)}getLang=()=>{returnthis.lang}setLang=(lang:string)=>{this.lang=langi18n.changeLanguage...
引入antd组件库作为底层原子组件库,并且r-ui.umd.js和r-ui.umd.css包含antd组件代码和样式代码。 依赖的react、react-dom模块以外部引用方式。 开发与打包工具选型 使用webpack作为打包工具 老牌而又经典的打包工具,广泛的使用,丰富的插件生态以及各种易得的样例。
引入antd组件库作为底层原子组件库,并且r-ui.umd.js和r-ui.umd.css包含antd组件代码和样式代码。 依赖的react、react-dom模块以外部引用方式。 开发与打包工具选型 使用webpack作为打包工具 老牌而又经典的打包工具,广泛的使用,丰富的插件生态以及各种易得的样例。
# 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依赖也需要调整。
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...
react保姆级搭建新项目 此文主要以ts+vite+router6+antd 快速搭建一个react项目,适用于初学者 一、项目搭建 采用pnpm,个人感觉比npm和yarn好用 npm i pnpm -g 1. 采用vite方式 ,根据选择 react-ts pnpm create vite 1. 1.1 修改初始结构,删除多余文件...
一、创建项目 npm v5.2.0引入的一条命令(npx),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。 举例:使用create-react-app创建一个react项目。 老方法: npm install -g create-react-app create-react-app my-app npx方式: