react的ts框架安装

react项目模板ts安装

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

1. 然后使用终端进入我们的模板文件中，安装以下常用依赖
   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

2. 安装完以上依赖，我们需要配置我们的开发环境在我们根目录下创建 .env文件将以下代码放进去
   ENV = ‘development’
   GENERATE_SOURCEMAP = false
   #default setting
   REACT_APP_API = ‘http://server.fenotes.com/’
   REACT_APP_CAPI = ‘http://119.45.198.29:3001’

3. 配置我们装饰器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()),
};

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