# vant工程模板

**Repository Path**: wangluoyi/vant-project-template

## Basic Information

- **Project Name**: vant工程模板
- **Description**: vue3 + vant + vite 项目配置模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2021-06-02
- **Last Updated**: 2023-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vant 工程模板

## 介绍

vue3 + vant + vite 项目配置模板

## 软件架构

基于 vue3.0 + vant3.0 + vite + axios 创建的移动端开发模板

## 项目安装

```
npm install
```

## 开发模式

```
npm run dev
```

## 打包正式版

```
npm run build
```

## 打包预发布版（测试版）

```
npm  run staging
```

## 启动静态服务器，将 dist 文件夹运行在服务器上

```
npm  run preview
```

## 目录介绍

```
├─ public                   // 公共资源
├─ src                      // 开发
│  ├─ api                   // api接口
│  ├─ assets                // 静态资源
│  ├─ components            // 公共组件
│  ├─ plugins               // 插件
│  ├─ router                // 路由
│  ├─ store                 // 状态管理
│  ├─ utils                 // 工具函数
│  ├─ views                 // 页面组件
│  ├─ App.vue               // 页面入口
│  └─ main.js               // 入口js
├─ .git                     // git
├─ .husky                   // husky： 提交代码到仓库之前，检查代码格式，并格式化
├─ .editorconfig            // 编辑器配置
├─ .eslintrc.js             // eslint配置
├─ .gitignore               // ignore配置
├─ .prettierrc              // 代码风格配置
├─ .env.development         // 开发环境
├─ .env.production          // 生产环境
├─ .env.staging             // 预发布环境（测试环境）
├─ index.html               // 项目入口html
├─ package-lock.json        // lock文件
├─ package.json             // package
├─ postcss.config.js        // postcss
├─ README.md                // readme
└─ vite.config.js           // vite配置

```

## 环境配置介绍

根目录下`.env.development`，`.env.production`，`.env.staging`三个文件，分别对应开发环境、生产环境、预发布环境（测试环境）。以下为字段说明：

- `VITE_API_URL`：api 调用地址，如果线上需要取这个地址，可使用`import.meta.env.VITE_API_URL`
- `VITE_STATIS_URL`：埋点统计 api 调用地址，专供 utils 文件夹中的`eventTracking_JSSDK.js`使用（老项目使用）

## vant 移动端适配配置说明

- 详见`postcss.config.js`文件中 postcss 配置
- pxtoviewport：设置 viewportWidth，根据设计稿设置，如设计稿 width = 750px，将 viewportWidth 设置为 750/2 即可，页面中的尺寸同样/2
- 因`postcss-px-to-viewport`无法转换行内样式，所有关于尺寸的样式一定不要写在 style 标签内

## vite 内置环境变量

- `import.meta.env.MODE` : { string } 应用运行的模式。
- `import.meta.env.BASE_URL` : { string } 部署应用时的基本 URL。他由 base 配置项决定。
- `import.meta.env.PROD` : { boolean } 应用是否运行在生产环境。
- `import.meta.env.DEV` : { boolean } 应用是否运行在开发环境 (永远与 import.meta.env.PROD 相反)。