feat: vue template

templates/vue/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@eye-socket/eslint-config-vue"
+}

templates/vue/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

templates/vue/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

templates/vue/.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+  "stylelint.validate": [
+    "css",
+    "less",
+    "postcss",
+    "scss",
+    "html"
+  ],
+  "eslint.enable": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "markdown",
+    "json",
+    "jsonc",
+    "json5"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true,
+  }
+}

templates/vue/README.md

@@ -0,0 +1 @@
+# pkg-name

templates/vue/cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents (on, config) {
+      // implement node event listeners here
+    }
+  }
+})

templates/vue/cypress/e2e/basic.spec.ts

@@ -0,0 +1,10 @@
+context('Basic', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('basic nav', () => {
+    cy.url()
+      .should('eq', 'http://localhost:5173/')
+  })
+})

templates/vue/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

templates/vue/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

templates/vue/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

templates/vue/cypress/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "types": [
+      "cypress"
+    ]
+  },
+  "exclude": [],
+  "include": [
+    "**/*.ts"
+  ]
+}

templates/vue/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

templates/vue/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "pkg-name",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "author": {
+    "name": "眼圈发黑",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/yanquanfahei/pkg-name#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yanquanfahei/pkg-name.git"
+  },
+  "bugs": "https://github.com/yanquanfahei/pkg-name/issues",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint --fix",
+    "postinstall": "npx simple-git-hooks",
+    "test": "vitest",
+    "test:e2e": "cypress open"
+  },
+  "dependencies": {
+    "pinia": "^2.0.33",
+    "vue": "^3.2.45",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@eye-socket/eslint-config-vue": "^0.0.4",
+    "@types/node": "^18.15.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "chalk": "^5.2.0",
+    "cypress": "^12.7.0",
+    "eslint": "^8.36.0",
+    "less": "^4.1.3",
+    "lint-staged": "^13.2.0",
+    "simple-git-hooks": "^2.8.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0",
+    "vitest": "^0.29.2",
+    "vue-tsc": "^1.0.24"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged",
+    "commit-msg": "node scripts/verify-commit.js"
+  },
+  "lint-staged": {
+    "*.{ts,js,json,json5,vue}": "eslint --fix"
+  }
+}

templates/vue/scripts/verify-commit.js

@@ -0,0 +1,27 @@
+// @ts-check
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import chalk from 'chalk'
+
+const msgPath = path.resolve('.git/COMMIT_EDITMSG')
+const msg = readFileSync(msgPath, 'utf-8').trim()
+
+const commitRE = /^(feat|fix|docs|style|refactor|perf|test|build|ci|chore|release|merge)(\(.+\))?: .{1,50}/
+
+if (!commitRE.test(msg)) {
+  console.log()
+  console.error(
+    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
+      'invalid commit message format.'
+    )}\n\n` +
+      chalk.red(
+        '  Proper commit message format is required for automated changelog generation. Examples:\n\n'
+      ) +
+      `    ${chalk.green('feat(compiler): add \'comments\' option')}\n` +
+      `    ${chalk.green(
+        'fix(methods): handle events on blur (close #28)'
+      )}\n\n` +
+      chalk.red('  See .github/commit-convention.md for more details.\n')
+  )
+  process.exit(1)
+}

templates/vue/src/App.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<style scoped>
+</style>

templates/vue/src/components/HelloWorld.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useCounterStore } from '~/stores/counter'
+
+const counterStore = useCounterStore()
+const { count, doubleCount } = storeToRefs(counterStore)
+
+defineProps<{ msg: string }>()
+
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button
+      type="button"
+      @click="counterStore.increment"
+    >
+      count is {{ count }}
+      <br>
+      double count is {{ doubleCount }}
+    </button>
+  </div>
+</template>
+
+<style scoped></style>

templates/vue/src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import './style.css'
+import App from './App.vue'
+import router from '~/routes'
+
+const pinia = createPinia()
+const app = createApp(App)
+
+app.use(pinia)
+app.use(router)
+app.mount('#app')

templates/vue/src/pages/about/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    about
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

templates/vue/src/pages/home/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    home
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

templates/vue/src/routes/index.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: () => import('~/pages/home/index.vue')
+  },
+  {
+    path: '/about',
+    component: () => import('~/pages/about/index.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router

templates/vue/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment () {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})