# 开始

本文会帮助你从头启动项目

## 前言

::: tip 关于组件

项目虽然二次封装了一些组件，但是可能不能满足大部分的要求。所以，如果组件不满足你的要求，完全可以不用甚至删除代码自己写，不必坚持使用项目自带的组件。

:::

## 环境准备

本地环境需要安装 [pnpm](https://pnpm.io/)、[Node.js](http://nodejs.org/) 和 [Git](https://git-scm.com/)

::: warning 注意

- 推荐使用[pnpm](https://pnpm.io/)，否则依赖可能安装不上。
- [Node.js](http://nodejs.org/) 版本要求`12.x`以上，且不能为`13.x`版本，这里推荐 `14.x` 及以上。

:::

## 工具配置

如果您使用的 IDE 是[vscode](https://code.visualstudio.com/)(推荐)的话，可以安装以下工具来提高开发效率及代码格式化

- [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Iconify 图标插件
- [Unocss IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - windicss 提示插件
- [I18n-ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) - i18n 插件
- [Volar](https://marketplace.visualstudio.com/items?itemName=vue.volar) - vue 开发必备
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化
- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - css 格式化
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - .env 文件 高亮

## 代码获取

::: warning 注意

注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。

:::

### 从 GitLab 获取代码

```bash
# clone 代码
git clone http://192.168.9.192/eci-frontend/base-framework.git

```

## 安装

### 安装 Node.js

如果您电脑未安装[Node.js](https://nodejs.org/en/)，请安装它。

**验证**

```bash
# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v

```

如果你需要同时存在多个 node 版本，可以使用 [Nvm](https://github.com/nvm-sh/nvm) 或者其他工具进行 Node.js 进行版本管理。

### 安装依赖

#### pnpm 安装

必须使用 [pnpm](https://pnpm.io/)进行依赖安装（若其他包管理器安装不了需要自行处理）。

如果未安装`pnpm`，可以用下面命令来进行全局安装

```bash
# 全局安装pnpm
npm install -g pnpm
# 验证
pnpm -v # 出现对应版本号即代表安装成功
```

#### 依赖安装命令

在项目根目录下，打开命令窗口执行，耐心等待安装完成即可

```bash
# 安装依赖
pnpm i
```

## npm script

```bash
"scripts": {
  # 安装依赖
  "bootstrap": "pnpm install",
  # 运行项目，可选择子项目
  "dev": "turbo run dev --concurrency=50",
  # 构建turbo项目
  "build": "turbo build",
  # 清空turbo缓存
  "clean": "turbo run clean",
  # 提交代码
  "commit": "czg",
  # 添加changeset
  "changeset": "npx changeset add",
  # changeset更新版本
  "version-packages": "changeset version",
  # changeset更新版本
  "vp": "pnpm version-packages",
  # changeset打tag
  "tag": "changeset tag",
  # 生成打包分析，在 `Mac OS` 电脑上执行完成后会自动打开界面，在 `Window` 电脑上执行完成后需要打开 `./build/.cache/stats.html` 查看
  "report": "cross-env REPORT=true npm run build",
  # 类型检查
  "type:check": "vue-tsc --noEmit --skipLibCheck",
  # 预览打包后的内容（先打包在进行预览）
  "preview": "npm run build && vite preview",
  # 直接预览本地 dist 文件目录
  "preview:dist": "vite preview",
  # 重新安装依赖，见下方说明
  "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
},
```

### 重新安装依赖

该命令会先删除 `node_modules`、`yarn.lock`、`package.lock.json` 后再进行依赖重新安装（安装速度会明显变慢）。

接下来你可以修改代码进行业务开发了。我们内建了模拟数据、HMR 实时预览、状态管理、国际化、全局路由等各种实用的功能辅助开发，请阅读其他章节了解更多。

## 目录说明

```bash

.
├── apps # 子系统文件夹
│   ├── doc # 项目文档
│   ├── starter-template # 项目启动模板
│   └── 。。。 # 其他子项目
├── internal # 项目公共规范配置
│   ├── eslint-config # eslint配置
│   ├── prettier-config # prettier配置
│   ├── stylelint-config # stylelint配置
│   ├── ts-config # ts-config配置
│   ├── vite-config # vite config配置
├── packages # 公共依赖包
│   ├── assets # 资源文件包 @eciol/assets
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── design # 样式文件 @eciol/design
│   ├── directives # 指令 @eciol/directives
│   ├── hooks # hook @eciol/hooks
│   │   ├── component # 组件相关hook
│   │   ├── theme # 主题相关hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── web # web相关hook
│   ├── layout # 布局文件 @eciol/layout
│   │   ├── default # 默认布局
│   │   ├── iframe # iframe布局
│   │   ├── lock # 系统锁定
│   │   ├── theme # 主题相关
│   │   └── page # 页面布局
│   ├── locales # 多语言 @eciol/locale
│   ├── request # 接口请求 @eciol/request
│   ├── router # 路由配置 @eciol/router
│   ├── shared # 公共方法 @eciol/shared
│   │   ├── constants # 常量
│   │   ├── lib # 第三方库，如echarts
│   │   └── utils # 项目公共工具函数utils
│   ├── store # 公共数据仓库 @eciol/store
│   ├── types # 公共类型库 @eciol/types
│   └── ui # ui库
│       ├── ant-ui # antDesign vue 二次封装组件库 @eciol/ant-ui
│       ├── business-ui # 业务组件库，封装常用业务组件 @eciol/business-ui
│       └── share-ui # 通用组件库，封装常用组件 @eciol/share-ui
├── scripts # 脚本相关
│   ├── dev.ts # 本地开发脚本
│   ├── preview.ts # 本地预览脚本
│   └── build.ts # 构建脚本
├── turbo.json # turborepo配置文件
├── vite.config.ts # vite配置文件
└── unocss.config.ts # unocss配置文件，用于vscode代码提示

```