├── .husky
    ├── .gitignore
    ├── commit-msg
    ├── pre-commit
    └── common.sh
├── .commitlintrc.js
├── src
    ├── layouts
    │   ├── headless.vue
    │   └── default.vue
    ├── modules
    │   ├── use-plugins.ts
    │   ├── index.ts
    │   └── global-components.ts
    ├── shims-vue.d.ts
    ├── App.vue
    ├── components
    │   ├── Global
    │   │   ├── ButtonTwo.vue
    │   │   └── ButtonOne.vue
    │   └── Navbar.vue
    ├── router
    │   └── index.ts
    ├── assets
    │   ├── vue-logo.svg
    │   ├── vite-logo.svg
    │   └── not-found.svg
    ├── pages
    │   ├── news
    │   │   └── _id.vue
    │   ├── index.vue
    │   └── about.vue
    ├── store
    │   ├── modules
    │   │   └── user.ts
    │   └── index.ts
    ├── shims-tsx.d.ts
    └── main.ts
├── .prettierrc
├── index.html
├── .gitignore
├── components.d.ts
├── tsconfig.json
├── LICENSE
├── windi.config.ts
├── .cz-config.js
├── .eslintrc.js
├── README.md
├── vite.config.ts
└── package.json


/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 | 


--------------------------------------------------------------------------------
/.commitlintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['cz'],
3 | }
4 | 


--------------------------------------------------------------------------------
/src/layouts/headless.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <router-view />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | . "$(dirname "$0")/common.sh"
4 | 
5 | yarn commitlint --edit "$1"
6 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | . "$(dirname "$0")/common.sh"
4 | 
5 | yarn lint-staged --allow-empty "$1"
6 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 90,
 3 |   "semi": false,
 4 |   "singleQuote": true,
 5 |   "tabWidth": 2,
 6 |   "trailingComma": "es5",
 7 |   "proseWrap": "always",
 8 |   "endOfLine": "auto"
 9 | }
10 | 


--------------------------------------------------------------------------------
/.husky/common.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | 
 3 | command_exists () {
 4 |   command -v "$1" >/dev/null 2>&1
 5 | }
 6 | 
 7 | # Windows 10, Git Bash and Yarn workaround
 8 | if command_exists winpty && test -t 1; then
 9 |   exec < /dev/tty
10 | fi
11 | 


