🔨 🧑‍💻 添加vue-devtools 优化开发者体验

Co-authored-by: 舰队的偶像-岛风酱! <frg2089@outlook.com>
Signed-off-by: 舰队的偶像-岛风酱! <frg2089@outlook.com>

.npmrc

@@ -0,0 +1 @@
+ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

.stylelintrc.yml

@@ -3,4 +3,4 @@ extends:
   - stylelint-order
   - stylelint-declaration-block-no-ignored-properties
   - stylelint-config-standard-vue
-# rules: 
+rules: {}

.vscode/launch.json

@@ -0,0 +1,22 @@
+{
+  // 使用 IntelliSense 了解相关属性。 
+  // 悬停以查看现有属性的描述。
+  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug",
+      "request": "launch",
+      "runtimeArgs": [
+        "run",
+        "dev"
+      ],
+      "runtimeExecutable": "npm",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "type": "node"
+    }
+
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,14 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "lint:code",
+			"problemMatcher": [
+				"$eslint-compact",
+				"$eslint-stylish"
+			],
+			"label": "npm: lint:code"
+		}
+	]
+}

package.json

@@ -5,14 +5,16 @@
 	"version": "0.1.2",
 	"author": "BTMuli <bt-muli@outlook.com>",
 	"scripts": {
-		"lint:all": "lint:code && lint:style",
-		"linx:all:fix": "lint:code:fix && lint:style:fix",
-		"lint:code": "eslint --ext .ts,.vue .",
-		"lint:code:fix": "lint:code --fix",
-		"lint:style": "stylelint './src/**/*.{vue}'",
-		"lint:style:fix": "lint:style --fix",
-		"dev": "vite",
-		"build": "vue-tsc --noEmit && vite build",
+		"lint": "concurrently \"npm:lint:*(!fix)\"",
+		"lint:fix": "concurrently \"npm:lint:fix:*\"",
+		"lint:code": "eslint \"./src/**/*.{vue,ts,tsx,js,jsx}\"",
+		"lint:code:fix": "npm run lint:code -- --fix",
+		"lint:style": "stylelint \"./src/**/*.{vue,css}\"",
+		"lint:style:fix": "npm run lint:style -- --fix",
+		"dev": "concurrently -k \"tauri dev --exit-on-panic\" \"vue-devtools\"",
+		"vite:dev": "vite dev",
+		"vite:build": "vite build",
+		"build": "tauri build",
 		"preview": "vite preview",
 		"tauri": "tauri"
 	},
@@ -53,6 +55,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.57.1",
 		"@typescript-eslint/parser": "^5.57.1",
 		"@vitejs/plugin-vue": "^4.1.0",
+		"@vue/devtools": "^6.5.0",
 		"concurrently": "^8.0.1",
 		"eslint": "^8.37.0",
 		"eslint-config-standard-with-typescript": "^34.0.1",
@@ -67,7 +70,6 @@
 		"stylelint-order": "^6.0.3",
 		"typescript": "^5.0.3",
 		"vite": "^4.2.1",
-		"vite-plugin-vuetify": "^1.0.2",
-		"vue-devtools": "^5.1.4"
+		"vite-plugin-vuetify": "^1.0.2"
 	}
 }

src-tauri/src/main.rs

@@ -1,8 +1,18 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+use tauri::Manager;
+
 fn main() {
     tauri::Builder::default()
+        .setup(|app| {
+            #[cfg(debug_assertions)] // only include this code on debug builds
+            {
+                let window = app.get_window("tauri-genshin").unwrap();
+                window.open_devtools(); // open the devtools on startup
+            }
+            Ok(())
+        })
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/tauri.conf.json

@@ -1,6 +1,6 @@
 {
 	"build": {
-		"beforeDevCommand": "npm run dev",
+		"beforeDevCommand": "npm run vite:dev",
 		"beforeBuildCommand": "npm run build",
 		"devPath": "http://localhost:3000",
 		"distDir": "../dist",

src/main.ts

@@ -18,4 +18,14 @@ import { createVuetify } from "vuetify";
 // 全局样式
 import "./assets/index.css";
 
-createApp(App).use(router).use(store).use(createVuetify()).mount("#app");
+if (import.meta.env.MODE === "development") {
+  await import("@vue/devtools").then(i => {
+    i.default.connect(/* host, port */);
+  });
+}
+
+createApp(App)
+  .use(router)
+  .use(store)
+  .use(createVuetify())
+  .mount("#app");