本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

听说你混的不错

1770

文章

1346788

访问

+关注

分类

暂无分类

日期归档

2023-05(3)

2023-06(3)

【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile

发布于2022-03-19 01:50 阅读(2081) 评论(0) 点赞(23) 收藏(3)

一、通过create-react-app脚手架创建项目

npx create-react-app testproject --template typescript

在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形

在项目根目录下，运行npm run start，成功启动项目

npm run start

二、配置路由

npm i react-router-dom@5.2.0 react-router-config @types/react-router-config @types/react-router-dom -S

src目录下创建views文件夹，views内创建Home，Contact，About，Navbar四个tsx文件，其中Navbar用来控制路由，其他三个页面用来展示

Home:


import React, { Component } from "react";
 
export default class Home extends Component {
  render() {
    return (
      <div className="home">
        <div className="container">
          <h3 className="center"> Home页面</h3>
          <p>欢迎来到首页</p>
        </div>
      </div>
    );
  }
}

Contact:


import React, { Component } from "react";
 
export default class Contact extends Component {
  render() {
    return (
      <div className="contact">
        <div className="container">
          <h3 className="center"> Contact页面</h3>
          <p>欢迎来到联系我们页面！</p>
        </div>
      </div>
    );
  }
}

About:


import React, { Component } from "react";
 
export default class About extends Component {
  render() {
    return (
      <div className="about">
        <div className="container">
          <h3 className="center"> About页面</h3>
          <p>欢迎来到关于我们页面！</p>
        </div>
      </div>
    );
  }
}

Navbar:


import React, { Component } from "react";
 
export default class Navbar extends Component {
    render() {
        return (
            <nav className="nav-wrapper">
                <div className="list">
                    <ul>
                        <li><a href='/'>Home</a></li>
                        <li><a href='/about'>About</a></li>
                        <li><a href='/contact'>Contact</a></li>
                    </ul>
                </div>
            </nav>
        )
    }
}

src目录下创建routes文件夹，同时创建index.ts，使用RouteConfig对路由进行统一管理


// 导入路由组件
import Home from '../views/Home'
import About from '../views/About'
import Contact from '../views/Contact'
// 导入路由管理工具
import {RouteConfig} from 'react-router-config'
 
const routes:RouteConfig = [
  {
    path:'/',
    exact:true,
    component:Home
  },
  {
    path:'/about',
    exact:true,
    component:About
  },
  {
    path:'/contact',
    exact:true,
    component:Contact
  }
]
 
export default routes;

App.tsx中引入Route，Navbar和路由管理工具


import React from "react";
// 引入路由导航栏
import Navbar from "./views/Navbar";
// 引入routes组件
import routes from "./routes";
// 引入包管理工具
import { renderRoutes, RouteConfig } from "react-router-config";
import "./App.css";
 
function App() {
  return (
    <div className="App">
      <Navbar />
 
      {/* 设置routes的类型为RouteConfig[]，否则报错 */}
      {renderRoutes(routes as RouteConfig[])}
    </div>
  );
}
 
export default App;

根目录index.tsx中这样定义


import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router } from "react-router-dom";
 
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);
 
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

至此，路由配置就完成了，启动项目如果出现以下错误，

运行命令

npm i react-router@5.2.0 -s

然后重新运行即可，你的页面应该是这样的

有点难看是吧，我们给App添加一点样式


* {
  padding: 0;
  margin: 0;
}
 
h1 {
  text-align: center;
  font-size: 45px;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(6, 0, 32);
  padding: 40px;
}
 
.list {
  display: flex;
  justify-content: center;
  width: 100%;
}
 
.list ul li {
  list-style: none;
  margin: 42px;
  text-align: center;
}
 
a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 14px 25px;
  background-color: transparent;
  border: 2px solid rgb(12, 0, 66);
}
 
a:hover {
  background-color: rgb(12, 0, 66);
  color: rgb(255, 255, 255);
}