--------------------------------------------------------------------------------
/src/modules/use-plugins.ts:
--------------------------------------------------------------------------------
1 | import { VueConstructor } from 'vue'
2 | import * as ElementUI from 'element-ui'
3 | import 'element-ui/lib/theme-chalk/index.css'
4 | import 'element-ui/lib/theme-chalk/display.css'
5 | 
6 | export default (app: VueConstructor) => {
7 |   app.use(ElementUI)
8 | }
9 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.vue' {
 2 |   import Vue from 'vue'
 3 |   export default Vue
 4 | }
 5 | 
 6 | declare module '@vue/runtime-dom' {
 7 |   export * from '@vue/runtime-dom/dist/runtime-dom'
 8 |   export { defineComponent, PropType } from '@vue/composition-api'
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <main>
 4 |       <RouterView />
 5 |     </main>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { defineComponent } from '@vue/composition-api'
11 | export default defineComponent({
12 |   name: 'App',
13 | })
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/components/Global/ButtonTwo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-button type="info">
 3 |     <slot />
 4 |   </el-button>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import { defineComponent } from '@vue/composition-api'
 9 | 
10 | export default defineComponent({
11 |   name: 'ButtonTwo',
12 | })
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/components/Global/ButtonOne.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-button type="primary">
 3 |     <slot />
 4 |   </el-button>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import { defineComponent } from '@vue/composition-api'
 9 | 
10 | export default defineComponent({
11 |   name: 'ButtonOne',
12 |   setup() {},
13 | })
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <NavBar />
 4 |     <router-view />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { defineComponent } from '@vue/composition-api'
10 | 
11 | export default defineComponent({
12 |   components: {
13 |     NavBar: () => import('../components/Navbar.vue'),
14 |   },
15 | })
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import { setupLayouts } from 'virtual:generated-layouts'
 4 | import generatedRoutes from 'virtual:generated-pages'
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes = setupLayouts(generatedRoutes)
 8 | 
 9 | const router = new VueRouter({
10 |   mode: 'history',
11 |   routes,
12 | })
13 | 
14 | export default router
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="/favicon.ico" />
 8 |     <title>Vite Vue2 TS</title>
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <script type="module" src="./src/main.ts"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/modules/index.ts:
--------------------------------------------------------------------------------
 1 | import { VueConstructor } from 'vue'
 2 | import { Store } from 'vuex'
 3 | import Router from 'vue-router'
 4 | import GlobalComponents from './global-components'
 5 | import UsePlugins from './use-plugins'
 6 | 
 7 | export interface ModuleProp {
 8 |   app: VueConstructor
 9 |   store: Store<unknown>
10 |   router: Router
11 | }
12 | 
13 | export default ({ app, store, router }: ModuleProp) => {
14 |   GlobalComponents(app)
15 |   UsePlugins(app)
16 | }
17 | 


--------------------------------------------------------------------------------
/src/assets/vue-logo.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | dist.zip
 5 | dist.rar
 6 | /.nuxt
 7 | .nuxt
 8 | .nuxt/axios.js
 9 | .history
10 | static/sw.js
11 | now.json
12 | mock
13 | build
14 | auto-imports.d.ts
15 | pnpm-lock.*
16 | 
17 | # local env files
18 | .env.local
19 | .env.*.local
20 | 
21 | # Log files
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # Editor directories and files
27 | .idea
28 | .yarn.lock
29 | package-lock.json
30 | yarn.lock
31 | *.suo
32 | *.ntvs*
33 | *.njsproj
34 | *.sln
35 | *.sw*
36 | 


--------------------------------------------------------------------------------
/src/modules/global-components.ts:
--------------------------------------------------------------------------------
 1 | import { VueConstructor } from 'vue'
 2 | 
 3 | interface FileModule {
 4 |   default: VueConstructor
 5 | }
 6 | 
 7 | export default (Vue: VueConstructor) => {
 8 |   // Auto import src/componenst/Global/**/*.vue
 9 |   const componentsContext = import.meta.globEager('../components/Global/**/*.vue')
10 |   Object.keys(componentsContext).forEach((key: string) => {
11 |     const componentConfig = componentsContext[key] as FileModule
12 |     const comp = componentConfig.default
13 |     Vue.component(comp.name, comp)
14 |   })
15 | }
16 | 


--------------------------------------------------------------------------------
/src/pages/news/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ButtonTwo @click.native="back"> go back </ButtonTwo>
 4 |     <el-divider />
 5 |     dynamic route
 6 |   </div>
 7 | </template>
 8 | 
 9 | <route>
10 | {
11 |   meta: {
12 |     layout: 'headless'
13 |   }
14 | }
15 | </route>
16 | 
17 | <script lang="ts">
18 | import { defineComponent } from '@vue/composition-api'
19 | import { useRouter } from 'vue2-helpers/vue-router'
20 | export default defineComponent({
21 |   setup() {
22 |     const route = useRouter()
23 |     const back = () => route.back()
24 |     return { back }
25 |   },
26 | })
27 | </script>
28 | 


--------------------------------------------------------------------------------
/src/store/modules/user.ts:
--------------------------------------------------------------------------------
 1 | interface IUserProp {
 2 |   name: string
 3 |   age: number
 4 | }
 5 | 
 6 | interface IState {
 7 |   user: IUserProp
 8 | }
 9 | 
10 | const state = {
11 |   user: {
12 |     name: 'vite',
13 |     age: 24,
14 |   },
15 | }
16 | 
17 | const getters = {
18 |   userName(state: IState) {
19 |     return state.user.name
20 |   },
21 | }
22 | 
23 | const mutations = {
24 |   SET_USER(state: IState, value: IUserProp) {
25 |     state.user = value
26 |   },
27 | }
28 | 
29 | const actions = {}
30 | 
31 | export default {
32 |   state,
33 |   getters,
34 |   actions,
35 |   mutations,
36 | }
37 | 


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-unused-vars */
 2 | import Vue, { VNode } from 'vue'
 3 | 
 4 | declare global {
 5 |   namespace JSX {
 6 |     // tslint:disable no-empty-interface
 7 |     interface Element extends VNode {}
 8 |     // tslint:disable no-empty-interface
 9 |     interface ElementClass extends Vue {}
10 |     interface IntrinsicElements {
11 |       [elem: string]: any
12 |     }
13 |   }
14 | }
15 | 
16 | declare global {
17 |   interface Window {
18 |     Protocol: any
19 |   }
20 |   interface ImportMeta {
21 |     env: Record<string, unknown>
22 |     globEager<T = unknown>(globPath: string): Record<string, T>
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="m-10">
 3 |     <h1>Vite ⚡ - Vue2 - typescript starter template</h1>
 4 |     <p>
 5 |       This starter template will help you to easily create a Vue2 application bundled by
 6 |       the lightning fast build tool called Vite.
 7 |     </p>
 8 |     <p>
 9 |       <el-tag>typescript support</el-tag>
10 |       <el-tag>auto routing</el-tag>
11 |       <el-tag>auto store</el-tag>
12 |       <el-tag>global component auto import</el-tag>
13 |       <el-tag>commit lint</el-tag>
14 |       <el-tag>vueuse</el-tag>
15 |       and
16 |       <el-tag>vue composition-api</el-tag> for Vue2.
17 |     </p>
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VCA, { createApp, h } from '@vue/composition-api'
 3 | import router from './router'
 4 | import AddModules from './modules/index'
 5 | import store from './store'
 6 | import App from './App.vue'
 7 | 
 8 | // windicss layers
 9 | import 'virtual:windi-base.css'
10 | import 'virtual:windi-components.css'
11 | // windicss utilities should be the last style import
12 | import 'virtual:windi-utilities.css'
13 | // windicss devtools support (dev only)
14 | import 'virtual:windi-devtools'
15 | 
16 | Vue.use(VCA)
17 | 
18 | AddModules({ app: Vue, store, router })
19 | 
20 | Vue.config.productionTip = false
21 | 
22 | const app = createApp({
23 |   router,
24 |   store,
25 |   render: () => h(App),
26 | })
27 | 
28 | app.mount('#app')
29 | 


--------------------------------------------------------------------------------
/src/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <div class="m-10">
 4 |       <div>
 5 |         <h1>About: Vite ⚡ - Vue 2 starter template</h1>
 6 |         <p class="mb-8 leading-relaxed dark:text-gray-300">
 7 |           This starter template will help you to easily create a Vue2 application bundled
 8 |           by the lightning fast build tool called Vite. Besides Vite this template also
 9 |           provides typescript support, auto-route, auto store, vueuse and the vue
10 |           composition-api for Vue2.
11 |         </p>
12 |         <div class="flex justify-center">
13 |           <a href="https://github.com/byoungd/vite-vue2-typescript" target="_blank">
14 |             <button>GitHub</button>
15 |           </a>
16 |         </div>
17 |       </div>
18 |     </div>
19 |   </section>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex, { ModuleTree, Module } from 'vuex'
 3 | 
 4 | function getModules() {
 5 |   const components = import.meta.globEager('./modules/*.ts')
 6 |   return components
 7 | }
 8 | 
 9 | interface FileModule {
10 |   default: object
11 | }
12 | 
13 | const requireModules = getModules()
14 | const modules: ModuleTree<Module<unknown, unknown>> = {}
15 | Object.keys(requireModules).forEach((key: string) => {
16 |   const moduleName = key.replace(/^\.\/(.*)\.\w+$/, '$1')
17 |   const module = requireModules[key] as FileModule
18 |   const storeModule = module.default || module
19 |   modules[moduleName] = { ...storeModule, namespaced: true }
20 | })
21 | 
22 | Vue.use(Vuex)
23 | 
24 | const store = new Vuex.Store({
25 |   modules: {
26 |     ...modules,
27 |   },
28 | })
29 | 
30 | export default store
31 | 


--------------------------------------------------------------------------------
/components.d.ts:
--------------------------------------------------------------------------------
 1 | // generated by unplugin-vue-components
 2 | // We suggest you to commit this file into source control
 3 | // Read more: https://github.com/vuejs/vue-next/pull/3399
 4 | 
 5 | declare module 'vue' {
 6 |   export interface GlobalComponents {
 7 |     ButtonOne: typeof import('./src/components/Global/ButtonOne.vue')['default']
 8 |     ButtonTwo: typeof import('./src/components/Global/ButtonTwo.vue')['default']
 9 |     ElButton: typeof import('element-ui/lib/button')['default']
10 |     ElDivider: typeof import('element-ui/lib/divider')['default']
11 |     ElMenu: typeof import('element-ui/lib/menu')['default']
12 |     ElMenuItem: typeof import('element-ui/lib/menu-item')['default']
13 |     ElTag: typeof import('element-ui/lib/tag')['default']
14 |     Navbar: typeof import('./src/components/Navbar.vue')['default']
15 |   }
16 | }
17 | 
18 | export {}
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "sourceMap": true,
14 |     "baseUrl": ".",
15 |     "types": [
16 |       "vite-plugin-vue-layouts/client",
17 |       "vite-plugin-pages/client",
18 |       "vite/client",
19 |       "unplugin-vue2-script-setup/types"
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src*"]
23 |     },
24 |     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
25 |   },
26 |   "include": ["**/*.ts", "**/*.tsx", "**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
27 |   "exclude": ["node_modules", "mock", "build", "dist"]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <el-menu
 4 |       :default-active="activeIndex"
 5 |       class="el-menu-demo"
 6 |       mode="horizontal"
 7 |       @select="handleSelect"
 8 |     >
 9 |       <el-menu-item index="0"> home </el-menu-item>
10 |       <el-menu-item index="1"> about </el-menu-item>
11 |       <el-menu-item index="2"> news </el-menu-item>
12 |     </el-menu>
13 |   </header>
14 | </template>
15 | 
16 | <script lang="ts">
17 | import { defineComponent, ref } from '@vue/composition-api'
18 | import { useRouter } from 'vue2-helpers/vue-router'
19 | export default defineComponent({
20 |   setup() {
21 |     const route = useRouter()
22 |     const activeIndex = ref('0')
23 | 
24 |     const handleSelect = (key: string) => {
25 |       const routes = ['/', '/about', '/news/1']
26 |       activeIndex.value = key
27 |       const idx = Number(key)
28 |       const path = routes[idx]
29 |       route.push(path)
30 |     }
31 |     return { activeIndex, handleSelect }
32 |   },
33 | })
34 | </script>
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 han
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/windi.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'windicss/helpers'
 2 | import colors from 'windicss/colors'
 3 | import typography from 'windicss/plugin/typography'
 4 | 
 5 | export default defineConfig({
 6 |   darkMode: 'class',
 7 |   // https://windicss.org/posts/v30.html#attributify-mode
 8 |   attributify: true,
 9 | 
10 |   plugins: [typography()],
11 |   theme: {
12 |     extend: {
13 |       typography: {
14 |         DEFAULT: {
15 |           css: {
16 |             maxWidth: '65ch',
17 |             color: 'inherit',
18 |             a: {
19 |               color: 'inherit',
20 |               opacity: 0.75,
21 |               fontWeight: '500',
22 |               textDecoration: 'underline',
23 |               '&:hover': {
24 |                 opacity: 1,
25 |                 color: colors.teal[600],
26 |               },
27 |             },
28 |             b: { color: 'inherit' },
29 |             strong: { color: 'inherit' },
30 |             em: { color: 'inherit' },
31 |             h1: { color: 'inherit' },
32 |             h2: { color: 'inherit' },
33 |             h3: { color: 'inherit' },
34 |             h4: { color: 'inherit' },
35 |             code: { color: 'inherit' },
36 |           },
37 |         },
38 |       },
39 |     },
40 |   },
41 | })
42 | 


--------------------------------------------------------------------------------
/.cz-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   types: [
 3 |     { value: 'init', name: 'init:     初始提交' },
 4 |     { value: 'feat', name: 'feat:     增加新功能' },
 5 |     { value: 'fix', name: 'fix:      修复bug' },
 6 |     { value: 'ui', name: 'ui:       更新UI' },
 7 |     { value: 'refactor', name: 'refactor: 代码重构' },
 8 |     { value: 'release', name: 'release:  发布' },
 9 |     { value: 'deploy', name: 'deploy:   部署' },
10 |     { value: 'docs', name: 'docs:     修改文档' },
11 |     { value: 'test', name: 'test:     增删测试' },
12 |     { value: 'chore', name: 'chore:    更改配置文件' },
13 |     { value: 'style', name: 'style:    样式修改不影响逻辑' },
14 |     { value: 'revert', name: 'revert:   版本回退' },
15 |     { value: 'add', name: 'add:      添加依赖' },
16 |     { value: 'minus', name: 'minus:    版本回退' },
17 |     { value: 'del', name: 'del:      删除代码/文件' },
18 |   ],
19 |   scopes: [],
20 |   messages: {
21 |     type: '选择更改类型:\n',
22 |     scope: '更改的范围:\n',
23 |     // 如果allowcustomscopes为true，则使用
24 |     // customScope: 'Denote the SCOPE of this change:',
25 |     subject: '简短描述:\n',
26 |     body: '详细描述. 使用"|"换行:\n',
27 |     breaking: 'Breaking Changes列表:\n',
28 |     footer: '关闭的issues列表. E.g.: #31, #34:\n',
29 |     confirmCommit: '确认提交?',
30 |   },
31 |   allowCustomScopes: true,
32 |   allowBreakingChanges: ['feat', 'fix'],
33 | }
34 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |     browser: true,
 6 |   },
 7 |   extends: [
 8 |     'eslint:recommended',
 9 |     'plugin:vue/recommended',
10 |     '@vue/typescript/recommended',
11 |     '@vue/prettier/@typescript-eslint',
12 |     'prettier',
13 |   ],
14 |   parserOptions: {
15 |     ecmaVersion: 2020,
16 |   },
17 |   plugins: ['vue', 'prettier'],
18 |   // add your custom rules here
19 |   rules: {
20 |     'prettier/prettier': [
21 |       'error',
22 |       {},
23 |       {
24 |         usePrettierrc: true,
25 |       },
26 |     ],
27 |     'prefer-const': 2,
28 |     'no-console': 'off',
29 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
30 |     'no-tabs': 'off',
31 |     'space-before-function-paren': 'off',
32 |     'no-unused-vars': ['error', { vars: 'all', args: 'none', ignoreRestSiblings: false }],
33 |     'vue/order-in-components': 'off',
34 |     'vue/no-v-html': 'off',
35 |     'vue/component-definition-name-casing': 'off',
36 |     'vue/attribute-hyphenation': 'off',
37 |     '@typescript-eslint/explicit-module-boundary-types': 'off',
38 |     '@typescript-eslint/ban-ts-comment': 'off',
39 |     '@typescript-eslint/no-empty-function': 'off',
40 |     '@typescript-eslint/no-this-alias': 'off',
41 |     '@typescript-eslint/no-unused-vars': 'off',
42 |     '@typescript-eslint/ban-types': 'off',
43 |   },
44 | }
45 | 


