react项目构建流程及列表跳详情

1、进行全局安装

cnpm i create-react-app -g    (全局安装只需安装一次)

2、项目创建

create-react-app myapp

myapp是项目名称
react项目构建流程及列表跳详情_第1张图片

3、抽离配置文件命令

cd myapp    //进入创建的项目
cnpm run eject      //抽离配置文件命令

在命令行中输入抽离配置命令
react项目构建流程及列表跳详情_第2张图片
抽离成功如下图:
react项目构建流程及列表跳详情_第3张图片

4、配置@的别名指向src目录

打开config文件夹里的webpack.config.dev和webpack.config.dev的指定位置加入如下代码 ‘@’: path.join(__dirname, ‘…/’, ‘src’)

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',
      **'@': path.join(__dirname, '../', 'src')**
    },

5、创建文件夹components、store

在src中创建components和store两个文件夹,将App.js 和 App.test.js 放入components文件夹中src里保留index.js 和 serviceWorker
react项目构建流程及列表跳详情_第4张图片

6、安装scss

如果使用scss可以安装scss

cnpm i node-sass sass-loader -S

7、加入路由模块

cnpm i react-router-dom -S

8、UI类型的组件

ui组件地址

cnpm i antd-mobile -S
入口页面的相关配置 --- click/promise支持

  
                    
                    

你可能感兴趣的:(react项目构建流程及列表跳详情)