# vue3_vant_basic_program

**Repository Path**: hkjGitee_admin/vue3_vant_basic_program

## Basic Information

- **Project Name**: vue3_vant_basic_program
- **Description**: vue3-vue-cli5-pinia2-vant4  移动端基线工程
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-16
- **Last Updated**: 2023-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + Vue-Cli5 + vant4 + pinia2 基线工程

## 项目介绍

该工程是基于 Vue3 + Vue-Cli5 + vant4 + pinia2 的移动端基线工程，内部已经封装了：

- vant 组件配置（按需引入）
- `postcss-px-to-viewport` vw 适配布局
- 浏览器样式重置
- 移动端 1px 边框
- `pinia` 分模块配置、`pinia-plugin-persistedstate` 数据持久化缓存
- `vue-router` 分模块配置
- 打包分环境发布配置
- `vconsole`分环境配置
- `sourceMap` 分环境配置
- 自动按本地IP地址启动浏览器
- `jsencrypt`  数字信封加密
- `svg-sprite-loader` 、`Svg-Icon` 组件封装
- vue.config.js
  - `devServer`： proxy 跨域配置、HMR 热更新修复 
  - 目录包名 alias 配置
  - 添加 `webpack-bundle-analyzer` 打包分析
  - `transform-remove-console` 去掉 console.log 输出
  - `optimization.splitChunks` 单独打包第三方模块
  - `CompressionWebpackPlugin` 开启 gzip 压缩

## 代码提交

注：使用命令行工具进行代码提交

- 1.git add .（选择此次提交的文件）
- 2.git cz（根据commitizen规范填写提交信息）
- 3.git pull（拉取线上分支代码）
- 4.git push（推送此次提交的文件到远端分支）

## 注意事项：

- `vant4` 不再受到 `babel-plugin-import` 的 import 写法限制，可以从 vant 中导入除了组件以外的其他内容，比如 Vant 4 中新增的 `showToast` 等方法。

## 使用说明：

- components文件夹主要存放子组件，views文件夹主要存放页面组件。

- 单人开发时直接操作各文件夹中带main字样的文件，比如：接口层面的network/main.api.js，路由层面的router/modules/main.routes.js,数据存储层面的store/modules/main.store.js；多人开发时，在同级目录下创建新的js文件(比如：another.api.js,another.routes.js,another.store.js)，其他入口文件尽量不要修改。

- 按需引入 vant 组件，在plugin/vant-ui.js中填写对应的组件名称即可。

- 命名规范：.vue 文件，路由名称等采用大驼峰命名（比如：NewsList），路由path采用小写字线加分隔线（比如：news-list）。



## 命令汇总表：

| 命令                | 用途             |
| ------------------- | ---------------- |
| npm install         | 安装项目依赖     |
| npm start           | 运行开发环境     |
| npm run dev         | 运行开发环境     |
| npm run serve       | 运行开发环境     |
| npm run build:debug | 功能测试环境打包 |
| npm run build:test  | 安全测试环境打包 |
| npm run build:prod  | 生产环境打包     |
| npm run lint        | 代码检查         |
| npm run analyz      | 运行分析工具     |