From 5022d6252f49e0bd9f027810d14d6a3d89b6b02d Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Thu, 20 Aug 2020 16:04:00 +0800 Subject: [PATCH] feat: add vite-plugin-components --- README.md | 14 +++++++------- package.json | 6 ++---- pnpm-lock.yaml | 8 ++++++++ src/components/README.md | 14 ++++++++++++++ src/components/index.ts | 12 ------------ src/main.ts | 4 ++-- src/pages/README.md | 4 ++++ vite.config.js | 7 +++---- 8 files changed, 40 insertions(+), 29 deletions(-) create mode 100644 src/components/README.md delete mode 100644 src/components/index.ts create mode 100644 src/pages/README.md diff --git a/README.md b/README.md index 2473ad3..c700d37 100644 --- a/README.md +++ b/README.md @@ -20,11 +20,13 @@ - ⚑️ Vue3, Vite, pnpm, ESBuild - born with fastness -- πŸ—‚ File based routing +- πŸ—‚ [File based routing](./src/pages) + +- πŸ“² [Components auto importing](./src/components) - 🎨 TailwindCSS with dark mode out-of-box -- πŸ˜ƒ Use icons from any icon sets, with no compromise +- πŸ˜ƒ [Use icons from any icon sets, with no compromise](./src/components) - 🌍 i18n ready @@ -46,13 +48,11 @@ - [Iconify](https://iconify.design) - use icons from any icon sets [πŸ”IcΓ΄nes](https://icones.netlify.app/) - [PurgeIcons](https://github.com/antfu/purge-icons) - bundles only the icons that you use -### Router +### Plugins - [Vue Router](https://github.com/vuejs/vue-router) -- [Voie](https://github.com/vamplate/vite-plugin-voie) - file system based routing - -### Utils - + - [vite-plugin-voie](https://github.com/vamplate/vite-plugin-voie) - file system based routing +- [vite-plugin-components](https://github.com/antfu/vite-plugin-components) - components auto import - [vue-i18n](https://github.com/intlify/vue-i18n-next) - internationalization - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs diff --git a/package.json b/package.json index f397808..901e49a 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "vue-router": "^4.0.0-beta.6" }, "devDependencies": { + "vite-plugin-components": "^0.1.0", "@antfu/eslint-config-vue": "^0.3.2", "@iconify/json": "^1.1.208", "@purge-icons/generated": "^0.4.0", @@ -30,9 +31,6 @@ "voie-pages": "^0.3.0" }, "eslintConfig": { - "extends": "@antfu/eslint-config-vue", - "rules": { - "import/no-absolute-path": "off" - } + "extends": "@antfu/eslint-config-vue" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e2d0ed6..c3ad005 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,6 +16,7 @@ devDependencies: tailwindcss-dark-mode: 1.1.6 typescript: 3.9.7 vite: 1.0.0-rc.4 + vite-plugin-components: 0.1.0 vite-plugin-purge-icons: 0.4.0 vite-plugin-voie: 0.3.0_41db3258d2e6c5068f70770d66f3c3ce voie-pages: 0.3.0_vue@3.0.0-rc.5 @@ -3869,6 +3870,12 @@ packages: node: '>= 0.8' resolution: integrity: sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= + /vite-plugin-components/0.1.0: + dependencies: + fast-glob: 3.2.4 + dev: true + resolution: + integrity: sha512-IhaBGcdvKcbs0dewTzNjM+tk5Y7VswHfM3pDWD6lEQLt//1nmEcOx+bRSFpfWtKg6ooIPuquo3oK47sQzDn8Wg== /vite-plugin-purge-icons/0.4.0: dependencies: '@purge-icons/core': 0.4.0 @@ -4084,6 +4091,7 @@ specifiers: tailwindcss-dark-mode: ^1.1.6 typescript: ^3.9.7 vite: ^1.0.0-rc.4 + vite-plugin-components: ^0.1.0 vite-plugin-purge-icons: ^0.4.0 vite-plugin-voie: ^0.3.0 voie-pages: ^0.3.0 diff --git a/src/components/README.md b/src/components/README.md new file mode 100644 index 0000000..bbdb7f3 --- /dev/null +++ b/src/components/README.md @@ -0,0 +1,14 @@ +## Components + +Components in this dir will auto registered as global components by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components). + + +### `Icon.vue` + +You can uses Icons with the following syntax + +```html + +``` + +The icon id follows the rules in [Iconify](https://iconify.design/) which you can use any icons from the supported icon sets. It will only bundles the icons you use, check out [PurgeIcons](https://github.com/antfu/purge-icons) for more details. diff --git a/src/components/index.ts b/src/components/index.ts deleted file mode 100644 index 013f349..0000000 --- a/src/components/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Plugin } from 'vue' -import Modal from './Modal.vue' -import Icon from './Icon.vue' -import Footer from './Footer.vue' - -export const registerComponents: Plugin = { - install(app) { - app.component('Modal', Modal) - app.component('Icon', Icon) - app.component('Footer', Footer) - }, -} diff --git a/src/main.ts b/src/main.ts index 674cdf9..0e5cbea 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,10 +5,10 @@ import { createI18n } from 'vue-i18n' // import routes genereted by Voie import routes from 'voie-pages' +import components from 'vite-plugin-components' // import icons data genereted by PurgeIcons import '@purge-icons/generated' -import { registerComponents } from './components' import App from './App.vue' import { messages } from './messages' @@ -25,6 +25,6 @@ const i18n = createI18n({ app.use(i18n) app.use(router) -app.use(registerComponents) +app.use(components) app.mount('#app') diff --git a/src/pages/README.md b/src/pages/README.md new file mode 100644 index 0000000..4b178eb --- /dev/null +++ b/src/pages/README.md @@ -0,0 +1,4 @@ +## File Based Routing + +Routes will auto generated for Vue files in this dir with the same file structure. +Check out [`vite-plugin-voie`](https://github.com/vamplate/vite-plugin-voie) for more details. diff --git a/vite.config.js b/vite.config.js index 2cd0b43..4667799 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,12 +1,11 @@ import Voie from 'vite-plugin-voie' import PurgeIcons from 'vite-plugin-purge-icons' +import { VitePluginComponents } from 'vite-plugin-components' export default { plugins: [ - Voie({ - pagesDir: 'src/pages', - extensions: ['vue', 'ts'], - }), + Voie(), + VitePluginComponents(), PurgeIcons(), ], }