三、配置less

第一种方式：暴露配置的方式

npm run eject

此时项目多出了config文件夹

安装less和less-loader

npm i less less-loader -S

仿照sass修改config目录下的webpack.config.js：

1. 找到config目录下的webpack.config.js文件，在50-70行之间有个cssRegex，在此处添加


// less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

2. 在webpack.config.js文件500多行有个sassRegex，模仿写对应的lessRegex


// less
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            // less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

3.重新启动项目，创建less文件并引入

样式生效，说明less配置成功

这种方式有个不好的地方，就是会产生很多不必要的js文件，且这个操作不可逆，等到后期项目上传时造成代码冗余，不好维护。

第二种方式：找到config.js文件直接修改

1.找到文件路径：node_modules\react-scripts\config\webpack.config.js

2.在60-80行之间有个cssRegex，在此处添加


// less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

3. 在550多行有个sassRegex，模仿写对应的lessRegex


// less
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                "less-loader"
              ),
              sideEffects: true,
            },
            // less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                "less-loader"
              ),
            },

3.重新启动项目，创建less文件并引入


.about{
  .container{
    font-size: 22px;
    p{
      color: red;
    }
  }
  }

样式生效，说明less配置成功

四、配置sass

通过create-react-app创建的react项目，其实是默认已经配置好sass的，所以我们先尝试在项目中引入sass文件

会发生如下报错：

解决方法：执行下面的命令

npm i sass -s

然后重新运行即可，样式生效

五、配置px2rem自适应

第一种方式：暴露config

1. 安装lib-flexible、pxtorem，postcss

npm i lib-flexible postcss-pxtorem postcss postcss-loader postcss-preset-env postcss-flexbugs-fixes -s

2.配置config/webpack.config.js，在config目录下找到webpack.config.js文件，加入

const px2rem = require('postcss-pxtorem');

3. 然后再下面代码中加入下面这行


px2rem({
       rootValue: 75,
       propWhiteList: [],
       minPixelValue: 2,
       exclude: /node_modules/i,
       unitPrecision: 5,
       propList: ['*']
}), //设计稿根据750px(iphone6)

也可以使用一下代码覆盖loader


      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: 'postcss',
            config: false,
            plugins: !useTailwind
              ? [
                  'postcss-nested',
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3
                    },
                  ],
                  // Adds PostCSS Normalize as the reset css with default options,
                  // so that it honors browserslist config in package.json
                  // which in turn let's users customize the target behavior as per their needs.
                  px2rem({
                    rootValue: 37.5,
                    selectorBlackList  : [], //过滤
                    propList   : ['*'],
                    minPixelValue: 2,
                    exclude: /node_modules/i
                  }), //设计稿根据750px(iphone6)
                'postcss-normalize',
                ]
              : [
                  'tailwindcss',
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    },
                  ],
                  px2rem({
                    rootValue: 37.5,
                    selectorBlackList  : [], //过滤
                    propList   : ['*'],
                    minPixelValue: 2,
                    exclude: /node_modules/i
                    }), //设计稿根据750px(iphone6)
                ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },

4. src目录下找到index入口文件，在文件上面加入

import 'lib-flexible';

5. 找到public/index.html文件，加入如下代码：


<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
        name="viewport"/>

6. 重新运行项目，一般就可以看到px转rem了。


.contact {
  .container {
    font-size: 36px;
 
    .center {
      color: blue;
    }
    p {
      font-size: 24px;
    }
    button {
      width: 100px;
      height: 45px;
      background: #ccc;
      color: #fff;
    }
  }
}

第二种方式：直接在config文件中修改

1.找到文件路径：node_modules\react-scripts\config\webpack.config.js

2.配置webpack.config.js，加入如下代码：

const px2rem = require('postcss-pxtorem');

3. 然后再下面代码中加入下面这行


