Skip to content
/ vue-starter Public template

基于 ` Vue 3 + TypeScript + Vite` ,及众多开源整合,构建 `Vue` 开发脚手架。帮助你进行 `Vue` 项目开发。使用 `Vitest` 进行单元测试。

License

Notifications You must be signed in to change notification settings

funnyzak/vue-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Starter

action Release Date GitHub last commit tag license

基于 Vue3 + TypeScript + Vite ,及众多开源整合,构建 Vue 开发脚手架。帮助你进行 Vue 项目开发。使用 Vitest 进行单元测试。

在线预览

Features

  • Typescript 支持
  • CSS 预处理 less、sass、stylus、WindiCSS
  • Locale 国际化
  • 多页面应用模式
  • Plop 支持
  • 定义常用脚本命令
  • Eslint Support
  • Lint Staged Hook
  • 使用 Pinia 来管理状态
  • 自定义权限指令
  • 使用 Axios 进行 Http API 请求
  • 支持 JSX 语法
  • 引入 Animite.css
  • 使用 vue-Router
  • 实现了一套根据权限 Code 控制路由的逻辑
  • 使用 keepAlive, 实现页面缓存
  • 使用 Vitest 进行单元测试
  • Utils 通用工具函数

Environment

Node 建议使用 Node 16 或更高版本。开发工具建议使用 VS Code + Volar

Usage

# 安装依赖 yarn # 默认启动 yarn dev # 预览 yarn preview # 全部构建(所有) yarn build # 删除 node_modules yarn clean # EsLint 检查 yarn eslint:check # ESLint 修复 yarn eslint:fix # 使用 prettier 代码格式检查 yarn style:check # 使用 prettier 代码格式化 yarn style:fix # lint staged hook 检查 yarn lint:staged # 模板新建 yarn p # test yarn test yarn test-ui # coverage report yarn cov # dev server yarn serve:dev yarn serve:prod yarn serve:test # windicss-analysis yarn windicss-analysis # build your mode npx vite build --mode your-mode # dev your mode npx vite --mode your-mode

Structure

├── .editorconfig // 编辑器配置文件 ├── .env.development // 环境配置文件(开发环境) ├── .env.production // 环境配置文件(生产环境) ├── .eslintignore // eslint 忽略文件 ├── .eslintrc.cjs // eslint 配置文件 ├── .github // github 配置文件 ├── .gitignore // git 忽略文件 ├── .husky // husky 配置文件 ├── .npmrc // npm 配置文件 ├── .vscode // vscode 配置文件 ├── LICENSE // 许可证文件 ├── README.md // 项目介绍文件 ├── dist // 打包输出目录 ├── index.html // 主项目入口文件 ├── nested.html // 次/嵌套页面入口文件 ├── package-lock.json // 包依赖配置文件 ├── package.json // 包配置文件 ├── plop // plop 配置 ├── plopfile.cjs // plop 配置文件 ├── postcss.config.js // postcss 配置文件 ├── prettier.config.cjs // prettier 配置文件 ├── public // 项目公共目录 ├── src // 项目源码目录 ├── router │ ├── index.ts // 路由入口 │ ├── modules // 业务路由模块,用户登陆后的根据用户权限进行动态路由添加 │ │ ├── index.ts │ │ └── user.ts │ └── remaining.ts // 其他路由,用户登陆后,不需要权限即可访问的路由 │ ├── assets // 静态资源目录 │ |── api // api 接口目录 │ ├── components // 组件目录 │ ├── config // 配置目录 │ ├── directives // 指令目录 │ ├── hooks // 钩子目录 │ ├── locales // 国际化目录 │ ├── views // 默认视图目录 │ ├── pages // 次页面目录(备用,构建多页应用) │ ├── plugins // 插件目录 │ ├── store // 状态管理 │ ├── styles // 样式目录 │ ├── utils // 工具函数目录 │ ├── main.ts // 项目入口文件 │ ├── App.vue // 项目入口组件 │ └── vite-env.d.ts // vite 环境配置文件 ├── tsconfig.json // TypeScript 配置文件 ├── windi.config.ts // Windi 配置文件 ├── tsconfig.node.json ├── types // 类型文件目录 └── vite.config.ts // vite 配置文件 

Q&A

Recommended IDE Setup

Use Take Over Mode instead of TS Plugin

You can learn more about Take Over mode here.

Reference

Contribution

如果你有任何的想法或者意见,欢迎提 Issue 或者 PR。

License

MIT License © 2022 funnyzak

About

基于 ` Vue 3 + TypeScript + Vite` ,及众多开源整合,构建 `Vue` 开发脚手架。帮助你进行 `Vue` 项目开发。使用 `Vitest` 进行单元测试。

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published

Contributors 3

  •  
  •  
  •