init vue

.eslintrc.cjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

.gitignore

@@ -4,127 +4,27 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 lerna-debug.log*
-.pnpm-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
+node_modules
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+.DS_Store
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
 dist
+dist-ssr
+coverage
+*.local
 
-# Gatsby files
+/cypress/videos/
-.cache/
+/cypress/screenshots/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
 
-# vuepress build output
+# Editor directories and files
-.vuepress/dist
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-# vuepress v2.x temp and cache directory
+*.tsbuildinfo
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

Project-1/.gitignore

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

Project-1/.vscode/extensions.json

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

Project-1/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

Project-1/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "project-1",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build --force"
-  },
-  "dependencies": {
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
-  },
-  "devDependencies": {
-    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.12.5",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/tsconfig": "^0.5.1",
-    "npm-run-all2": "^6.1.2",
-    "typescript": "~5.4.0",
-    "vite": "^5.2.8",
-    "vue-tsc": "^2.0.11"
-  }
-}

Project-1/src/views/ButtonCounter.vue

@@ -1,91 +0,0 @@
-<script>
-let id = 0
-// 获取今日的日期信息
-const date = new Date()
-const year = date.getFullYear()
-// 这个月几月 0 - 11
-const month = date.getMonth() + 1
-// 今天是第几天
-const nowDay = date.getDate()
-// 星期几
-const week = date.getDay()
-// 今天的日期
-const nowDate = `${year}年${month}月${nowDay}日`
-const daysInMonth = new Date(year, month, 0).getDate()
-
-export default {
-    data() {
-        return {
-            nowDate,
-            calendarElement: "calendar-element",
-            calendar: "calendar",
-            calendarCurrentDate: "calendar-current-date",
-            calendarWeek: "calendar-week",
-            calendarWeekDay: "calendar-week-day",
-            calendarAllDay: "calendar-all-day",
-            calendarDay: "calendar-day",
-            calendarDayRow: "calendar-day-row",
-            weeks: [
-                { id: id++, text: "Sun" },
-                { id: id++, text: "Mon" },
-                { id: id++, text: "Tue" },
-                { id: id++, text: "Wed" },
-                { id: id++, text: "Thu" },
-                { id: id++, text: "Fri" },
-                { id: id++, text: "Sat" },
-            ],
-            daysInMonth,
-        }
-    }
-}
-</script>
-
-<template>
-    <div :class="calendarElement">
-        <div :class="calendar">
-            <div :class="calendarCurrentDate">{{ nowDate }}</div>
-            <div :class="calendarWeek">
-                <div v-for="week in weeks" :class="calendarWeekDay" :key="week.id">{{ week.text }}</div>
-            </div>
-            <div :class="calendarAllDay">
-                <div v-for="day in daysInMonth" :class="calendarDay">
-                    <div :class="calendarDayRow">{{ day }}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style>
-.calendar {
-    width: 280px;
-    margin: 10px auto;
-}
-
-.calendar-week,
-.calendar-all-day {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.calendar-week {
-    border-bottom: 1px solid saddlebrown;
-}
-
-.calendar-current-date,
-.calendar-week-day,
-.calendar-all-day {
-    text-align: center;
-}
-
-
-.calendar-week-day {
-    height: 48px;
-    line-height: 48px;
-    width: calc(100%/7);
-}
-
-.calendar-day {
-    width: calc(100%/7);
-}
-</style>

Project-1/tsconfig.app.json

@@ -1,14 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

Project-1/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ]
-}

Project-1/tsconfig.node.json

@@ -1,19 +0,0 @@
-{
-  "extends": "@tsconfig/node20/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*"
-  ],
-  "compilerOptions": {
-    "composite": true,
-    "noEmit": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "types": ["node"]
-  }
-}

README.md

@@ -1,4 +1,4 @@
-# Project-1
+# vue-project
 
 This template should help get you started developing with Vue 3 in Vite.
 
@@ -6,10 +6,6 @@ This template should help get you started developing with Vue 3 in Vite.
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
 ## Customize configuration
 
 See [Vite Configuration Reference](https://vitejs.dev/config/).
@@ -26,8 +22,14 @@ npm install
 npm run dev
 ```
 
-### Type-Check, Compile and Minify for Production
+### Compile and Minify for Production
 
 ```sh
 npm run build
 ```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vue-project",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "pinia": "^2.1.7",
+    "vue": "^3.4.29",
+    "vue-router": "^4.3.3"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "prettier": "^3.2.5",
+    "vite": "^5.3.1",
+    "vite-plugin-vue-devtools": "^7.3.1"
+  }
+}

src/App.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
 </script>

src/components/HelloWorld.vue

@@ -1,7 +1,10 @@
-<script setup lang="ts">
+<script setup>
-defineProps<{
+defineProps({
-  msg: string
+  msg: {
-}>()
+    type: String,
+    required: true
+  }
+})
 </script>
 
 <template>
@@ -10,7 +13,7 @@ defineProps<{
     <h3>
       You’ve successfully created a project with
       <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
     </h3>
   </div>
 </template>

src/components/TheWelcome.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'

src/components/WelcomeItem.vue

@@ -30,7 +30,6 @@ i {
   place-content: center;
   width: 32px;
   height: 32px;
-
   color: var(--color-text);
 }
 

src/main.js

@@ -1,11 +1,14 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
 import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
 
+app.use(createPinia())
 app.use(router)
 
 app.mount('#app')

src/router/index.js

@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import ButtonCounter from '@/views/ButtonCounter.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,8 +7,7 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      // component: HomeView
+      component: HomeView
-      component: ButtonCounter
     },
     {
       path: '/about',

src/stores/counter.js

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

src/views/HomeView.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import TheWelcome from '../components/TheWelcome.vue'
 </script>
 

vite.config.js

@@ -2,11 +2,13 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    vueDevTools(),
   ],
   resolve: {
     alias: {