# base-template

**Repository Path**: yang_jing_gui/base-template

## Basic Information

- **Project Name**: base-template
- **Description**: 搭建工程化前端项目基础模板结构
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-29
- **Last Updated**: 2023-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 搭建开发环境

## 1 创建项目

```shell
mkdir base-template
```

## 2 初始化项目

```shell
cd base-template
pnpm init
```

## 3 下载依赖

### 3.1 代码规范

```shell
pnpm add eslint prettier eslint-config-prettier eslint-plugin-prettier -D
pnpm add eslint-plugin-jsonc eslint-plugin-markdown -D
pnpm add stylelint stylelint-config-standard stylelint-config-prettier -D
npx eslint --init
```

### 3.2 git 提交规范

```shell
# commitizen cz-conventional-changelog cz-customizable 选配.cz-config.js
# cz-git czg 选配cz.config.js
pnpm add husky lint-staged @commitlint/cli @commitlint/config-conventional -D
pnpm add cz-git czg -D
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx --no-install lint-staged"
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

```

### 3.3 其他依赖

```shell
pnpm add fast-glob -D
```

## 4 创建配置文件和文件夹

```
.vscode
.commitlintrc.js
.editorconfig
.eslintignore
.eslintrc.js
.gitattributes
.gitignore
.lintstagedrc.js
.npmrc
.postcssrc.js
.prettierignore
.prettierrc.js
.stylelintignore
.stylelintrc.js
```

## 5 创建项目目录

```
public
├─src               #  项目目录
│  ├─api                #  数据请求
│  │  └─                  #
│  │  └─                  #
│  ├─assets             #  资源
│  │  ├─css               #  css资源
│  │  └─images            #  图片资源
│  ├─config             #  配置
│  ├─components         #  组件
│  │  ├─common            #  公共组件
│  │  └─                  #
│  │  └─                  #
│  ├─layout             #  布局
│  ├─hooks              #  自定义hooks组件
│  ├─router             #  路由
│  ├─store              #  状态管理
│  │  └─                  #
│  │  └─                  #
│  ├─views              #  页面
│  │  └─                  #
│  │  └─                  #
│  ├─utils              #  工具
│  └─main.js            #  入口文件
```