# vue2_project_template

**Repository Path**: wangguixuan/vue2_project_template

## Basic Information

- **Project Name**: vue2_project_template
- **Description**: vue2版本的H5项目模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-03
- **Last Updated**: 2023-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-mpa-project-template

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

## 项目介绍

```bash
# 克隆项目
git clone <url>

# 进入项目根目录
cd <projectName>

# 安装依赖
npm install

# 运行项目
npm run serve

# 打包项目
npm run build

```

`src/pages/` 下的每一个目录都是且必须是一个单页应用(SPA)，要指定运行某一个单页应用，将 `.env` 文件中的 `VUE_APP_RUN_PAGE` 变量赋值为单页应用的目录名即可。

比如只想运行 `src/pages/admin` 这个单页应用，修改 .env 文件的 `VUE_APP_RUN_PAGE = 'admin'` ，然后执行 `npm run serve` 或 `npm run build` 即可。

注：如果临时修改 `.env` 文件不需要被 Git 追踪到，可以新建 `.env.local` 文件，该文件设置的变量优先级高于 `.env` 文件，且不会被 Git 追踪。

## 项目结构

```bash
├── src                        # 源代码
│   ├── api                    # 后端请求 api
│   ├── assets                 # 主题 字体等静态资源
│   ├── commonViews            # 公用路由视图
│   ├── components             # 全局公用基础组件（与业务无关）
│   ├── directives             # 全局指令
│   ├── filters                # 全局过滤器
│   ├── pageComponents         # 全局公用业务组件（与业务有关）
│   ├── pages                  # 单页/多页应用入口
│   ├── pageTemplates          # 应用模板
│   ├── routerComponents       # 路由组件（与路由相关的组件）
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
```

### 文件结构组织

- 如果组件内结构简单，不包含子组件，可以将组件名作为文件名，比如 `组件名.vue`
- 如果组件内结构复杂，还需要抽离多个子组件时，将组件名作为目录名，比如 `组件名/index.vue`
- 所有路由级别的的视图组件，使用小驼峰命名，比如 `userManage/index.vue`
- 所有组件级别的文件，使用大驼峰命名，比如 `UserEdit.vue` 或 `UserEdit/index.vue`

## 基础服务地址(VUE_APP_BASE_URL)

访问服务端的 `VUE_APP_BASE_URL` 配置放在 `.env.development`, 线上环境不需要配置，由后端解决使用相对地址

## 环境变量

```bash
# 指定运行打包的是哪个单页应用，比如 `src/pages/admin`
VUE_APP_RUN_PAGE = 'admin'

# 是否开启 px 转 rem ，值为 'open' 时表示开启
ENV_PX_TO_REM = 'open'
```

环境变量文件：

- `.env`, `.env.local` 开发模式(npm run serve)和生产模式(npm run [test | build])都会读取
- `.env.development`, `.env.development.local` 仅在开发模式(npm run serve)读取
- `.env.test`, `.env.test.local` 仅在生产模式测试版(npm run test)读取
- `.env.production`, `.env.production.local` 仅在生产模式正式版(npm run build)读取

若多个环境变量同名，优先级高的文件的同名变量会覆盖优先级低的同名变量。

优先级：

- `npm run serve` 时， `.env.development.local` > `.env.development` > `.env.local` > `.env`
- `npm run test` 时， `.env.test.local` > `.env.test` > `.env.local` > `.env`
- `npm run build` 时， `.env.production.local` > `.env.production` > `.env.local` > `.env`