用脚手架 create-react-app 搭建 react 项目及各种组件库的安装

 create-react-app,官方推荐脚手架

配置及安装方式:
1.搭建 react : npx create-react-app my-app (my-app 自己起的文件名,如果一直安装失败,试着清一下缓存:npm cache clean --force)
1.1: npm i react-router-dom  (加入路由)
1.2: npm install --save redux react-redux redux-thunk (安装Redux)

2.引入moment.js: npm install moment

3.引入eCharts: npm install echarts

4.引入Antd: npm install antd --save (--save,原指把模块写入到 packages.json。现在已经是内置参数,不用额外写了)

5.安装less:npm install -g less  (或者:npm install less less-loader --save)(还没成功,有点麻烦,还需要配置webpack.config.js)

6.配置webpack.config.js文件

6.1 首先我们需要运行 npm run eject 来暴露webpack的配置文件,你会发现多了config为名的文件夹。(如果这步报错没关系,
实我们只需要在之前运行?git add . 命令,然后再运行??git commit -m "init" 命令就可以解决。)

6.2 最后是我们需要手动在webpack.config.js里配置less:
// 在module中做两处修改?
// 第一处是找到:
const sassRegex = /\.(scss|sass)$/;      改成=>   const sassRegex = /\.(scss|sass|less)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;       改成=>  const sassModuleRegex = /\.module\.(scss|sass|less)$/;
// 第二处是找到两个 ‘sass-loader’ 换成 ‘less-loader’

6.3 配置常用的路径
module.exports = function(webpackEnv) {
  return {
    resolve: {
      alias: {
        // react 路径配置 import改为绝对路径, 不必一直 ../../
        "components": path.resolve(__dirname, "../src/components"),
        "pages": path.resolve(__dirname, "../src/pages"),
        "router": path.resolve(__dirname, "../src/router"),
        "assets": path.resolve(__dirname, "../src/assets"),
        "store": path.resolve(__dirname, "../src/store"),
      },
    },
  };
};

 

最后提供都安装好的GitHub地址: https://github.com/Zhujlin/react-demo-one

posted @ 2020-07-14 11:48  真的想不出来  阅读(779)  评论(0编辑  收藏  举报