px2rem({
       rootValue: 75,
       propWhiteList: [],
       minPixelValue: 2,
       exclude: /node_modules/i,
       unitPrecision: 5,
       propList: ['*']
}), //设计稿根据750px(iphone6)

也可以使用一下代码覆盖loader


      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: 'postcss',
            config: false,
            plugins: !useTailwind
              ? [
                  'postcss-nested',
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3
                    },
                  ],
                  // Adds PostCSS Normalize as the reset css with default options,
                  // so that it honors browserslist config in package.json
                  // which in turn let's users customize the target behavior as per their needs.
                  px2rem({
                    rootValue: 37.5,
                    selectorBlackList  : [], //过滤
                    propList   : ['*'],
                    minPixelValue: 2,
                    exclude: /node_modules/i
                  }), //设计稿根据750px(iphone6)
                'postcss-normalize',
                ]
              : [
                  'tailwindcss',
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    },
                  ],
                  px2rem({
                    rootValue: 37.5,
                    selectorBlackList  : [], //过滤
                    propList   : ['*'],
                    minPixelValue: 2,
                    exclude: /node_modules/i
                    }), //设计稿根据750px(iphone6)
                ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },

4. src目录下找到index入口文件，在文件上面加入

import 'lib-flexible';

5. 找到public/index.html文件，加入如下代码：


<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
        name="viewport"/>

6. 重新运行项目，一般就可以看到px转rem了。

存在问题：当设备宽度超过540后，样式就固定在540不再改变了

解决方法：在node-modules => lib-flexible => flexible.js中找到refreshRem修改其中的width值为设计稿宽度即可

六、配置axios和反向代理

1. 安装axios 和 http-proxy-middleware（后面反向代理会用到）

npm i axios http-proxy-middleware -s

2. 在src目录下创建api文件夹，然后创建 index.ts 和 request.ts 文件


//index.ts
 
import {Service} from './request';
//获取汽车列表
export function getCarList(config: { page: string; }){
    const params = new URLSearchParams()
    params.append('page',config.page);
 
    return Service({
        url:'./api/getCarList',
        data:params
    })
}
 
 
//request.ts
 
import axios from "axios";
 
declare module 'axios' {
     export interface AxiosResponse<T = any> extends Promise<T> {}
 }
 
export const Service = axios.create({
  timeout: 3000, //延迟时间
  method: "POST",
  headers: {
    "pc-token": "4a82b23dbbf3b23fd8aa291076e660ec",
    "content-Type": "application/x-www-form-urlencoded",
  },
});
 
//请求拦截
Service.interceptors.request.use((config) => config);
 
//响应拦截
Service.interceptors.response.use(
  (response) => response.data,
  (err) => console.log(err)
);

3. 配置代理，可以访问到后台的服务器地址

在src文件夹中创建setupProxy.js内容配置如下


const {createProxyMiddleware} = require('http-proxy-middleware');
 
module.exports = function(app) {
  app.use('/api', createProxyMiddleware({ 
    target: 'http://www.ibugthree.com/oldcar/',//后台服务器地址
    changeOrigin: true,
    pathRewrite: {
    '^/api': '',
    },}))
};

在新版本中已经默认设置代理的文件夹名为setupProxy.js

到这里所有配置就基本完成，在组件中调用即可


import React, { Component } from "react";
import "./contact.scss";
//导入要使用的接口
import { getCarList } from "../api/index";
 
export default class Contact extends Component {
  // 定义方法
  getList() {
    getCarList({ page: "1" }).then((res) => console.log(res));
  }
  render() {
    return (
      <div className="contact">
        <div className="container">
          <h3 className="center"> Contact页面</h3>
          <p>欢迎来到联系我们页面！</p>
          {/* 点击事件调用 */}
          <button onClick={this.getList}>获取数据</button>
        </div>
      </div>
    );
  }
}

七、配置redux

1. 安装redux

npm i redux react-redux -s

