-
Notifications
You must be signed in to change notification settings - Fork 176
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4a4c90f
commit e97b6ad
Showing
2 changed files
with
247 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,128 @@ | ||
| ### Vitecamp | ||
| <br> | ||
|
|
||
| 这是一个开箱即用的 Vite2 + Vue3 + TypeScript 模板，可以帮助小伙伴们快速建立项目； | ||
| <p align='center'> | ||
| <a href="https://vitecamp.netlify.app/">Live Demo</a> | ||
| </p> | ||
|
|
||
| ### 已配置好的开箱即用功能： | ||
| <br> | ||
|
|
||
| - `编程语言`：**TypeScript 4.x 、JavaScript** | ||
| - `前端框架`：**Vue 3.x** | ||
| - `构建工具`：**Vite 2.x** | ||
| - `UI 框架`：**Element Plus** | ||
| - `图标工具`：**icones** | ||
| - `CSS预编译`：**Sass** | ||
| - `CSS框架`：**Windi CSS** | ||
| - `HTTP工具`：**Axios** | ||
| <p align='center'> | ||
| <b>English</b> | <a href="https://github.com/nekobc1998923/vitecamp/blob/master/README.zh-CN.md">简体中文</a> | ||
| </p> | ||
|
|
||
| - `路由管理`：**Vue Router 4.x** | ||
| - `状态管理`：**Pinia** | ||
| - `代码规范`：**EditorConifg、Prettier、ESLint、Airbnb JavaScript Style Guide** | ||
| - `提交规范`：**husky、Commitlint 、lint-staged** | ||
| <br> | ||
|
|
||
| 还有一些其余的各种功能插件： | ||
| ## Features | ||
|
|
||
| - `实现自动按需加载`（**`墙裂推荐`**）：**unplugin-auto-import、unplugin-vue-components、unplugin-icons** | ||
| - `实现 SVG图标 的组件化`：**vite-svg-loader** | ||
| - `让各种 API 支持响应式`：**VueUse** | ||
| - ⚡️ [Vue 3](https://github.com/vuejs/vue-next), [Vite 2](https://github.com/vitejs/vite) - fast ! | ||
| - 💪 [Typescript](https://www.typescriptlang.org/) - of course! necessary | ||
| - 🎉 [Element Plus ready](https://github.com/element-plus/element-plus) - UI Library based on Vue.js 3 | ||
| - 🔥 [Axios](https://github.com/axios/axios) - Http Library based on Promise | ||
| - 💡 [Vue Router 4](https://router.vuejs.org/zh/) - The official router for Vue.js | ||
| - 📦 [Components auto importing](https://github.com/antfu/unplugin-vue-components) - Automatically register components on demand without import | ||
| - 📥 [Auto import APIs](https://github.com/antfu/unplugin-auto-import) - Automatically import APIs | ||
| - 🍍 [State Management via Pinia](https://pinia.esm.dev/) - The Vue Store that you will enjoy using | ||
| - 🎨 [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework | ||
| - 😃 [icones](https://github.com/antfu/unplugin-icons) - Powerful Icon Library, Use icons from any icon sets | ||
| - 🌍 [I18n ready](./locales) - Want to translate? Yes, you can! | ||
| - 👩🎨 [NProgress](https://github.com/rstacruz/nprogress) - Page loading progress feedback | ||
| - 😃 [SVG Support](https://github.com/jpkleemans/vite-svg-loader) - Support the use of SVG images as components | ||
| - 📑 [Markdown Support](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown | ||
| - 🔑 Complete code style specification and code submission specification | ||
| - ☁️ Deploy on Netlify, zero-config | ||
|
|
||
| - `让加载页面时有所反馈`：**NProgress** | ||
| ## Pre-packed | ||
|
|
||
| - `支持 markdown`：**vite-plugin-md** | ||
| ### UI Frameworks | ||
|
|
||
| > 上述所有的功能都已经过配置和验证，使用模板之后就可以愉快的撸码了！ | ||
| - [Windi CSS](https://github.com/windicss/windicss) (On-demand [TailwindCSS](https://tailwindcss.com/)) - lighter and faster, with a bunch of additional features | ||
| - [Windi CSS Typography](https://windicss.org/plugins/official/typography.html) | ||
| - [Element Plus](https://github.com/element-plus/element-plus) - A powerful Vue.js 3 UI Library | ||
|
|
||
| ### Icons | ||
|
|
||
| - [🔍Icônes](https://icones.netlify.app/) - use icons from any icon sets | ||
| - [unplugin-icons](https://github.com/antfu/unplugin-icons) - Automatically introduce the icons you need on demand | ||
|
|
||
| ### Plugins | ||
|
|
||
| - [Vue Router 4](https://router.vuejs.org/zh/) - The official router for Vue.js | ||
| - [Pinia](https://pinia.esm.dev) - The Vue Store that you will enjoy using | ||
| - [Axios](https://github.com/axios/axios) - Http Library based on Promise | ||
| - [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - components auto import | ||
| - [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - Automatically import APIs | ||
| - [vite-plugin-style-import](https://github.com/vbenjs/vite-plugin-style-import) - A plug-in that imports component library styles on demand | ||
| - [vite-plugin-windicss](https://github.com/antfu/vite-plugin-windicss) - Windi CSS Integration | ||
| - [vite-plugin-md](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown | ||
| - [markdown-it-prism](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting | ||
| - [prism-theme-vars](https://github.com/antfu/prism-theme-vars) - customizable Prism.js theme using CSS variables | ||
| - [markdown-it-link-attributes](https://github.com/crookedneighbor/markdown-it-link-attributes) - Uniformly set the hyperlink jump mode in markdown | ||
| - [Vue I18n](https://github.com/intlify/vue-i18n-next) - Internationalization | ||
| - [vite-plugin-vue-i18n](https://github.com/intlify/vite-plugin-vue-i18n) - Vite plugin for Vue I18n | ||
| - [vite-plugin-checker](https://github.com/fi3ework/vite-plugin-checker) - Support to throw eslint and TS errors in the browser at runtime | ||
| - [vite-plugin-fonts](https://github.com/stafyniaksacha/vite-plugin-fonts) - Vite's font loader | ||
| - [VueUse](https://github.com/antfu/vueuse) - Collection of useful composition APIs | ||
| - [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader) - Support the use of SVG images as components | ||
|
|
||
| ### Coding Style | ||
|
|
||
| - [ESLint](https://eslint.org/) with [Airbnb Style](https://github.com/airbnb/javascript) | ||
|
|
||
| ### Dev tools | ||
|
|
||
| - [TypeScript](https://www.typescriptlang.org/) | ||
| - [Netlify](https://www.netlify.com/) - zero-config deployment | ||
| - [VS Code Extensions](./.vscode/extensions.json) | ||
| - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) -Vue 3 IDE support | ||
| - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Icon inline display and autocomplete | ||
| - [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) - All in one i18n support | ||
| - [Windi CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - IDE support for Windi CSS | ||
| - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Code quality and rule checking | ||
| - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Focus on code formatting and beautifying code | ||
| - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - Coding style check | ||
|
|
||
| ## Try it now! | ||
|
|
||
| ### GitHub Template | ||
|
|
||
| [Create a repo from this template on GitHub](https://github.com/nekobc1998923/vitecamp/generate). | ||
|
|
||
| ### Clone to local | ||
|
|
||
| ```bash | ||
| git clone https://github.com/nekobc1998923/vitecamp.git my-vitecamp-app | ||
| cd my-vitecamp-app | ||
| npm i | ||
| ``` | ||
|
|
||
| ## Checklist | ||
|
|
||
| When you use this template, try follow the checklist to update your info properly | ||
|
|
||
| - [ ] Change the author name in `LICENSE` | ||
| - [ ] Change the author name in `package.json` | ||
| - [ ] Change the title in `.env` | ||
| - [ ] Change the favicon in `public` | ||
| - [ ] Clean up the `README` and remove routes | ||
|
|
||
| And then , you can enjoy coding fun :) | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Development | ||
|
|
||
| Just run and visit http://localhost:8080 | ||
|
|
||
| ```bash | ||
| npm run dev | ||
| ``` | ||
|
|
||
| ### Build | ||
|
|
||
| To build the App, run | ||
|
|
||
| ```bash | ||
| npm run build | ||
| ``` | ||
|
|
||
| And you will see the generated file in `dist` that ready to be served. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| <br> | ||
|
|
||
| <p align='center'> | ||
| <a href="https://vitecamp.netlify.app/">在线 Demo</a> | ||
| </p> | ||
|
|
||
| <br> | ||
|
|
||
| <p align='center'> | ||
| <a href="https://github.com/nekobc1998923/vitecamp/blob/master/README.md">English</a> | <b>简体中文</b> | ||
| </p> | ||
|
|
||
| <br> | ||
|
|
||
| ## 特性 | ||
|
|
||
| - ⚡️ [Vue 3](https://github.com/vuejs/vue-next), [Vite 2](https://github.com/vitejs/vite) - 快！ | ||
| - 💪 [Typescript](https://www.typescriptlang.org/) - 当然！必不可少 | ||
| - 🎉 [Element Plus 开箱即用](https://github.com/element-plus/element-plus) - 基于 Vue.js 3 的强大 UI 库 | ||
| - 🔥 [Axios 配置和封装](https://github.com/axios/axios) - 基于 Promise 的 HTTP 请求库 | ||
| - 💡 [Vue Router 4](https://router.vuejs.org/zh/) - Vuejs 的官方路由 | ||
| - 📦 [组件自动按需加载](https://github.com/antfu/unplugin-vue-components) - 自动按需注册组件, 无需 import | ||
| - 📥 [API 自动按需加载](https://github.com/antfu/unplugin-auto-import) - 无需手动 import 进行引入 | ||
| - 🍍 [Pinia 状态管理](https://pinia.esm.dev/) - 你将会喜欢上的 Vue Store | ||
| - 🎨 [Windi CSS](https://github.com/windicss/windicss) - 下一代实用的原子 css 框架 | ||
| - 😃 [icones](https://github.com/antfu/unplugin-icons) - 强大的图标库，各种图标集为你所用 | ||
| - 🌍 [I18n 国际化开箱即用](./locales) - 想要翻译？是的，都可以！ | ||
| - 👩🎨 [NProgress](https://github.com/rstacruz/nprogress) - 页面加载进度反馈 | ||
| - 😃 [SVG 支持](https://github.com/jpkleemans/vite-svg-loader) - 支持以 组件形式使用 SVG 图片 | ||
| - 📑 [Markdown 支持](https://github.com/antfu/vite-plugin-md) - 随意的在页面中嵌入 Markdown | ||
| - 🔑 完整支持的代码风格规范和代码提交规范 | ||
| - ☁️ 支持零配置部署 Netlify | ||
|
|
||
| ## 已配置 | ||
|
|
||
| ### UI 框架 | ||
|
|
||
| - [Windi CSS](https://github.com/windicss/windicss) (按需的 [TailwindCSS](https://tailwindcss.com/)) - 更轻，更快和和一系列额外的特性! | ||
| - [Windi CSS Typography](https://windicss.org/plugins/official/typography.html) | ||
| - [Element Plus](https://github.com/element-plus/element-plus) - 基于 Vue.js 3 的强大 UI 库 | ||
|
|
||
| ### Icons | ||
|
|
||
| - [🔍Icônes](https://icones.netlify.app/) - 使用任意的图标集 | ||
| - [unplugin-icons](https://github.com/antfu/unplugin-icons) - 自动按需引入你所需要的图标！ | ||
|
|
||
| ### 插件 | ||
|
|
||
| - [Vue Router 4](https://router.vuejs.org/zh/) - Vuejs 的官方路由 | ||
| - [Pinia](https://pinia.esm.dev) - 新一代的 Vue Store 状态管理 | ||
| - [Axios](https://github.com/axios/axios) - 基于 Promise 的 HTTP 请求库 | ||
| - [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - 自动按需加载组件 | ||
| - [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - 自动按需加载 API | ||
| - [vite-plugin-style-import](https://github.com/vbenjs/vite-plugin-style-import) - 自动加载手动引入的 第三方组件库 的样式文件 | ||
| - [vite-plugin-windicss](https://github.com/antfu/vite-plugin-windicss) - Windi CSS 的整合 | ||
| - [vite-plugin-md](https://github.com/antfu/vite-plugin-md) - Markdown 作为组件，也可以让组件在 Markdown 中使用 | ||
| - [markdown-it-prism](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) 的语法高亮 | ||
| - [prism-theme-vars](https://github.com/antfu/prism-theme-vars) - 利用 CSS 变量自定义 Prism.js 的主题 | ||
| - [markdown-it-link-attributes](https://github.com/crookedneighbor/markdown-it-link-attributes) - 统一设置 Markdown 里的超链接跳转方式 | ||
| - [Vue I18n](https://github.com/intlify/vue-i18n-next) - 国际化 | ||
| - [vite-plugin-vue-i18n](https://github.com/intlify/vite-plugin-vue-i18n) - Vue I18n 的 Vite 插件 | ||
| - [vite-plugin-checker](https://github.com/fi3ework/vite-plugin-checker) - 支持运行时在浏览器抛出 ESLint 和 TS 的错误 | ||
| - [vite-plugin-fonts](https://github.com/stafyniaksacha/vite-plugin-fonts) - Vite 的字体加载器 | ||
| - [VueUse](https://github.com/antfu/vueuse) - 实用的 Composition API 工具合集 | ||
| - [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader) - 支持以 组件形式使用 SVG 图片 | ||
|
|
||
| ### 编码风格 | ||
|
|
||
| - [ESLint](https://eslint.org/) 配置为 [Airbnb Style](https://github.com/airbnb/javascript) | ||
|
|
||
| ### 开发工具 | ||
|
|
||
| - [TypeScript](https://www.typescriptlang.org/) | ||
| - [Netlify](https://www.netlify.com/) - 零配置的部署 | ||
| - [VS Code 扩展](./.vscode/extensions.json) | ||
| - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 IDE 支持 | ||
| - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - 图标内联显示和自动补全 | ||
| - [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) - 多合一的 I18n 支持 | ||
| - [Windi CSS 智能感知](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - Windi CSS 的 IDE 支持 | ||
| - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 代码质量和规则检查 | ||
| - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 专注于代码格式化、美化代码 | ||
| - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - 编码风格检查 | ||
|
|
||
| ## 现在可以试试! | ||
|
|
||
| ### GitHub 模板 | ||
|
|
||
| [使用这个模板创建仓库](https://github.com/nekobc1998923/vitecamp/generate). | ||
|
|
||
| ### 克隆到本地 | ||
|
|
||
| ```bash | ||
| git clone https://github.com/nekobc1998923/vitecamp.git my-vitecamp-app | ||
| cd my-vitecamp-app | ||
| npm i | ||
| ``` | ||
|
|
||
| ## 清单 | ||
|
|
||
| 使用此模板时，请尝试按照清单正确更新你自己的信息 | ||
|
|
||
| - [ ] 在 `LICENSE` 中改变作者名 | ||
| - [ ] 在 `package.json` 中改变作者名 | ||
| - [ ] 在 `.env` 中改变标题 | ||
| - [ ] 在 `public` 目录下改变 favicon | ||
| - [ ] 整理 `README `并删除路由 | ||
|
|
||
| 然后，你就可以享受编写代码的乐趣了 :) | ||
|
|
||
| ## 使用 | ||
|
|
||
| ### 开发 | ||
|
|
||
| 只需要执行以下命令就可以在 http://localhost:8080 中看到 | ||
|
|
||
| ```bash | ||
| npm run dev | ||
| ``` | ||
|
|
||
| ### 构建 | ||
|
|
||
| 构建该应用只需要执行以下命令 | ||
|
|
||
| ```bash | ||
| npm run build | ||
| ``` | ||
|
|
||
| 然后你会看到用于发布的 `dist` 文件夹被生成。 |