-
-
Notifications
You must be signed in to change notification settings - Fork 1
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
Showing
1 changed file
with
5 additions
and
209 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,211 +1,7 @@ | ||
| <p align='center'> | ||
| <img src='https://user-images.githubusercontent.com/11247099/154486817-f86b8f20-5463-4122-b6e9-930622e757f2.png' alt='Vitesse - Opinionated Vite Starter Template' width='600'/> | ||
| </p> | ||
| # AgroforestDAO Frontend | ||
|
|
||
| <p align='center'> | ||
| Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br> | ||
| </p> | ||
| This project hos started based on [Vitesse](https://github.com/antfu/vitesse/tree/main/locales) (Opinionated Vue3 template), to develop our homepage and apps, due some desired features already configured and updated. | ||
|
|
||
| <br> | ||
|
|
||
| <p align='center'> | ||
| <a href="https://vitesse.netlify.app/">Live Demo</a> | ||
| </p> | ||
|
|
||
| <br> | ||
|
|
||
| <p align='center'> | ||
| <b>English</b> | <a href="https://github.com/antfu/vitesse/blob/main/README.zh-CN.md">简体中文</a> | ||
| <!-- Contributors: Thanks for geting interested, however we DON'T accept new transitions to the README, thanks. --> | ||
| </p> | ||
|
|
||
| <br> | ||
|
|
||
|
|
||
| ## Features | ||
|
|
||
| - ⚡️ [Vue 3](https://github.com/vuejs/core), [Vite 3](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness | ||
|
|
||
| - 🗂 [File based routing](./src/pages) | ||
|
|
||
| - 📦 [Components auto importing](./src/components) | ||
|
|
||
| - 🍍 [State Management via Pinia](https://pinia.vuejs.org/) | ||
|
|
||
| - 📑 [Layout system](./src/layouts) | ||
|
|
||
| - 📲 [PWA](https://github.com/antfu/vite-plugin-pwa) | ||
|
|
||
| - 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine | ||
|
|
||
| - 😃 [Use icons from any icon sets with classes](https://github.com/antfu/unocss/tree/main/packages/preset-icons) | ||
|
|
||
| - 🌍 [I18n ready](./locales) | ||
|
|
||
| - 🗒 [Markdown Support](https://github.com/antfu/vite-plugin-vue-markdown) | ||
|
|
||
| - 🔥 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227) | ||
|
|
||
| - 🤙🏻 [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) enabled | ||
|
|
||
| - 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly | ||
|
|
||
| - 🖨 Static-site generation (SSG) via [vite-ssg](https://github.com/antfu/vite-ssg) | ||
|
|
||
| - 🦔 Critical CSS via [critters](https://github.com/GoogleChromeLabs/critters) | ||
|
|
||
| - 🦾 TypeScript, of course | ||
|
|
||
| - ⚙️ Unit Testing with [Vitest](https://github.com/vitest-dev/vitest), E2E Testing with [Cypress](https://cypress.io/) on [GitHub Actions](https://github.com/features/actions) | ||
|
|
||
| - ☁️ Deploy on Netlify, zero-config | ||
|
|
||
| <br> | ||
|
|
||
|
|
||
| ## Pre-packed | ||
|
|
||
| ### UI Frameworks | ||
|
|
||
| - [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine. | ||
|
|
||
| ### Icons | ||
|
|
||
| - [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/) | ||
| - [Pure CSS Icons via UnoCSS](https://github.com/antfu/unocss/tree/main/packages/preset-icons) | ||
|
|
||
| ### Plugins | ||
|
|
||
| - [Vue Router](https://github.com/vuejs/vue-router) | ||
| - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - file system based routing | ||
| - [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - layouts for pages | ||
| - [Pinia](https://pinia.esm.dev) - Intuitive, type safe, light and flexible Store for Vue using the composition api | ||
| - [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import | ||
| - [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing | ||
| - [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA | ||
| - [`vite-plugin-vue-markdown`](https://github.com/antfu/vite-plugin-vue-markdown) - Markdown as components / components in Markdown | ||
| - [`markdown-it-shiki`](https://github.com/antfu/markdown-it-shiki) - [Shiki](https://github.com/shikijs/shiki) for syntax highlighting | ||
| - [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 | ||
| - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs | ||
| - [`vite-ssg-sitemap`](https://github.com/jbaubree/vite-ssg-sitemap) - Sitemap generator | ||
| - [`@vueuse/head`](https://github.com/vueuse/head) - manipulate document head reactively | ||
|
|
||
| ### Coding Style | ||
|
|
||
| - Use Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227) | ||
| - [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config), single quotes, no semi. | ||
|
|
||
| ### Dev tools | ||
|
|
||
| - [TypeScript](https://www.typescriptlang.org/) | ||
| - [Vitest](https://github.com/vitest-dev/vitest) - Unit testing powered by Vite | ||
| - [Cypress](https://cypress.io/) - E2E testing | ||
| - [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager | ||
| - [`vite-ssg`](https://github.com/antfu/vite-ssg) - Static-site generation | ||
| - [critters](https://github.com/GoogleChromeLabs/critters) - Critical CSS | ||
| - [Netlify](https://www.netlify.com/) - zero-config deployment | ||
| - [VS Code Extensions](./.vscode/extensions.json) | ||
| - [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - Fire up Vite server automatically | ||
| - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 `<script setup>` 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 | ||
| - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) | ||
|
|
||
| ## Variations | ||
|
|
||
| As this template is strongly opinionated, the following provides a curated list for community-maintained variations with different preferences and feature sets. Check them out as well. PR to add yours is also welcome! | ||
|
|
||
| ###### Official | ||
|
|
||
| - [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse | ||
| - [vitesse-nuxt3](https://github.com/antfu/vitesse-nuxt3) - Vitesse for Nuxt 3 | ||
| - [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge | ||
| - [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template | ||
|
|
||
| ###### Community | ||
|
|
||
| - [vitesse-ssr-template](https://github.com/frandiox/vitesse-ssr-template) by [@frandiox](https://github.com/frandiox) - Vitesse with SSR | ||
| - [vitespa](https://github.com/ctholho/vitespa) by [@ctholho](https://github.com/ctholho) - Like Vitesse but without SSG/SSR | ||
| - [vitailse](https://github.com/zynth17/vitailse) by [@zynth17](https://github.com/zynth17) - Like Vitesse but with TailwindCSS | ||
| - [vitesse-modernized-chrome-ext](https://github.com/xiaoluoboding/vitesse-modernized-chrome-ext) by [@xiaoluoboding](https://github.com/xiaoluoboding) - ⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template | ||
| - [vitesse-stackter-clean-architect](https://github.com/shamscorner/vitesse-stackter-clean-architect) by [@shamscorner](https://github.com/shamscorner) - A modular clean architecture pattern in vitesse template | ||
| - [vitesse-enterprise](https://github.com/FranciscoKloganB/vitesse-enterprise) by [@FranciscoKloganB](https://github.com/FranciscoKloganB) - Consistent coding styles regardless of team-size. | ||
| - [vitecamp](https://github.com/nekobc1998923/vitecamp) by [@nekobc1998923](https://github.com/nekobc1998923) - Like Vitesse but without SSG/SSR/File based routing, includes Element Plus | ||
| - [vitesse-lite-react](https://github.com/lxy-yz/vitesse-lite-react) by [@lxy-yz](https://github.com/lxy-yz) - vitesse-lite React fork | ||
| - [vide](https://github.com/Nico-Mayer/vide) by [@nico-mayer](https://github.com/Nico-Mayer) - Vite superlight Beginner Starter Template | ||
|
|
||
| ## Try it now! | ||
|
|
||
| > Vitesse requires Node >=14.18 | ||
| ### GitHub Template | ||
|
|
||
| [Create a repo from this template on GitHub](https://github.com/antfu/vitesse/generate). | ||
|
|
||
| ### Clone to local | ||
|
|
||
| If you prefer to do it manually with the cleaner git history | ||
|
|
||
| ```bash | ||
| npx degit antfu/vitesse my-vitesse-app | ||
| cd my-vitesse-app | ||
| pnpm i # If you don't have pnpm installed, run: npm install -g pnpm | ||
| ``` | ||
|
|
||
| ## Checklist | ||
|
|
||
| When you use this template, try follow the checklist to update your info properly | ||
|
|
||
| - [ ] Change the author name in `LICENSE` | ||
| - [ ] Change the title in `App.vue` | ||
| - [ ] Change the hostname in `vite.config.ts` | ||
| - [ ] Change the favicon in `public` | ||
| - [ ] Remove the `.github` folder which contains the funding info | ||
| - [ ] Clean up the READMEs and remove routes | ||
|
|
||
| And, enjoy :) | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Development | ||
|
|
||
| Just run and visit http://localhost:3333 | ||
|
|
||
| ```bash | ||
| pnpm dev | ||
| ``` | ||
|
|
||
| ### Build | ||
|
|
||
| To build the App, run | ||
|
|
||
| ```bash | ||
| pnpm build | ||
| ``` | ||
|
|
||
| And you will see the generated file in `dist` that ready to be served. | ||
|
|
||
| ### Deploy on Netlify | ||
|
|
||
| Go to [Netlify](https://app.netlify.com/start) and select your clone, `OK` along the way, and your App will be live in a minute. | ||
|
|
||
| ### Docker Production Build | ||
|
|
||
| First, build the vitesse image by opening the terminal in the project's root directory. | ||
|
|
||
| ```bash | ||
| docker buildx build . -t vitesse:latest | ||
| ``` | ||
|
|
||
| Run the image and specify port mapping with the `-p` flag. | ||
|
|
||
| ```bash | ||
| docker run --rm -it -p 8080:80 vitesse:latest | ||
| ``` | ||
|
|
||
| ## Why | ||
|
|
||
| I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time. | ||
|
|
||
| So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintain your own forks. [(see community maintained variation forks)](#variations) | ||
| Some packages and configurations was remove to atend our needs, like: | ||
| - change from `pnpm` to `npm`, just to keep compatibility; | ||
| - clean old references from original repo; |