# HW-TEMPLATE

**Repository Path**: dzy_gitee/hw-template

## Basic Information

- **Project Name**: HW-TEMPLATE
- **Description**: 基础的模板框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-20
- **Last Updated**: 2024-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目介绍

## haowai官网项目

### 主要代码的整体目录

```javascript
src    //主要文件                                   
├─ api  //api文件的模块化                                                              
│  ├─ User                                 
│  │  └─ index.js                          
│  ├─ base.js                              
│  ├─ http.js                              
│  └─ index.js    //统一出口                         
├─ assets         //静态资源                         
│  ├─ font-family                              
│  ├─ iconfont                                      
│  ├─ images                                                  
│  ├─ phoneAreaCode                                   
│  ├─ styles                              
│  └─ video                                                  
├─ components     //公共组件                             
├─ core           //core类,目前将其他类提取只留下const和data                         
│  ├─ const                                        
│  ├─ data.js                              
│  └─ index.js    //统一导出Api,Const, Util,Data,   api,util  在根目录                       
├─ lang           //语言包                        
│  ├─ test                                 
│  │  └─ test.js                           
│  └─ index.js                             
├─ router         //路由                         
│  ├─ index.js                             
│  └─ routes.js                            
├─ utils         //工具类                          
│  ├─ antdesign.js                         
│  ├─ common.js                            
│  ├─ filter.js                            
│  ├─ image.js                             
│  ├─ index.js                             
│  ├─ number.js                            
│  └─ time.js                              
├─ views         //页面代码                                        
├─ App.vue       //主文件                          
└─ main.js       //主入口文件                          

```

### 文件格式化

#### 统一使用vscode中的prettier插件，插件格式化规则为根目录中的.prettiercc文件中的规则为主

#### 开启设置：文件》首选项》设置》文本编辑器》格式化》Format on save勾选

```json
{
    "printWidth": 100, // 单行代码字符数量最长100，超过自动折行
    "tabWidth": 2, // tab使用2个空格
    "singleQuote": true, // 单引号
    "trailingComma": "es5", // 默认none, 可选 none|es5|all。es5 包括es5中的数组、对象最后一个元素后会加逗号, all 包括函数对象等所有可选
    "bracketSpacing": true, //  对象左右两侧都需要空格
    "semi": false, // 是否在行尾加分号
    "arrowParens": "avoid" // 箭头函数参数括号，默认avoid 可选 avoid| always,avoid 能省略括号的时候就省略 例如x => x，always 总是有括号
  }
```

### 文件的公共变量

文件的公共变量统一使用vite自带的dotenv

| 根目录环境变量文件 | 作用在那种环境中 |
| ------------------ | ---------------- |
| .env.development   | 开发环境         |
| .env.preview       | 预发环境         |
| .env.production    | 生产环境         |
| .env.testing       | 测试环境         |
| .env               | 所有环境         |

环境在打包或编译阶段就可以识别出来，资料参考：https://cn.vitejs.dev/guide/env-and-mode.html

```json
VITE_OSS_POINT = 'http://horwin-app.oss-cn-hangzhou.aliyuncs.com/'
VITE_URL_POINT = 'https://app-api.horwincloud.com'
```

**示例**：为防止变量泄露，必须以VITE_开头

#### 项目如何使用到变量？

```javascript
  console.log('app vue created');
  // 打印公共env文件的参数
  console.log('oss目标', import.meta.env.VITE_OSS_POINT)
  console.log('阿里云地址', import.meta.env.VITE_URL_POINT)
  // 打印当前环境的参数
  console.log('当前环境', import.meta.env.MODE)
  console.log('当前环境的baseurl', import.meta.env.VITE_URL_POINT)
```



## 环境变量[#](https://cn.vitejs.dev/guide/env-and-mode.html#env-variables

Vite 在一个特殊的 **`import.meta.env`** 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

- **`import.meta.env.MODE`**: {string} 应用运行的[模式](https://cn.vitejs.dev/guide/env-and-mode.html#modes)。
- **`import.meta.env.BASE_URL`**: {string} 部署应用时的基本 URL。他由[`base` 配置项](https://cn.vitejs.dev/config/shared-options.html#base)决定。
- **`import.meta.env.PROD`**: {boolean} 应用是否运行在生产环境。
- **`import.meta.env.DEV`**: {boolean} 应用是否运行在开发环境 (永远与 `import.meta.env.PROD`相反)。
- **`import.meta.env.SSR`**: {boolean} 应用是否运行在 [server](https://cn.vitejs.dev/guide/ssr.html#conditional-logic) 上。

**此上变量可以在vite.config.js中配置，此处用处不大，酌情适应**

### package.json

```json
  "scripts": {
    "dev": "vite", //默认是开发环境
    "build": "vite build --mode production", //打包模式在生产环境
    "build:test": "vite build --mode testing", //测试环境
    "build:preview": "vite build --mode preview", //预览环境
    "preview": "vite preview",
    "prettier": "prettier --write --config .prettierrc \"src/**/*.{vue,js,ts,jsx,tsx,css,less,scss,html,json,md}\""
  },
```

### 项目上线是的shell文件说明，配合Jenkins部署问题已经备注

```shell
#!/bin/bash

# set -e 表示一旦脚本中有任何一个命令执行失败，整个脚本就会立即退出
set -e
# set -o pipefail 表示只要有任何一个命令的返回值不是0，整个管道命令的返回值就是非0
set -o pipefail

# 到脚本所在目录，rm -rf dist/ 表示删除dist目录下的所有文件
/bin/rm -rf dist/
# yarn build 表示执行yarn build命令
yarn build
# /bin/rm -rf container/app/* 表示删除container/app目录下的所有文件
/bin/rm -rf container/app/*
# /bin/cp -f -R dist/ container/app/ 表示将dist目录下的所有文件复制到container/app目录下
/bin/cp -f -R dist/ container/app/
# 跳转到container目录
cd container
# image=di.sinfere.com/app/horwin/ow 表示定义image变量
image=di.sinfere.com/app/horwin/ow
# 启动docker build命令，--rm表示构建完成后删除中间容器，-t表示指定镜像名称
docker build --rm -t ${image} .
#docker push ${image}
# 删除container/app目录下的所有文件
/bin/rm -rf container/app/*

# docker run --rm --name hwow -p 8080:80 di.sinfere.com/app/horwin/ow
```