# simple-v

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

## Basic Information

- **Project Name**: simple-v
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-04
- **Last Updated**: 2022-01-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, TypeScript, Vue, vite

## README

# Simple-v



## 啥东西?

一款开箱即用的`Vue3`项目模板，后续会分别实现pc和mobile基础版本，实现轻量级维护。



## 技术栈?



`Vue(3.x)` + `Typescript(4.x)` + `Vite(2.x)` + `Naive-ui(2.x)` 



## 咋运行？

```sh
# 1.拉取项目。既然你都看得到这了，说明你已经拉取了项目或已知项目地址了，不做赘述
# 2.开发运行。以下这些脚本都可以在packpage.json中看到
pnpm dev
# 3.测试构建。
pnpm build:test
# 4.生产构建。
pnpm build
# 5.升级依赖为最新
pnpm up
```


## 啥特点?

- [x] 默认集成 `vue-router` , `vuex` , `axios`，`tailwind`，`vueuse`
- [x] 全局 `less` 样式引入，支持 `postcss`
- [x] 全局组件（`component`）自动注册
- [x] 全局自动导入常用依赖组合式api
- [x] 支持 `gzip,brotli` 等压缩优化，提高生产加载速度（需nginx开启对应插件）
- [x] 支持 `html` 注入，构建文件 `banner`化
- [x] 支持修改 `env` 文件之后，自动重启开发服务
- [x] 集成 `Eslint`, `Git` 钩子，实现团队代码规范
- [x] 生产构建支持图片压缩优化
- [ ] 骨架屏优化
- [ ] 多语言集成
- [ ] .....



## 注意啥?

- 开发方面
  1. 包管理工具。
     + 本项目采用 `pnpm` 包管理工具，建议同步使用此工具
     + 一键更新和升级当前项目所有依赖的命令为：`pnpm up`
  2. 样式方面。目前支持 `tailwindcss` 和 预编译 `less`
     + `less` 已支持全局变量、mixins等，建议平常开发使用的优先级为：`tailwindcss` > `less` > `postcss`，因为 `tailwindcss` 属于尝试使用，如果感觉不好用，后续可删除；如果感觉好用，后续将全部采用；目前过渡阶段接受并存
  3. 规范方面。
     + 目前只采用 `eslint` 规范，编辑器保存时可自动格式化
     + 提交代码需支持 `commitlint` 规范，具体规则可见根目录下的 `commitlint.config.js`文件
  4. vueuse插件。
     + 注意，里面方法已全部自动导入，无需再次引入。如果使用对应的方法，鉴于eslint定义问题，需在 autoimportlintrc.js 文件内加对应的全局变量

- Git提测/发布
  1. 如果需要发布提测/发布版本，先执行 `git commit -m 'xxx' `
  2. 然后提测需执行 `pnpm releaselog:test` / 发布需执行 `pnpm releaselog`
  3. 最后执行 `git push --follow-tags origin master` 同步远程即可
  
- UI方面
  1. 图标
     + 常用单色图标采用 `xicons/material`，地址为：[xicons](https://www.xicons.org/#/)，注意尽量采用 `material`，因为当前只引入次类型，如果需要其他类型，**开发者**需要同时添加对应依赖。常用图标可发送给UI同事作为设计参考
     + 如果需要自定义多色图标，可协调UI同事将图标存放至iconfont上，建议svg形式
  2. 组件UI
     + 组件开发使用 `Naive-ui`，地址为： [naiveui](https://www.naiveui.com/zh-CN/)，前期开发如果感觉不好用，可切换成其他UI库，确定UI后可将组件库发给UI同事作为设计参考

- 命名规范
  1. 命名方式说明
     + camel驼峰命名法：anApple
     + Pascal帕斯卡命名法：AnApple
     + 中划线命名法：an-apple
     + 下划线命名法：an_apple
  2. 文件夹(目录)命名
     + 除 `components` (组件) 目录下的采用Pascal命名法，其余均采用中划线命名法
  3. Vue文件命名
     + 除 `index.vue` 文件外，其余均采用Pascal命名法
  4. Js/Ts文件命名
     + 均采用中划线命名法
  5. Html/Css文件命名
     + 均采用中划线命名法
  6. Img文件命名
     + 均采用下划线命名法
  7. 路由参数命名
     + 均采用camel命名法
  8. 代码规范参考链接：[代码规范参考](https://zijun2030.gitee.io/code-guide/#/)
- 其他