From a9d2453ec7e1d1a68f6ab53d2a733277c3bfdb20 Mon Sep 17 00:00:00 2001
From: 646d8250666f3d79d7a75f84 <646d8250666f3d79d7a75f84@devide>
Date: Wed, 24 May 2023 04:10:00 +0000
Subject: [PATCH] Wed May 24 04:10:00 UTC 2023 inscode

---
 package.json                  |  3 +++
 src/App.vue                   |  9 +++++----
 src/components/HelloWorld.vue |  2 +-
 src/components/TheWelcome.vue |  2 +-
 src/styles/variables.scss     |  1 +
 tsconfig.json                 | 13 +++++++++++++
 vite.config.js                | 10 +++++++++-
 7 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 src/styles/variables.scss
 create mode 100644 tsconfig.json

diff --git a/package.json b/package.json
index aa1c7de..d2010bc 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.3.0",
+    "typescript": "^5.0.4",
     "vite": "^3.0.1"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 633a5df..eeb1373 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue';
+import TheWelcome from './components/TheWelcome.vue';
 </script>
 
 <template>
@@ -17,9 +17,10 @@ import TheWelcome from './components/TheWelcome.vue'
   </main>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 header {
   line-height: 1.5;
+  background-color: $primary-color;
 }
 
 .logo {
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1b8faac..ff8decf 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 defineProps({
   msg: {
     type: String,
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
index d3d2e7a..ce040fe 100644
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..0b777ed
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1 @@
+$primary-color:red;
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f98eb12
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es6",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "sourceMap": true
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/vite.config.js b/vite.config.js
index 4ad898d..7b96bfe 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,5 +6,13 @@ export default defineConfig({
   server: {
     host: true
   },
-  plugins: [vue()]
+  plugins: [vue()],
+  css:{
+    preprocessorOptions:{
+      scss:{
+        // 在此处添加全局变量
+        additionalData: `@import "./src/styles/variables.scss";`
+      }
+    }
+  }
 })
-- 
GitLab