Vue.js + Typescript 教程：快速上手構建高性能 SPA 應用

一、什麼是Vue.js和Typescript

Vue.js是一個漸進式JavaScript框架，用於構建用戶界面，同時也是單頁面應用程序（SPA）開發的理想選擇。它使用虛擬DOM樹來提高性能，支持組件化開發，完美提供了MVC結構。 Vue.js允許使用模板語法來聲明渲染UI組件，具有完善的生命周期方法，可以通信到DOM，適合開發響應式界面。

Typescript是微軟開發的一種兼容JavaScript的類型語言，它為JavaScript程序添加了靜態類型、類、接口等等特性。Typescript在Vue.js的開發中提供了很多便攜，通過類型檢查、接口、類、模塊等高級語言特性，提高了代碼的可讀性、可理解性、可維護性、可擴展性並降低了出錯的概率。

二、如何快速上手

以下是在Vue.js和Typescript下構建SPA應用的步驟：

安裝Vue CLI和創建項目

Vue CLI是Vue.js的一個官方工具，可以通過交互式的方式初始化和構建Vue.js應用。打開終端並執行以下命令安裝Vue CLI：

npm install -g @vue/cli

創建一個新的的Vue.js項目，執行以下命令：

vue create my-app

執行完後，進入my-app目錄並執行以下命令，啟動Vue.js開發服務器：

cd my-app
npm run serve

添加Typescript支持

創建好項目之後，為支持Typescript，我們需要執行以下命令來安裝Typescript相關的依賴：

npm install -D typescript ts-loader @types/vue @vue/cli-plugin-typescript

在/src目錄下創建一個vue.d.ts文件，並添加以下內容：

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

在項目的根目錄下創建tsconfig.json文件，並添加以下內容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

創建組件

創建一個Home.vue文件，添加以下代碼：

<template>
  <div>
    {{ greeting }}
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class Home extends Vue {
  get greeting(): string {
    return 'Welcome to my Vue.js app!';
  }
}
</script>

在App.vue文件中添加以下代碼：

<template>
  <div id="app">
    <Home />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Home from './components/Home.vue';

@Component
export default class App extends Vue {
  components: {
    Home
  };
}
</script>

編寫路由

在/src目錄下創建一個router.ts文件，並添加以下代碼：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
});

在main.ts中引入router.ts並配置Vue實例：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

三、構建SPA應用

以上已經完成了Vue.js和Typescript的初始化和配置，接下來可以完美構建高性能的SPA應用。在應用開發期間，可以添加許多常用Vue插件和第三方庫，例如Vuex、Vue Router和Axios等等。

在Vue.js開發的任何應用中，組件都是核心。Vue.js的組件非常靈活，通過構建小而模塊化的組件，可以加強易於維護、管理和組合的好處。

以下是一個使用Vue.js和Typescript構建的TodoList的示例：

創建組件

創建一個Todo.vue文件，添加以下代碼：

<template>
  <div class="todo">
    <h3>Todo</h3>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodo" />
      <button type="submit">Add Todo</button>
    </form>
    <ul>
      <li v-for="(t, index) in todos" :key="index">{{ t }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class Todo extends Vue {
  todos: string[] = [];
  newTodo: string = '';

  addTodo() {
    if (this.newTodo.trim().length) {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    }
  }
}
</script>

在App.vue文件中添加以下代碼：

<template>
  <div id="app">
    <Todo />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Todo from './components/Todo.vue';

@Component
export default class App extends Vue {
  components: {
    Todo
  };
}
</script>

添加路由

在router.ts中添加以下代碼：

import Vue from 'vue';
import Router from 'vue-router';
import Todo from './components/Todo.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/todo',
      name: 'Todo',
      component: Todo
    }
  ]
});

使用路由

在App.vue修改以下代碼：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/todo">Todo</router-link>
    </nav>
    <router-view />
  </div>
</template>

以上代碼完成了一個簡單的TodoList程序，用戶可以輸入待辦事項並查看已有的待辦項。

四、總結

在Vue.js和Typescript的幫助下，構建高性能的SPA應用已經不再是一項艱巨的工作。Vue.js的組件化開發可以讓開發者輕鬆實現易於維護、管理和組合的好處。Typescript提供了代碼可讀性、可理解性、可維護性、可擴展性並降低了出錯的概率。Vue.js和Typescript是開發高性能應用的理想選擇，是未來的發展方向。