react的ts框架安装

最新推荐文章于 2024-07-29 11:01:25 发布

Cmomoa

最新推荐文章于 2024-07-29 11:01:25 发布

阅读量1.6k

点赞数

文章标签： react javascript

本文链接：https://blog.csdn.net/Cmomoa/article/details/114580957

版权

react项目模板ts安装

首先，我们建立一个新文件夹，放入我们编译器的工作区中，然后执行命令npx create-react-app （项目名） --template typescript （尽量使用npx,npm可能会少东西）安装完成，项目结构如下
在这里插入图片描述

然后使用终端进入我们的模板文件中，安装以下常用依赖
npm i -S react-router-dom
npm i -S redux react-redux
npm i -S axios
npm i -S antd
npm i -D react-app-rewired customize-cra
npm i -S antd-mobile postcss-px2rem-exclude rc-form
npm i -D babel-plugin-import
npm i -D less less-loader
安装完以上依赖，我们需要配置我们的开发环境在我们根目录下创建 .env文件将以下代码放进去
ENV = ‘development’
GENERATE_SOURCEMAP = false
#default setting
REACT_APP_API = ‘http://server.fenotes.com/’
REACT_APP_CAPI = ‘http://119.45.198.29:3001’
配置我们装饰器less等创建文件（文件名字严格要求）将下面代码放入根目录下创建的config-overrides.js文件中，在不使用antd-mobile情况下将下面代码注释为使用rem的代码删掉

const path = require(‘path’);

const {
override,
addWebpackAlias,
addLessLoader,
addDecoratorsLegacy,
addPostcssPlugins,
fixBabelImports,
overrideDevServer,
} = require(‘customize-cra’);

/**

代理配置
*/
const addProxy = () => config => {
return {
…config,
proxy: {
‘/api’: {
// 环境设定后期会讲, 这里可以参考.env中的配置
target: process.env.REACT_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’,
},
},
},
};
};

module.exports = {
webpack: override(
// 使用修饰器
addDecoratorsLegacy(),
// 加载less文件
addLessLoader({
lessOptions: {
javascriptEnabled: true,
},
sourceMap: true,
}),
// rem, 仅移动端开发时需要
addPostcssPlugins([
require(‘postcss-px2rem-exclude’)({
// 这里我们设定标准大小为37.5,这样在css中使用时只需按照设计图的标准尺寸写px就能正常转换
// 比如750px就是标准页面宽度
remUnit: 37.5,
propList: [’*’, ‘!border’],
exclude: /node_modules/i,
}),
]),
// antd按需加载工具, 具体用法参考以下链接
// https://github.com/ant-design/babel-plugin-import
fixBabelImports(‘import’, {
libraryName: ‘antd-mobile’,
style: ‘css’,
}),
// 路径别名
addWebpackAlias({
‘@’: path.resolve(__dirname, ‘src’),
‘@components’: path.resolve(__dirname, ‘src/components’),
‘@pages’: path.resolve(__dirname, ‘src/pages’),
‘@actions’: path.resolve(__dirname, ‘src/actions’),
‘@reducer’: path.resolve(__dirname, ‘src/reducer’),
‘@utils’: path.resolve(__dirname, ‘src/utils’),
‘@assets’: path.resolve(__dirname, ‘src/assets’),
})
),
// 开发环境服务器代理, 一般情况下不需要我们自己配
devServer: overrideDevServer(addProxy()),
};

更改我们的启动项，在package.json文件中的script进行更改，更改后如下图
删除src里面的文件只留下图中四个文件
安装npm i --save-dev @types/react-router-dom（适配ts的router）
修改src目录文件夹如下图 page放页面 router.tsx放路由，actions放react-redux中的action，untils是工具包,components是我们的组件
配置我们的装饰器,防止重新运行装饰器配置消失，我们将它单独封装,在根目录下创建文件paths.json
在我们tsconfig.json中引入我们的装饰器文件
然后我们路由以及页面配置就和普通react没区别了
最后npm start运行项目大部分报错都是因为少安装了什么东西注意看报错最上面那一行少什么安装什么就行