From 8c7fbf88ac3ae00fb5263cd9b768e91b7952e1dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=9D=A5=E6=8A=80=E6=9C=AF?= <1490493387@qq.com>
Date: Sun, 14 Nov 2021 22:59:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=B7=AF=E5=BE=84?=
 =?UTF-8?q?=E5=88=AB=E5=90=8D=E3=80=81=E5=A4=9A=E7=8E=AF=E5=A2=83=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E3=80=81=E7=94=9F=E4=BA=A7=E7=8E=AF=E5=A2=83=E6=89=93?=
 =?UTF-8?q?=E5=8C=85=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development              |  5 +++++
 .env.production               |  6 ++++++
 .env.staging                  |  6 ++++++
 package.json                  |  5 +++--
 src/App.vue                   |  5 -----
 src/components/HelloWorld.vue | 39 +++++++++++-----------------------
 src/store/index.ts            |  7 +++---
 tsconfig.json                 | 14 +++++++++---
 vite.config.ts                | 40 +++++++++++++++++++++++++++++++++--
 9 files changed, 85 insertions(+), 42 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production
 create mode 100644 .env.staging

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..3cbedc9
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,5 @@
+# 开发环境变量
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/dev-api'
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..bb0b6af
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,6 @@
+# 生产环境变量
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+
diff --git a/.env.staging b/.env.staging
new file mode 100644
index 0000000..2bf35d5
--- /dev/null
+++ b/.env.staging
@@ -0,0 +1,6 @@
+# 模拟环境变量
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+
diff --git a/package.json b/package.json
index 552b0ca..1e2fedd 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,8 @@
   "name": "vue3-element-admin",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "dev": "vite serve --mode development",
+    "build:prod": "vue-tsc --noEmit && vite build --mode production",
     "serve": "vite preview"
   },
   "dependencies": {
@@ -13,6 +13,7 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@types/node": "^16.11.7",
     "@vitejs/plugin-vue": "^1.9.3",
     "typescript": "^4.4.3",
     "vite": "^2.6.4",
diff --git a/src/App.vue b/src/App.vue
index 77bcfac..8fd9ce7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,3 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
 
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 3f21801..86b7718 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,42 +1,27 @@
 <template>
-  <el-input v-model="input" placeholder="Please input" />
-  <el-input-number v-model="num" :min="1" :max="10" @change="handleChange"/>
+  <el-input v-model="num"/>
+  <el-button @click="handleClick">点击+1</el-button>
 </template>
 
-<script lang="ts">
-import {defineComponent, ref} from 'vue'
-
+<script  lang="ts">
+import {defineComponent, computed} from 'vue'
+import {userStore} from '@/store';
 
 export default defineComponent({
   setup() {
-    const num = ref(1)
-    const handleChange = (value: string) => {
-      console.log(value)
+    const store = userStore()
+    const num = computed(()=>{
+      return store.state.count
+    })
+    const handleClick = () => {
+      store.commit('increment')
     }
     return {
-      input:ref(''),
       num,
-      handleChange,
+      handleClick
     }
   },
 })
 </script>
 
 
-<style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>
diff --git a/src/store/index.ts b/src/store/index.ts
index 4abb398..1368867 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,5 @@
 import {InjectionKey} from 'vue'
-import {createStore, Store} from 'vuex'
+import {createStore,useStore as baseUseStore ,Store} from 'vuex'
 
 export interface State {
     count: number
@@ -20,6 +20,7 @@ export const store = createStore<State>({
     }
 })
 
-
-
+export function userStore(){
+    return baseUseStore(key)
+}
 
diff --git a/tsconfig.json b/tsconfig.json
index 8f6afaa..dae1699 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,8 +9,16 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+    "lib": ["esnext", "dom"],
 
+    /* Vite 路径别名报错 */
+    "baseUrl": "./",
+    "paths": {
+      "@": ["src"],
+      "@/*": ["src/*"]
+    },
+
+    "skipLibCheck": true  // element-plus 生产打包报错，通过此配置修改 TS 不对第三方依赖类型检查
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 315212d..9b95f46 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,43 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+// 在 ts 模块中加载 node 核心模块需要安装 node 的类型补充模块: npm i -D @types/node
+import path from 'path'
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+    plugins: [vue()],
+    resolve: {
+        // Vite2设置别名路径方式一
+        /**
+         alias:{
+
+           "/@":path.resolve("./src"),
+         },
+         **/
+
+        // Vite2设置别名路径方式二
+        alias: [
+            {
+                find: "@",
+                replacement: path.resolve("./src")
+            },
+            {
+                find: "@image",
+                replacement: path.resolve("./src/assets/images")
+            },
+            {
+                find: "@router",
+                replacement: path.resolve("./src/router")
+            },
+            {
+                find: "@store",
+                replacement: path.resolve("./src/store")
+            },
+            {
+                find: "@api",
+                replacement: path.resolve("./src/api")
+            }
+        ]
+    }
 })