4、脚手架搭建：使用Vue CLI / Create React App初始化项目、项目目录结构设计、环境变量配置（.env文件）

好，咱们正式开始动手了。

这一章，我带你从零搭一个能打的大屏项目脚手架。别小看这一步——我见过太多团队，项目做着做着目录乱成一锅粥，环境变量满天飞，最后连部署都成问题。说白了，脚手架搭得好，后面省心十倍。

4.1 选哪个？Vue CLI 还是 Create React App

先回答一个经典问题：大屏项目到底用 Vue 还是 React？

我个人习惯是这样看的——

• 团队技术栈：如果团队 Vue 熟，就用 Vue CLI；React 熟，就用 CRA。别为了炫技换框架。
• 大屏特性：大屏项目通常数据更新频繁、组件复用率高。Vue 的响应式系统在数据绑定上很顺手，React 的 Hooks 在逻辑复用上更灵活。两者都能胜任。
• 生态成熟度：Vue CLI 和 CRA 都是久经考验的。我个人更倾向 Vue CLI 一点，因为它的插件机制对大屏项目里的图表库、地图库集成更友好。

4.2 初始化项目：两条路都走一遍

咱们两条路都演示一下，你根据自己情况选。

4.2.1 用 Vue CLI 初始化

# 安装 Vue CLI（如果还没装）
npm install -g @vue/cli

# 创建项目
vue create big-screen-demo

# 选择手动配置（Manually select features）
# 勾选：Babel、Router、Vuex、CSS Pre-processors、Linter
# 选择 Vue 3 版本
# 路由模式选 history（大屏项目通常部署在子路径，后面再配）
# CSS 预处理器选 SCSS
# 代码规范选 ESLint + Prettier

嗯，这里要注意：大屏项目我建议选 history 模式。为什么？因为大屏通常部署在独立域名或子域名下，hash 模式带个 # 号，分享 URL 时不太好看。我踩过这个坑——有一次给客户演示，复制 URL 时忘了带 # 后面的内容，页面直接 404，尴尬得很。

4.2.2 用 Create React App 初始化

# 创建项目
npx create-react-app big-screen-demo

# 进入项目
cd big-screen-demo

# 安装常用依赖
npm install react-router-dom axios styled-components

CRA 默认不带路由和状态管理，需要自己加。我个人习惯用 react-router-dom 做路由，axios 做请求，styled-components 做样式隔离。大屏项目组件多，样式隔离很重要。

4.3 项目目录结构设计：我的黄金法则

目录结构这事，没有标准答案。但我在多个大屏项目里摸爬滚打后，总结了一套「黄金结构」——

big-screen-demo/
├── public/                  # 静态资源
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── api/                 # API 接口层
│   │   ├── modules/         # 按业务模块拆分
│   │   └── request.js       # axios 实例封装
│   ├── assets/              # 静态资源（图片、字体等）
│   ├── components/          # 公共组件
│   │   ├── common/          # 通用组件（按钮、弹窗等）
│   │   └── business/        # 业务组件（图表、地图等）
│   ├── hooks/               # 自定义 Hooks（Vue 用 composables）
│   ├── layouts/             # 布局组件
│   ├── router/              # 路由配置
│   ├── store/               # 状态管理（Vuex / Redux）
│   ├── styles/              # 全局样式
│   │   ├── variables.scss   # 变量
│   │   ├── mixins.scss      # 混合
│   │   └── global.scss      # 全局样式
│   ├── utils/               # 工具函数
│   ├── views/               # 页面组件
│   │   ├── Dashboard/       # 大屏主页面
│   │   └── ...              # 其他页面
│   ├── App.vue / App.js
│   └── main.js / index.js
├── .env                     # 环境变量（通用）
├── .env.development         # 开发环境
├── .env.production          # 生产环境
├── .eslintrc.js
├── .prettierrc
└── package.json

我曾经在一个项目里，把所有组件都扔在 components 下，结果两个月后，一个图表组件改了，另一个页面也跟着崩。从那以后，我坚持按业务模块拆分——每个模块有自己的组件、API、状态管理。这样改一个模块，不会影响其他模块。

4.4 环境变量配置：.env 文件的正确姿势

大屏项目通常要对接多个后端环境：开发、测试、预发布、生产。环境变量配置不好，部署时就是灾难。

4.4.1 环境变量文件命名规则

文件名	用途	优先级
.env	所有环境共享的变量	最低
.env.development	开发环境	中
.env.production	生产环境	最高

注意：Vue CLI 和 CRA 都约定变量名必须以 VUE_APP_ 或 REACT_APP_ 开头，否则不会暴露给客户端代码。

4.4.2 实战配置示例

.env.development

VUE_APP_API_BASE_URL=http://dev-api.example.com
VUE_APP_WS_URL=ws://dev-api.example.com/ws
VUE_APP_TITLE=大屏系统（开发环境）

.env.production

VUE_APP_API_BASE_URL=https://api.example.com
VUE_APP_WS_URL=wss://api.example.com/ws
VUE_APP_TITLE=大屏系统

4.4.3 在代码中使用

Vue 项目

// 在组件中
const apiUrl = process.env.VUE_APP_API_BASE_URL

// 在 axios 封装中
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 10000
})

React 项目

// 在组件中
const apiUrl = process.env.REACT_APP_API_BASE_URL

// 在 axios 封装中
const service = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  timeout: 10000
})

4.4.4 环境变量优先级

你想想看，如果 .env 和 .env.development 里都定义了同一个变量，哪个生效？

答案是：.env.development 覆盖 .env。优先级规则是：

1. .env.[mode].local（最高，通常被 .gitignore 忽略）
2. .env.[mode]
3. .env（最低）

嗯，这里有个小技巧：把敏感信息（比如数据库密码、API Key）放在 .env.local 里，并加入 .gitignore。这样既安全，又不会污染代码仓库。

4.5 本章小结

这一章我们干了三件事：

• 用 Vue CLI / CRA 初始化了项目
• 设计了一套经得起折腾的目录结构
• 配置了多环境的环境变量

脚手架搭好了，下一章咱们开始写大屏的核心——布局和组件。别走开，马上回来。