create-react-app各种踩坑日记

心血来潮，想要 试一下这个自动生成项目目录的神器，然而，就此我的 一天都不美好了。
快速创建及配置：https://www.pianshen.com/article/3078333457/

1.使用create-react-app创建

创建项目执行以下命令即可：

npx create-react-app my-app
cd my-app
npm start

使用这个创建项目的命令很简单，但是坑却很大。

1. 使用npx creact-react-app project 只生成了
   node_modules, package.json and package-lock.json三个文件

2.并看到下面的提示：
A template was not provided. This is likely because you‘re using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.

执行完创建的命令并没有得到，人家官方那样 看着和谐的目录，也是很崩溃啊，也不知道为啥。然后各种百度，找方法，试都没有用。
那究竟是什么原因呢？

• 因为第一次执行那几条命令之后，就已经生成了一个目录
  • my-app
    • node_modules
    • package.json
    • package-lock.json
• 在执行解决方法时，一定要删掉 之前这个my-app，然后执行以下命令：

rm -rf my-app
npm uninstall -g create-react-app

npx create-react-app my-app

这样 才能成功创建出一个项目，哎，不容易啊，早知道就早删了那个my-app，心态都被搞崩了。
....

就这样，我还想再去验证一下这个坑，然而，第二次这个项目直接一步就创建好了，内心真的是 仿佛吃了一口shi，我美美的一个下午，就这样浪费在了创建项目上。

现在只想唱首歌：不要问我从哪里来，我的故乡在远方....

2. npm install 很慢的解决方法

npm get registry  --查看当前的镜像网址
// https://registry.npmjs.org/

npm config set registry http://registry.npm.taobao.org  -- 使用淘宝的镜像网址

npm get registry -- 查看当前镜像网址
// http://registry.npm.taobao.org/

// 在进行其他 的npm操作
npm install antd --save  发现快了很多
[       ...........] | diffTrees: sill install generateActionsToTake

3. antd 引入了，但不生效

(1) 首先配置webpack，如下教程，我觉得很详细了
https://www.jianshu.com/p/5262ccf59e3e
(2) 在webpack.config.js中配置如下即可

module: {
     rules: [{
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
                plugins: [
                    // 引入样式为 css
                    // style为true 则默认引入less
                    ['import', { libraryName: 'antd', style: 'css' }],
                ]
            }
     ]}