2.在src路径下创建store文件夹，文件假中创建两个文件action.ts和index.ts两个文件

action中定义type，然后返回设置状态的type和函数


export const SET_AGE = "set_age";
export const SET_NAME = "set_name";
 
export const setAge = function (n: number) {
  return {
    type: SET_AGE,
    n: n,
  };
};
export const setName = function (name: string) {
  return {
    type: SET_NAME,
    name: name,
  };
};

index文件中取出redux中的createStore，以及action中的type，最后需要将createStore返回出去，并且需要传递一个函数，定义这个函数时有两个参数，一个是状态，一个是action，使用switch判断action中的type，当所有条件都不成立时，将所有的状态返回，有条件成立时，就通过扩展运算符将state展开，并且对age进行操作（...state）；


import { createStore } from "redux";
import { SET_AGE, SET_NAME } from "./action";
 
interface User {
  name: string;
  age: number;
}
 
const common: User = {
  name: "张三123",
  age: 18,
};
 
function user(state = common, action: any) {
  switch (action.type) {
    case SET_AGE:
      return {
        ...state,
        age: state.age + action.n,
      };
    case SET_NAME:
      return {
        ...state,
        name: action.name,
      };
    default:
      return state;
  }
}
 
export default createStore(user);

3. 在主入口文件index.tsx中进行redux的连接和store的引用


import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
// 引入路由组件
import { BrowserRouter as Router } from "react-router-dom";
// 引入移动端自适应
import "lib-flexible";
//引入rootReducer组件
import { Provider } from "react-redux";
import store from "./store";
 
ReactDOM.render(
  <React.StrictMode>
    {/* provider组件将所有的组件包裹起来，用绑定属性的形式绑定store到组件中 */}
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
 
reportWebVitals();

4. 在App中进行配置


import React from "react";
// 引入路由导航栏
import Navbar from "./views/Navbar";
// 引入routes组件
import routes from "./routes";
// 引入包管理工具
import { renderRoutes, RouteConfig } from "react-router-config";
import "./App.css";
// 引入connect连接组件
import {connect} from "react-redux"
 
 
function App() {
  return (
    <div className="App">
      <Navbar />
      {/* 设置routes的类型为RouteConfig[]，否则报错 */}
      {renderRoutes(routes as RouteConfig[])}
    </div>
  );
}
 
//进行连接
export default connect((props,state)=>Object.assign({},props,state),{})(App);

5.组件中使用redux

1. 引入connect和action中的方法

2. 定义props和state类型

3. 修改render中的html结构，定义属性和方法调用

4. connect连接属性并导出


import React, { Component } from "react";
import "./about.less";
// redux
import { connect } from "react-redux";
import { setName, setAge } from "../store/action";
 
interface Props {
  setAge: Function;
  setName: Function;
  age: number;
  name: string;
}
 
interface State {}
 
class About extends Component<Props,State> {
  refs:any = React.createRef()
  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
  constructor(props:Props){
    super(props)
  }
  changeAge(){
    this.props.setAge(1);
    console.log(this.props);
  }
  changeName(){
    let name:number = this.refs.value
    this.props.setName(name)
    console.log(this.refs);
    this.refs.value = ''
  }
  render() {
    return (
      <div className="about">
        <div className="container">
          <h3 className="center"> About页面</h3>
          <p>欢迎来到关于我们页面！</p>
        </div>
        <div>
          <p>名字是：{this.props.name}</p>
          <input ref={(input: HTMLInputElement) => this.refs = input}  type="text" /> 
          <button onClick={this.changeName.bind(this)}>修改姓名</button>
          <p>年龄是：{this.props.age}</p> 
          <button onClick={this.changeAge.bind(this)}>修改年龄</button>
        </div>
      </div>
    );
  }
}
 
export default connect((props,state)=>Object.assign({},props,state),{
  setAge,setName
})(About);

八、配置别名@

一、暴露方法

1.打开 config 文件夹下的 webpack.config.js 文件

2.搜索 alias

3.参照如下格式，设置路径别名


alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
        // 文件路径别名
        '@': path.resolve(__dirname, '../src'),
        '@view': path.resolve(__dirname, '../src/view'),
      },

