# simple-vite

**Repository Path**: zijun2030/simple-vite

## Basic Information

- **Project Name**: simple-vite
- **Description**: 集成式、优化式Vite2+Vue3+Ts4+Vant3+Less+Postcss-to-px-viewport框架
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 13
- **Forks**: 13
- **Created**: 2021-02-24
- **Last Updated**: 2023-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align=center><img src="https://www.hualigs.cn/image/600a316f1aab3.jpg" width="100" height="100"></div>

<div align=center><h1>SimpleVite</h1></div>

# :pushpin: 简介

**:disappointed: 还在为公司临时启动新项目从而重新搭建一套前端环境而烦恼？**  
**:disappointed: 还在为项目文件优化及项目代码规范不知如何处理而一一百度？**  
**:disappointed: 是否有想过不想花时间处理功能性技术只想专注公司业务模块？**

SimpleVite 就是为了解决这些问题！省时间、少踩坑、高效率！
SimpleVite 是一款基于`Vite2`+`Vue3`+`Vant3`+`TypeScript` 的移动端且开箱即用的前端集成式、优化式框架。

# :pushpin: 简单预览 && :palm_tree: Webpack 版本

<img src="https://www.hualigs.cn/image/6054a9a298924.jpg" width = "300" height = "auto" />
<img src="https://www.hualigs.cn/image/6054a9a29ed9d.jpg" width = "300" height = "auto" />
<img src="https://www.hualigs.cn/image/6054a9a29ed58.jpg" width = "300" height = "auto" />
<img src="https://www.hualigs.cn/image/6054a9a29da65.jpg" width = "300" height = "auto" />
<img src="https://www.hualigs.cn/image/6054a9a29da81.jpg" width = "300" height = "auto" />

可参照 SimpleVue 项目: [https://gitee.com/zijun2030/simple-vue](https://gitee.com/zijun2030/simple-vue)

# :pushpin: 优势特色

**:star: 互联网上已有诸多类似的开源式框架，那么 SimpleVite 对比有何优势？**

一张图表示：
![simple_vue.jpg](https://www.hualigs.cn/image/600a483d609dc.jpg)

| 序号 |                              要点                              |
| :--: | :------------------------------------------------------------: |
|  1   | 技术栈：vite2.x、Vue3.x、Vue-Router4.x、Vuex4.x、Vant3.x、Less |
|  2   |               移动端/全面屏适配：px-to-viewport                |
|  3   |                    全局样式/常用样式统一化                     |
|  4   |                         鉴权：登录校验                         |
|  5   |                   Axios 精细化封装，Hooks 化                   |
|  6   |             项目结构优化：Composition/工程化 思想              |
|  7   |                            路由配置                            |
|  8   |                环境变量配置：独立化 + env 配置                 |
|  9   |                       Icon/Svg 全系支持                        |
|  10  |                 微信公众号/Hybrid 开发埋点封装                 |
|  11  |                         开发便捷性优化                         |
|  12  |                        生产构建性能优化                        |
|  13  |                      规范化代码/提交/注释                      |
|  14  |                        常见项目踩坑规避                        |

# :pushpin: 项目运行

```shell
# 克隆项目/项目分支
# git clone -b viewport https://gitee.com/zijun2030/simple-vite.git
git clone https://gitee.com/zijun2030/simple-vite.git
# 进入项目目录 simple-vue
cd simple-vite
# 安装依赖
yarn install
# 本地开发启动项目
yarn run dev
```

# :pushpin: 版本日志

> **3.0.0**
>
> 1. `A` 重构路由、布局页面
> 2. `A` 新增下拉组件
> 3. `F` 修复一些 bug

> **2.0.0**
>
> 1. `A` 新增登录、注册页面
> 2. `F` 修复一些 bug

> **1.0.0**
>
> 1. `A` 新增主要集成和优化，具体可见预览图

# :pushpin: 注意事项

- 项目基于 `postcss-px-to-viewport`，默认 UI 设计稿宽度是 `375px`

- 配置文件说明
  ```javascript
  // 站点标题
  siteTitle: 'SimpleVue',
  // Iconfont Font class
  iconClassUrl: '//at.alicdn.com/t/font_2292504_qwgi70l7gkr.css',
  // Iconfont Symbol
  iconSymbolUrl: '//at.alicdn.com/t/font_2292513_xqesvi79cem.js',
  // 是否开启VConsole
  showVConsole: false,
  // 是否全局开启导航栏
  fixedNavBar: true,
  // 是否全局底部切换栏
  fixedTabBar: true,
  axios: {
    // Token键名: Authorization/..bundleRenderer.renderToStream
    tokenKey: '',
    // 请求超时时间
    timeout: 10000,
  },
  // 数据默认存放位置 cookie/sessionStorage/localStorage
  storage: 'localStorage',
  // 在微信/小程序中调用微信sdk
  weixin: {
    false: true,
    // ! 微信公众号APPID,为了安全起见，需要放置env中
    // wxAppId: process.env.wxAppId,
  },
  // 基本的api地址，可按需添加，开发环境需在.evn.development中配置
  baseApiUrl: 'https://api.apiopen.top/',
  ```