chore: use <script setup> close #8

Author: cwandev

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
     'import/no-named-as-default-member': 'off',
     'import/no-unresolved': 'off',
     '@typescript-eslint/consistent-type-imports': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
     // enUS: all rules docs https://eslint.org/docs/rules/
     // zhCN: 所有规则文档 https://eslint.bootcss.com/docs/rules/
     // 基础规则 全部 ES 项目通用

plop-templates/component/index.hbs

@@ -5,12 +5,7 @@
 {{/if}}
 
 {{#if script}}
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: '{{ properCase name }}',
-})
+<script setup lang="ts">
 </script>
 {{/if}}
 

plop-templates/view/index.hbs

@@ -5,12 +5,7 @@
 {{/if}}
 
 {{#if script}}
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: '{{ properCase name }}',
-})
+<script setup lang="ts">
 </script>
 {{/if}}
 

src/App.vue

@@ -5,28 +5,22 @@
   </van-config-provider>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+<script setup lang="ts">
+import { ref, watch } from 'vue'
 import type { ConfigProviderTheme } from 'vant'
-export default defineComponent({
-  setup() {
-    const theme = ref<ConfigProviderTheme>('light')
-    const checked = ref<boolean>(false)
 
-    watch(checked,() => {
-      if(checked.value) {
-        theme.value = 'dark'
-        document.getElementsByTagName('html')[0].setAttribute('data-theme', 'data-theme-dark')
-      } else {
-        theme.value = 'light'
-        document.getElementsByTagName('html')[0].setAttribute('data-theme', 'data-theme-light')
-      }
-    })
-    
-    return {
-      theme,
-      checked
-    }
+const theme = ref<ConfigProviderTheme>('light')
+const checked = ref<boolean>(false)
+
+watch(checked,() => {
+  if(checked.value) {
+    theme.value = 'dark'
+    document.querySelector('html')
+    .setAttribute('data-theme', 'data-theme-dark')
+  } else {
+    theme.value = 'light'
+    document.querySelector('html')
+    .setAttribute('data-theme', 'data-theme-light')
   }
 })
 </script>

src/views/dashboard/analysis/index.vue

@@ -5,15 +5,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  setup() {
-    return {}
-  }
-})
-</script>
-
 <style lang="less" scoped>
 .container {
   width: 100vw;

src/views/dashboard/workplace/index.vue

@@ -4,24 +4,16 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useFetchData } from '@/utils/hooks/useFetchData'
 import { queryProjectNotice } from '@/api/dashboard/workplace'
-export default defineComponent({
-  setup() {
-    const { context: projects } = useFetchData(() => {
-      return queryProjectNotice().then(res => {
-        return {
-          data: res
-        }
-      })
-    })
 
+const { context: projects } = useFetchData(() => {
+  return queryProjectNotice().then(res => {
     return {
-      projects
+      data: res
     }
-  }
+  })
 })
 
 </script>

vite.config.ts

@@ -17,7 +17,11 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       'process.env.VUE_APP_PUBLIC_PATH': JSON.stringify(env.VITE_APP_PUBLIC_PATH),
     },
     plugins: [
-      vue(),
+      vue({
+        // Reactivity transform is an experimental feature.
+        // https://github.com/vuejs/rfcs/discussions/369.
+        // reactivityTransform: true
+      }),
       Components({
         dts: true,
         resolvers: [VantResolver()],