--------------------------------------------------------------------------------
/src/assets/vite-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
 3 | <path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#41D1FF"/>
 7 | <stop offset="1" stop-color="#BD34FE"/>
 8 | </linearGradient>
 9 | <linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
10 | <stop stop-color="#FFEA83"/>
11 | <stop offset="0.0833333" stop-color="#FFDD35"/>
12 | <stop offset="1" stop-color="#FFA800"/>
13 | </linearGradient>
14 | </defs>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vite-vue2-typescript
 2 | 
 3 | Vite Vue2 typescript starter template using composition-api with Script Setup!
 4 | 
 5 | ## Features
 6 | 
 7 | - 🗂 [File based routing](./src/pages)
 8 | 
 9 | - 📦 [Global Components auto importing](./src/components/Global)
10 | 
11 | - 📑 [Layout system](./src/layouts)
12 | 
13 | - 😃 [Script Setup](https://github.com/antfu/vue2-script-setup-transform)
14 | 
15 | - 🎨 [Commitlint](./husky)
16 | 
17 | - 🔥 TypeScript, of course
18 | 
19 | ### Plugins
20 | 
21 | - [`vue/compositon-api`](https://github.com/vuejs/composition-api) Composition API plugin for Vue 2
22 | 
23 | - [`VueUse`](https://github.com/antfu/vueuse) - collection of useful composition APIs
24 | 
25 | - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - file system based
26 |   routing
27 | 
28 | - [`vite-plugin-vue-layouts`](https://github.com/anncwb/vite-plugin-style-import) Vue layout plugin for Vite
29 | 
30 | - [`vite-plugin-style-import`](https://github.com/anncwb/vite-plugin-style-import) A plug-in
31 |   that imports component library styles on demand
32 | 
33 | - [`vue2-helper`](https://github.com/ambit-tsai/vue2-helpers) - A util package to use Vue 2 with Composition API easily
34 | 
35 | 
36 | ## Usage
37 | 
38 | ### Development
39 | 
40 | Just run and visit http://localhost:3003
41 | 
42 | ```bash
43 | yarn dev
44 | ```
45 | 
46 | ## Commit lint
47 | 
48 | This repo use `commitizen` , if run `git cz` has no effect, you might need to install commitizen global as `yarn add global commitizen` or `npm i -g commitizen`
49 | 
50 | then use `git cz` to add commit information.
51 | 
52 | At lint staged it will trigger eslint auto fix and use `pretty-quick` to format files.
53 | 
54 | And enjoy!
55 | 
56 | ### Thanks
57 | 
58 | - [vitesse](https://github.com/antfu/vitesse) Opinionated Vite Starter Template
59 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'path'
 2 | import { defineConfig } from 'vite'
 3 | import Layouts from 'vite-plugin-vue-layouts'
 4 | import Pages from 'vite-plugin-pages'
 5 | import { createVuePlugin } from 'vite-plugin-vue2'
 6 | import ScriptSetup from 'unplugin-vue2-script-setup/vite'
 7 | import Inspect from 'vite-plugin-inspect'
 8 | import OptimizationPersist from 'vite-plugin-optimize-persist'
 9 | import PkgConfig from 'vite-plugin-package-config'
10 | import Components from 'unplugin-vue-components/vite'
11 | import { ElementUiResolver } from 'unplugin-vue-components/resolvers'
12 | import WindiCSS from 'vite-plugin-windicss'
13 | 
14 | const rollupOptions = {}
15 | 
16 | const alias = [
17 |   { find: /^~/, replacement: '' },
18 |   { find: 'vue', replacement: 'vue/dist/vue.esm' },
19 |   {
20 |     find: '@',
21 |     replacement: resolve(__dirname, ''),
22 |   },
23 | ]
24 | 
25 | const proxy = {}
26 | 
27 | const define = {
28 |   'process.env.NODE_ENV': '"development"',
29 |   'precess.env.SITE_NAME': '"Vite Vue2 App"',
30 | }
31 | 
32 | const esbuild = {}
33 | 
34 | // @see https://cn.vitejs.dev/config/
35 | export default defineConfig({
36 |   base: './', // index.html文件所在位置
37 |   root: './', // js导入的资源路径
38 |   publicDir: 'static',
39 |   resolve: {
40 |     alias,
41 |     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.styl'],
42 |     dedupe: ['vue-demi'],
43 |   },
44 |   define: define,
45 |   server: {
46 |     // 代理
47 |     proxy,
48 | 
49 |     port: 3003,
50 |     fs: {
51 |       strict: false,
52 |     },
53 |   },
54 |   build: {
55 |     target: 'es2015',
56 |     minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
57 |     manifest: false, // 是否产出maifest.json
58 |     sourcemap: false, // 是否产出soucemap.json
59 |     outDir: 'build', // 产出目录
60 |     rollupOptions,
61 |   },
62 |   esbuild,
63 |   plugins: [
64 |     createVuePlugin({
65 |       jsx: true,
66 |       vueTemplateOptions: {
67 |         compilerOptions: {
68 |           whitespace: 'condense',
69 |         },
70 |       },
71 |     }),
72 |     PkgConfig(),
73 |     OptimizationPersist(),
74 |     Components({
75 |       resolvers: [ElementUiResolver()],
76 |       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
77 |       dts: true,
78 |     }),
79 |     Inspect(),
80 |     ScriptSetup(),
81 |     Layouts({
82 |       layoutsDir: 'src/layouts',
83 |     }),
84 |     // https://github.com/hannoeru/vite-plugin-pages
85 |     Pages({
86 |       pagesDir: [{ dir: 'src/pages', baseRoute: '' }],
87 |       exclude: ['**/components/**.vue'],
88 |       extensions: ['vue'],
89 |       syncIndex: false,
90 |       replaceSquareBrackets: true,
91 |       nuxtStyle: true,
92 |     }),
93 |     WindiCSS(),
94 |   ],
95 |   css: {
96 |     preprocessorOptions: {},
97 |   },
98 | })
99 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite-vue2-typescript",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "postinstall": "husky install",
 6 |     "dev": "vite",
 7 |     "build": "vite build",
 8 |     "lint": "eslint './src/**/*.{js,ts,tsx,vue,md}'",
 9 |     "lint:fix": "eslint './src/**/*.{js,ts,tsx,vue,md}' --fix",
10 |     "format": "pretty-quick --staged --ignore-path .gitignore"
11 |   },
12 |   "dependencies": {
13 |     "@vue/composition-api": "^1.0.0-rc.8",
14 |     "@vueuse/core": "^4.9.1",
15 |     "core-js": "^3.11.1",
16 |     "element-ui": "^2.15.5",
17 |     "vue": "^2.6.12",
18 |     "vue-router": "^3.5.1",
19 |     "vue2-helpers": "^1.1.3",
20 |     "vuex": "^3.6.2"
21 |   },
22 |   "devDependencies": {
23 |     "@commitlint/cli": "^13.1.0",
24 |     "@commitlint/config-conventional": "^13.1.0",
25 |     "@types/node": "^16.7.10",
26 |     "@typescript-eslint/eslint-plugin": "^4.22.0",
27 |     "@typescript-eslint/parser": "^4.22.0",
28 |     "@vue/compiler-sfc": "^3.2.4",
29 |     "@vue/eslint-config-prettier": "^6.0.0",
30 |     "@vue/eslint-config-typescript": "^7.0.0",
31 |     "@vue/runtime-dom": "^3.2.4",
32 |     "commitlint-config-cz": "^0.13.2",
33 |     "cz-customizable": "^6.3.0",
34 |     "eslint": "^7.25.0",
35 |     "eslint-config-prettier": "^8.3.0",
36 |     "eslint-plugin-prettier": "^3.4.0",
37 |     "eslint-plugin-vue": "^7.9.0",
38 |     "husky": "^6.0.0",
39 |     "lint-staged": "^11.1.2",
40 |     "prettier": "^2.2.1",
41 |     "pretty-quick": "^3.1.1",
42 |     "typescript": "^4.3.5",
43 |     "unplugin-vue-components": "^0.14.11",
44 |     "unplugin-vue2-script-setup": "^0.4.2",
45 |     "vite": "^2.2.3",
46 |     "vite-plugin-inspect": "^0.2.2",
47 |     "vite-plugin-optimize-persist": "^0.0.5",
48 |     "vite-plugin-package-config": "^0.0.3",
49 |     "vite-plugin-pages": "^0.17.4",
50 |     "vite-plugin-style-import": "^1.1.1",
51 |     "vite-plugin-vue-layouts": "^0.3.1",
52 |     "vite-plugin-vue2": "^1.4.4",
53 |     "vite-plugin-windicss": "^1.2.7",
54 |     "vue-demi": "^0.7.5",
55 |     "vue-template-compiler": "^2.6.14",
56 |     "windicss": "^3.1.7"
57 |   },
58 |   "lint-staged": {
59 |     "**/**.{js,json,vue,ts}": [
60 |       "eslint --fix --ignore-path .gitignore",
61 |       "pretty-quick --staged --ignore-path .gitignore"
62 |     ]
63 |   },
64 |   "husky": {
65 |     "hooks": {
66 |       "pre-commit": "lint-staged"
67 |     }
68 |   },
69 |   "config": {
70 |     "commitizen": {
71 |       "path": "node_modules/cz-customizable"
72 |     },
73 |     "cz-customizable": {
74 |       "config": "./.cz-config.js"
75 |     }
76 |   },
77 |   "vite": {
78 |     "optimizeDeps": {
79 |       "include": [
80 |         "@vue/composition-api",
81 |         "@vue/runtime-dom",
82 |         "element-ui",
83 |         "element-ui/lib/button",
84 |         "element-ui/lib/divider",
85 |         "element-ui/lib/menu",
86 |         "element-ui/lib/menu-item",
87 |         "element-ui/lib/tag",
88 |         "vue",
89 |         "vue-router",
90 |         "vue2-helpers/vue-router",
91 |         "vuex"
92 |       ]
93 |     }
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/src/assets/not-found.svg:
--------------------------------------------------------------------------------
1 | <svg id="e3553d74-0590-491b-b28e-952d4d1eac83" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="672.5315" height="738.39398" viewBox="0 0 672.5315 738.39398"><path d="M730.73425,230.607c-46.62012-7.44-99.71-11.41-155-11.41-50.6001,0-99.3501,3.32-142.98,9.58.01026-.67005.02-1.34.04981-2.01a148.99943,148.99943,0,0,1,297.91015,1.82C730.72449,229.267,730.73425,229.937,730.73425,230.607Z" transform="translate(-263.73425 -80.80301)" fill="#10b981"/><g opacity="0.1"><path d="M601.28454,82.14432A149.04745,149.04745,0,0,0,432.35339,225.373c-.03027.67-.04,1.34-.0498,2.01,12.96191-1.85981,26.38476-3.4535,40.165-4.78431A149.02172,149.02172,0,0,1,601.28454,82.14432Z" transform="translate(-263.73425 -80.80301)" fill="#fff"/></g><path d="M795.91443,242.427a600.121,600.121,0,0,0-65.2002-13.84,943.3639,943.3639,0,0,0-108.73974-10.45c-15.17041-.62-30.62012-.94-46.24024-.94-12.37988,0-24.66015.2-36.77.6a973.28988,973.28988,0,0,0-106.16015,8.97,624.29224,624.29224,0,0,0-77.25,15.66c-59.21,16.37-91.81983,38.31-91.81983,61.77s32.60987,45.4,91.81983,61.77c41.64013,11.52,92.98,19.37,148.92041,22.97,23.08984,1.5,46.96,2.26,71.25976,2.26,24.37988,0,48.33008-.77,71.49024-2.27,50.90966-3.29,98.00976-10.1,137.42968-20,.21-.06.41016-.11.62012-.16,2.66016-.66,5.27979-1.35,7.87012-2.04.92969-.26,1.84961-.51,2.77-.76a.97843.97843,0,0,1,.15967-.05c.88037-.24,1.75-.49,2.62011-.73,1.74024-.5,3.46-.99,5.14991-1.5.08007-.02.1499-.04.22021-.06,1.46973-.44,2.91016-.88,4.33984-1.32,1.16993-.37,2.33008-.73,3.48-1.1q1.26051-.405,2.49024-.81c.6001-.2,1.18994-.39,1.77-.59.79-.26,1.58008-.53,2.35986-.8.33008-.11.66016-.22.98-.34.75-.25,1.48-.51,2.21-.77.79-.28,1.58008-.57,2.35987-.85.65039-.23,1.30029-.47,1.93994-.71.54-.21,1.07031-.41,1.61035-.61,1.46973-.55,2.91016-1.12006,4.33008-1.68.71-.29,1.41992-.57,2.11963-.86.68994-.28,1.39013-.57,2.07031-.86q1.67944-.70506,3.2998-1.41c.52-.24,1.0503-.47,1.56006-.68994.39014-.18.77-.35,1.16016-.53.27978-.12.56006-.25.83008-.38,1.00976-.46,2.00976-.93,2.98974-1.4q5.64039-2.7,10.52979-5.52c20.45019-11.71,31.24023-24.7,31.24023-38.2C887.73425,280.737,855.12439,258.797,795.91443,242.427Zm-.54,121.62c-41.68994,11.53-93.16992,19.38-149.26026,22.95-22.81005,1.45-46.38964,2.2-70.37988,2.2-23.91015,0-47.41015-.74-70.1499-2.19-56.18018-3.56-107.74023-11.41-149.49023-22.96-58.27-16.12-90.35987-37.37-90.35987-59.85a24.11774,24.11774,0,0,1,.74024-5.89c5.09961-20.28,36.46972-39.26,89.61963-53.96a623.80606,623.80606,0,0,1,76.66015-15.57,976.02713,976.02713,0,0,1,106.79981-9q17.88061-.585,36.18017-.58c15.41016,0,30.6499.31,45.62988.91a941.36713,941.36713,0,0,1,109.37012,10.5A598.85754,598.85754,0,0,1,795.37439,244.347c53.14014,14.7,84.5,33.67,89.60986,53.94a23.82213,23.82213,0,0,1,.75,5.91C885.73425,326.677,853.64441,347.927,795.37439,364.047Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M887.16443,305.107c0,13.36005-11.01026,26-30.67041,37.29-3.26953,1.88-6.78955,3.72-10.52979,5.52-.98.47-1.98.94-2.98974,1.4-.27.13-.5503.26-.83008.38-.39014.18-.77.35-1.16016.53-.50976.22-1.04.45-1.56006.68994q-1.6201.705-3.2998,1.41c-.68018.29-1.38037.58-2.07031.86-.69971.29-1.40967.57-2.11963.86-1.41992.56-2.86035,1.13-4.33008,1.68-.54.2-1.07031.4-1.61035.61-.63965.24-1.28955.48-1.93994.71-.77979.28-1.56983.57-2.35987.85-.73.26-1.46.52-2.21.77-.31982.12006-.6499.23-.98.34-.77978.27-1.56982.54-2.35986.8-.58008.2-1.16992.39-1.77.59q-1.23046.40494-2.49024.81c-1.1499.37-2.31.73-3.48,1.1-1.42968.44-2.87011.88-4.33984,1.32-.07031.02-.14014.04-.22021.06-1.68995.51-3.40967,1-5.14991,1.5-.87011.24-1.73974.49-2.62011.73a.97843.97843,0,0,0-.15967.05c-.92041.25-1.84033.5-2.77.76-2.58008.68-5.21,1.37-7.87012,2.04-.21.05-.41016.1-.62012.16-38.35009,9.58-85.3999,16.56-137.46972,19.93-22.81006,1.47-46.59033,2.25-71.02,2.25-24.6499,0-48.63037-.79-71.62012-2.29-137.24023-8.95-239.37988-43.03-239.37988-83.71a25.07169,25.07169,0,0,1,1.11963-7.3c.06006.17.12011.33.19043.5,14.26953,37.48,115.54,67.77,246.93994,75.16,20.12988,1.13995,40.98,1.73,62.31982,1.73,21.43018,0,42.35987-.6,62.56983-1.74,131.29-7.42,232.46045-37.72,246.68017-75.17q.36036-.90006.62988-1.8A25.30451,25.30451,0,0,1,887.16443,305.107Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M355.40356,294.343c-16.6427,0-34.33068-3.58057-34.33068-10.2168s17.688-10.2168,34.33068-10.2168,34.33069,3.58057,34.33069,10.2168S372.04626,294.343,355.40356,294.343Zm0-18.4336c-19.053,0-32.33068,4.33057-32.33068,8.2168s13.2777,8.2168,32.33068,8.2168,32.33069-4.33057,32.33069-8.2168S374.45654,275.90939,355.40356,275.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M426.40344,341.343c-16.64258,0-34.33056-3.58057-34.33056-10.2168s17.688-10.2168,34.33056-10.2168c16.64282,0,34.33081,3.58057,34.33081,10.2168S443.04626,341.343,426.40344,341.343Zm0-18.4336c-19.05286,0-32.33056,4.33057-32.33056,8.2168s13.2777,8.2168,32.33056,8.2168,32.33081-4.33057,32.33081-8.2168S445.45642,322.90939,426.40344,322.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M795.40344,294.343c-16.64258,0-34.33056-3.58057-34.33056-10.2168s17.688-10.2168,34.33056-10.2168c16.64282,0,34.33081,3.58057,34.33081,10.2168S812.04626,294.343,795.40344,294.343Zm0-18.4336c-19.053,0-32.33056,4.33057-32.33056,8.2168s13.27758,8.2168,32.33056,8.2168,32.33081-4.33057,32.33081-8.2168S814.45642,275.90939,795.40344,275.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M724.40344,341.343c-16.64258,0-34.33056-3.58057-34.33056-10.2168s17.688-10.2168,34.33056-10.2168c16.64282,0,34.33081,3.58057,34.33081,10.2168S741.04626,341.343,724.40344,341.343Zm0-18.4336c-19.053,0-32.33056,4.33057-32.33056,8.2168s13.27758,8.2168,32.33056,8.2168,32.33081-4.33057,32.33081-8.2168S743.45642,322.90939,724.40344,322.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><path d="M575.40344,363.343c-16.64258,0-34.33056-3.58057-34.33056-10.2168s17.688-10.2168,34.33056-10.2168c16.64282,0,34.33081,3.58057,34.33081,10.2168S592.04626,363.343,575.40344,363.343Zm0-18.4336c-19.053,0-32.33056,4.33057-32.33056,8.2168s13.27758,8.2168,32.33056,8.2168,32.33081-4.33057,32.33081-8.2168S594.45642,344.90939,575.40344,344.90939Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/><circle cx="336.97785" cy="450.70425" r="42.01233" fill="#2f2e41"/><rect x="565.93651" y="563.55388" width="22.86756" height="12.76328" transform="translate(-457.82019 238.05835) rotate(-26.60099)" fill="#2f2e41"/><ellipse cx="563.82041" cy="573.74843" rx="3.98853" ry="10.63605" transform="translate(-489.27546 647.82906) rotate(-56.60122)" fill="#2f2e41"/><rect x="617.67227" y="558.50174" width="12.76328" height="22.86756" transform="translate(-428.72163 791.92555) rotate(-63.39901)" fill="#2f2e41"/><ellipse cx="637.60379" cy="573.74843" rx="10.63605" ry="3.98853" transform="translate(-474.26735 364.92328) rotate(-33.39878)" fill="#2f2e41"/><circle cx="334.03663" cy="440.42779" r="14.35864" fill="#fff"/><ellipse cx="597.86951" cy="515.08401" rx="4.76624" ry="4.8" transform="translate(-452.84172 492.81919) rotate(-45)" fill="#3f3d56"/><path d="M633.854,485.80233c.63177-15.55359-12.77314-28.7276-29.9408-29.42493s-31.59692,11.346-32.22873,26.8996,11.30191,19.08746,28.46958,19.78485S633.22214,501.35592,633.854,485.80233Z" transform="translate(-263.73425 -80.80301)" fill="#10b981"/><ellipse cx="644.38811" cy="537.56776" rx="6.59448" ry="21.00616" transform="translate(-458.4377 468.61755) rotate(-40.64516)" fill="#2f2e41"/><ellipse cx="557.15365" cy="537.56776" rx="21.00616" ry="6.59448" transform="translate(-477.37906 529.35274) rotate(-49.35484)" fill="#2f2e41"/><path d="M612.25083,548.0638a9.57244,9.57244,0,0,1-18.83533,3.42884l-.00336-.0185c-.94177-5.20214,3.08039-7.043,8.28254-7.98474S611.30912,542.86166,612.25083,548.0638Z" transform="translate(-263.73425 -80.80301)" fill="#fff"/><path d="M529.73425,576.197a2.0001,2.0001,0,0,1-2-2v-118a2,2,0,0,1,4,0v118A2.0001,2.0001,0,0,1,529.73425,576.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M499.73425,682.197a2.0001,2.0001,0,0,1-2-2v-86a2,2,0,1,1,4,0v86A2.0001,2.0001,0,0,1,499.73425,682.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M576.73425,611.197a2.0001,2.0001,0,0,1-2-2v-118a2,2,0,1,1,4,0v118A2.0001,2.0001,0,0,1,576.73425,611.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M547.73425,696.197a2.0001,2.0001,0,0,1-2-2v-48a2,2,0,1,1,4,0v48A2.0001,2.0001,0,0,1,547.73425,696.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M588.73425,450.197a2.0001,2.0001,0,0,1-2-2v-48a2,2,0,0,1,4,0v48A2.0001,2.0001,0,0,1,588.73425,450.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M488.73425,471.197a2.0001,2.0001,0,0,1-2-2v-48a2,2,0,0,1,4,0v48A2.0001,2.0001,0,0,1,488.73425,471.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M662.73425,476.197a2.0001,2.0001,0,0,1-2-2v-48a2,2,0,1,1,4,0v48A2.0001,2.0001,0,0,1,662.73425,476.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M658.73425,626.197a2.0001,2.0001,0,0,1-2-2v-58a2,2,0,1,1,4,0v58A2.0001,2.0001,0,0,1,658.73425,626.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M618.73425,677.197a2.0001,2.0001,0,0,1-2-2v-86a2,2,0,1,1,4,0v86A2.0001,2.0001,0,0,1,618.73425,677.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><path d="M626.73425,530.197a2.0001,2.0001,0,0,1-2-2v-118a2,2,0,1,1,4,0v118A2.0001,2.0001,0,0,1,626.73425,530.197Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><ellipse cx="858.10361" cy="764.78333" rx="6.76007" ry="21.53369" transform="translate(-554.53185 648.46489) rotate(-39.93837)" fill="#2f2e41"/><circle cx="812.2965" cy="757.30544" r="43.06733" transform="translate(-426.75153 1207.63346) rotate(-71.56505)" fill="#2f2e41"/><rect x="553.7073" y="710.30199" width="13.08374" height="23.44171" fill="#2f2e41"/><rect x="527.53982" y="710.30199" width="13.08374" height="23.44171" fill="#2f2e41"/><ellipse cx="555.8879" cy="734.01629" rx="10.90314" ry="4.08868" fill="#2f2e41"/><ellipse cx="529.72042" cy="733.47115" rx="10.90314" ry="4.08868" fill="#2f2e41"/><path d="M798.77365,703.16853c3.84557-15.487,20.82057-24.60076,37.91471-20.35617s27.83428,20.24028,23.98871,35.72729-16.60394,15.537-33.69809,11.29233S794.92806,718.65557,798.77365,703.16853Z" transform="translate(-263.73425 -80.80301)" fill="#ccc"/><ellipse cx="763.7883" cy="737.32189" rx="6.76007" ry="21.53369" transform="translate(-493.44249 1030.65892) rotate(-64.62574)" fill="#2f2e41"/><circle cx="542.12366" cy="667.41487" r="14.35864" fill="#fff"/><circle cx="536.22229" cy="662.26808" r="4.78622" fill="#3f3d56"/><circle cx="542" cy="697.39398" r="6" fill="#fff"/><path d="M935.26575,819.197h-236a1,1,0,0,1,0-2h236a1,1,0,0,1,0,2Z" transform="translate(-263.73425 -80.80301)" fill="#3f3d56"/></svg>


--------------------------------------------------------------------------------