fix(ts): Modified import to make it compatible with@ alias

In the last commit, I removed aliases like `@component`, `@assets`. They're redundant, and `@` is enough~
ZacharyBear · Dec 29, 2023 · b75dbae · b75dbae
1 parent 1eb6527
commit b75dbae
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/assets/style/fonts.css b/src/assets/style/fonts.css
@@ -1,18 +1,18 @@
 @font-face {
     font-family: Poppins;
-    src: url('@assets/style/fonts/Poppins/Poppins-Regular.ttf');
+    src: url('@/assets/style/fonts/Poppins/Poppins-Regular.ttf');
     font-weight: normal;
     font-style: normal;
 }
 @font-face {
     font-family: Kanit;
-    src: url('@assets/style/fonts/Kanit/Kanit-Regular.ttf');
+    src: url('@/assets/style/fonts/Kanit/Kanit-Regular.ttf');
     font-weight: normal;
     font-style: normal;
 }
 @font-face {
     font-family: Kanit;
-    src: url('@assets/style/fonts/Kanit/Kanit-Bold.ttf');
+    src: url('@/assets/style/fonts/Kanit/Kanit-Bold.ttf');
     font-weight: bold;
     font-style: normal;
 }
diff --git a/src/components/GgColorPicker.vue b/src/components/GgColorPicker.vue
@@ -46,8 +46,8 @@
 
 <script lang="ts" setup>
 import { ref, watch, reactive, onMounted } from 'vue';
-import { hsv2rgb, str2rgb, str2rgba, rgb2hsv } from '@assets/js/color.ts';
-import GgInput from '@components/GgInput.vue';
+import { hsv2rgb, str2rgb, str2rgba, rgb2hsv } from '@/assets/js/color.ts';
+import GgInput from '@/components/GgInput.vue';
 
 // vars
 const props = defineProps({

diff --git a/src/main.ts b/src/main.ts
@@ -4,11 +4,11 @@ import App from './App.vue';
 import router from '@/routes/index';
 import i18n from '@/assets/lang/index';
 // styles
-import '@assets/style/common.less';
-import '@assets/style/fonts.css';
-import '@assets/style/fontawesome/css/fontawesome.css';
-import '@assets/style/fontawesome/css/brands.css';
-import '@assets/style/fontawesome/css/solid.css';
+import '@/assets/style/common.less';
+import '@/assets/style/fonts.css';
+import '@/assets/style/fontawesome/css/fontawesome.css';
+import '@/assets/style/fontawesome/css/brands.css';
+import '@/assets/style/fontawesome/css/solid.css';
 
 const app = createApp(App)
 .use(router)

diff --git a/src/routes/index.ts b/src/routes/index.ts
@@ -1,7 +1,7 @@
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
-import Welcome from '@views/Welcome.vue';
-import Home from '@views/Home.vue';
-import About from '@views/About.vue';
+import { createRouter, createWebHistory } from 'vue-router';
+import Welcome from '@/views/Welcome.vue';
+import Home from '@/views/Home.vue';
+import About from '@/views/About.vue';
 
 const router = createRouter({
     history: createWebHistory(),

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -41,8 +41,8 @@
 </template>
 
 <script lang="ts" setup>
-import GlHeader from '@views/global/GlHeader.vue';
-import GlFooter from '@views/global/GlFooter.vue';
+import GlHeader from '@/views/global/GlHeader.vue';
+import GlFooter from '@/views/global/GlFooter.vue';
 import { reactive } from 'vue';
 
 type Contributor = {

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -90,15 +90,15 @@
 
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
-import GgSlider from '@components/GgSlider.vue';
-import GlHeader from '@views/global/GlHeader.vue';
-import GlFooter from '@views/global/GlFooter.vue';
-import GgColorPicker from '@components/GgColorPicker.vue';
-import GgPop from '@components/GgPop.vue';
+import GgSlider from '@/components/GgSlider.vue';
+import GlHeader from '@/views/global/GlHeader.vue';
+import GlFooter from '@/views/global/GlFooter.vue';
+import GgColorPicker from '@/components/GgColorPicker.vue';
+import GgPop from '@/components/GgPop.vue';
 import GgUpload from '@/components/GgUpload.vue';
 import 'prismjs/themes/prism-okaidia.min.css';
 import clipboard from 'clipboard';
-import i18n from '@assets/lang/index.ts';
+import i18n from '@/assets/lang/index.ts';
 
 // vars
 const state = reactive({

diff --git a/src/views/Welcome.vue b/src/views/Welcome.vue
@@ -21,18 +21,22 @@
 </template>
 
 <script lang="ts" setup>
-import GlHeader from '@views/global/GlHeader.vue';
-import GlFooter from '@views/global/GlFooter.vue';
+import GlHeader from '@/views/global/GlHeader.vue';
+import GlFooter from '@/views/global/GlFooter.vue';
 import { onMounted } from 'vue';
-import i18n from '@assets/lang/index';
+import i18n, { langs } from '@/assets/lang/index';
+import gsap from 'gsap';
 
 // get lang from localStorages
 onMounted(() => {
     const lang = localStorage.getItem('lang');
-    if (lang) {
-        i18n.global.locale = lang;
+    if (lang && lang) {
+        i18n.global.locale = lang as ('zh' | 'en');
     } 
     
+    gsap.from('#banner .title', {
+        x: -100
+    })
 });
 </script>
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -13,4 +13,4 @@
     "src/**/*.d.ts",
     "src/**/*.vue",
   ]
-}
+}