Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/agileago/fe-template
Vue3 Vite模板
https://github.com/agileago/fe-template
oop vue3
Last synced: about 14 hours ago
JSON representation
Vue3 Vite模板
- Host: GitHub
- URL: https://github.com/agileago/fe-template
- Owner: agileago
- Created: 2021-04-08T05:46:43.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-21T08:58:30.000Z (3 months ago)
- Last Synced: 2024-11-21T09:34:59.316Z (3 months ago)
- Topics: oop, vue3
- Language: TypeScript
- Homepage:
- Size: 2.74 MB
- Stars: 16
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite vue3 前端基础模板
### 工具
建议使用 `webstorm`IDE,并且安装以下插件：
- [中文语言包](https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack----)
- [Visual Studio Code Dark Plus Theme—主题](https://plugins.jetbrains.com/plugin/12255-visual-studio-code-dark-plus-theme)
- [Atom Material Icons—图标](https://plugins.jetbrains.com/plugin/10044-atom-material-icons)
- [Conventional Commit—标准提交信息](https://plugins.jetbrains.com/plugin/13389-conventional-commit)
- [Awesome Console—控制台链接到代码](https://plugins.jetbrains.com/plugin/7677-awesome-console)
- [Rainbow Brackets—彩虹大括号](https://plugins.jetbrains.com/plugin/10080-rainbow-brackets)
### 设置**npm**国内镜像
```shell
npm install -g nrm
nrm use taobao
```
### 安装依赖
```shell
pnpm install
```
### 设置Webstorm
打开IDE设置界面： command⌘ + .
1. 工具 -> 保存时的操作 勾上保存时优化`import`和运行`eslint`
2. 其他设置 -> ConventialCommit -> 基于模板
### 命令
所有命令使用 `pnpm run` 执行
- `dev` : 启动开发
- `build` : 生产构建
- `preview` : 本地构建完成预览
- `type:check` : 类型检查
- `lint` : eslint修复代码
- `format` : prettier代码
- `chrome` : 打开无跨域限制的浏览器
- `api` : swagger生成请求代码，在 `src/api` 下进行配置
### 代码规范
使用`类组件`+`依赖注入`写业务代码 [vue3-oop](https://github.com/agileago/vue3-oop)
### 命名规范
1. 使用小写加 `-` 作为文件命名，比如文件夹 `search-form` 尽量避免文件及文件夹出现大写及汉字情况
2. js命名采用小驼峰 `searchForm`, 类采用大驼峰 `SearchForm`
3. 文件使用后缀标识功能 `home.view.tsx` 表示此文件作为页面，`home.service.ts` 作为服务等等
### 项目配置
1. 配置统一写在 `config` 文件夹下面，区分环境
2. 业务按功能模块区分，在 `module` 文件夹下面，每个 `module` 有自己的路由文件，会被顶级路由服务收集到