QWC2 Demo App 项目启动与配置教程

1. 项目目录结构及介绍

QWC2 Demo App 的目录结构如下：

• node_modules/：存放项目依赖的第三方模块。
• src/：源代码目录，包含项目的所有前端代码。
  • components/：存放项目中的 React 组件。
  • containers/：存放容器组件，通常包含业务逻辑。
  • models/：存放模型定义，与后端 API 交互相关。
  • styles/：存放 CSS 样式文件。
  • utils/：存放工具类函数。
  • index.js：项目的入口文件。
• public/：存放公共资源，如图片、字体等。
• config/：配置文件目录。
  • dev.js：开发环境配置。
  • prod.js：生产环境配置。
• package.json：项目的配置文件，包含项目信息和脚本。
• webpack.config.js：WebPack 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。该文件主要做了以下几件事：

• 导入 React 和 ReactDOM。
• 导入根组件 App。
• 使用 ReactDOM 的 render 方法将 App 组件渲染到 DOM 中，具体是 public/index.html 文件中的 root 元素。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

3. 项目的配置文件介绍

项目的配置文件分为开发和生产两个环境，分别位于 config/dev.js 和 config/prod.js。

• config/dev.js：开发环境配置文件，通常包含本地开发所需的配置，如 API 端点、调试工具等。
• config/prod.js：生产环境配置文件，包含线上环境所需的配置，如 API 端点、性能优化设置等。

两个配置文件都导出一个配置对象，该对象被 WebPack 使用，并影响项目的构建过程。

例如，config/dev.js 可能包含以下内容：

module.exports = {
  // 开发环境的 API 端点
  API_ENDPOINT: 'http://localhost:8080/api',
  // 其他开发环境配置...
};

而 config/prod.js 可能如下：

module.exports = {
  // 生产环境的 API 端点
  API_ENDPOINT: 'https://api.example.com',
  // 其他生产环境配置...
};

在实际项目中，应根据具体情况调整配置文件以满足不同环境的需求。