二、直接在config文件中修改

1.找到文件路径：node_modules\react-scripts\config\webpack.config.js

其他步骤同上！！

需要特别注意的是： webpack配置进行改动后，都需要重新启动项目，不然不生效

九、配置antd-mobile

1.在项目中安装antd-mobile 使用


npm install antd-mobile
//或
yarn add antd-mobile

2.在项目中Home.tsx文件中导入要使用的组件


import React, { Component } from "react";
//使用组件直接在组件中进行使用即可
import { Button } from 'antd-mobile';
 
export default class Home extends Component {
  render() {
    return (
      <div className="home">
        <div className="container">
          <h3 className="center"> Home页面</h3>
          <p>欢迎来到首页</p>
          <Button color='primary'>按钮</Button>
        </div>
      </div>
    );
  }
}

完成之后，你就能在react项目使用antd-mobile的样式文件进行构建自己的页面了

至此，react项目创建和配置完成

如有问题，请及时沟通

原文链接:https://blog.csdn.net/weixin_42582523/article/details/121791925

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

所属网站分类: 技术文章 > 博客

作者：听说你混的不错

链接：http://www.qianduanheidong.com/blog/article/318962/f58b0af72068892078b7/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权一经发现必将追究其法律责任

23 0

收藏该文

昵称:

评论内容：(最多支持255个字符)

---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力

程序员的那些事(new)

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

Web 页面之间传递参数的几种方法

uniapp安卓离线打包步骤

Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！

java图片转二进制流_java将文件转化成二进制流

个人简历html网页代码（使用chatgpt完成web开发课的实验）

【HTTP 协议】掌握 Web 的核心技术

Three.js指定路径漫游（站走切换、路径动画、展示路线、开始、暂停、继续、退出、镜头跟随）

完全卸载vscode

flex布局优化(两端对齐，从左至右)

【熬夜送书 | 第二期】清华社赞助 | 《前端系列丛书》

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

居中网站内容 + 垂直导航栏

如何将项目左对齐（标题）

Nunjucks 嵌套变量

文本显示在图像上悬停

HTML/CSS - 按钮在另一个元素下排列

MathJax 库在公式中留下滚动条

如何在MVC5中用Razor将一行设为红色

在 Razor 页面 WebApplication 中将帖子从文本区域保存到数据库

响应式图像背景尺寸封面

将图像放入图像内

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站

程序员最近都爱上了这个网站程序员们快来瞅瞅吧！ it98k网:it98k.com

分类

标签

日期归档

【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile

一、通过create-react-app脚手架创建项目

二、配置路由

三、配置less

第一种方式：暴露配置的方式

第二种方式：找到config.js文件直接修改

四、配置sass

五、配置px2rem自适应

第一种方式：暴露config

第二种方式：直接在config文件中修改

六、配置axios和反向代理

七、配置redux

八、配置别名@

一、暴露方法

二、直接在config文件中修改

九、配置antd-mobile

程序员最近都爱上了这个网站 程序员们快来瞅瞅吧！ it98k网:it98k.com

分类

标签

日期归档

【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile

一、通过create-react-app脚手架创建项目

二、配置路由

三、配置less

第一种方式：暴露配置的方式

第二种方式：找到config.js文件直接修改

四、配置sass

五、配置px2rem自适应

第一种方式：暴露config

第二种方式：直接在config文件中修改

六、配置axios和反向代理

七、配置redux

八、配置别名@

一、暴露方法

二、直接在config文件中修改

九、配置antd-mobile

程序员最近都爱上了这个网站程序员们快来瞅瞅吧！ it98k网:it98k.com