Initial /learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started, zh-TW (#662)

* 翻譯部分 Client-side_JavaScript_frameworks/Vue_getting_started

* 更改一些用語

* 修改標點符號

* 修正符號

2 files changed, 310 insertions, 0 deletions

diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
new file mode 100644
index 0000000000..6c5727b8a2
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
@@ -0,0 +1,310 @@
+---
+title: 開始學 Vue
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started
+tags:
+  - Beginner
+  - Frameworks
+  - Installation
+  - JavaScript
+  - Learn
+  - client-side
+  - vue
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">現在來介紹我們的第三個框架 Vue。在這篇文章中，我們會介紹 Vue 的背景，如何安裝 Vue 及建立一個新專案，學習整個 Vue 專案的高階架構及一個獨立的元件，學習如何在本地端運行專案，以及開始建構我們的範例。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">先備知識</th>
+   <td>
+    <p>熟悉 <a href="/en-US/docs/Learn/HTML">HTML</a>、<a href="/en-US/docs/Learn/CSS">CSS</a>、以及 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 的核心知識，知道如何使用 <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">終端機/命令列工具（terminal/command line）</a>。</p>
+
+    <p>Vue 元件是由 Javascript 物件（用來管理應用的資料）及樣本語法（用來映射成 DOM 結構）所組成的。另外，你將需要使用終端機安裝 node 和 npm，以便下載及使用一些 Vue 的進階功能（像是單一檔案的元件或是渲染函式）</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">目標</th>
+   <td>開啟一個 Vue 專案，建立本地端開發環境，以及了解 Vue 是如何運作。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_clearer_Vue">更了解 Vue</h2>
+
+<p>Vue 是一個新穎的 Javascript 框架，它提供了很多有用的功能來達到漸進增強（progressive enhancement）的策略。與其他的框架不同的是，你可以把 Vue 和既有的 HTML 做整合，這讓你可以像使用插入性替換的函式庫一樣來使用 Vue，就像使用 <a href="/en-US/docs/Glossary/jQuery">JQuery</a> 一樣。</p>
+
+<p>除此之外，你也可以使用 Vue 來寫一個單頁式應用程式。這讓你可以完全使用 Vue 來建構網頁，當處理較複雜的應用時有較好的開發效率及體驗。Vue 也有提供函式庫來做客戶端路由及狀態管理。Vue 對客戶端路由及狀態管理這些工具採取中間立場的態度，雖然 Vue 的核心團隊推薦使用這些函式庫，但是這些函式庫沒有直接打包進 Vue，而是讓你可以自由選擇使用其他更適合你的應用的路由庫或狀態管理庫。</p>
+
+<p>除了可以漸進地把 Vue 整合到應用程式裡，Vue 也提供了漸進式的方法來撰寫網頁內容。就像大部分的框架，Vue 讓你創造可以重複使用的網頁內容區塊（稱為元件）。大部分時候，Vue 元件是用一種特殊的 HTML 樣板語法寫成的，然而在一些場景使用 HTML 語法會有限制時，你可以使用 JSX 或是 Javascript 函式來定義你的元件。</p>
+
+<p>當你閱讀這份教程時，你可以在其他分頁打開 <a href="https://vuejs.org/v2/guide/">Vue 指南</a> 以及 <a href="https://vuejs.org/v2/api/">API 文件</a>，以方便參考更多資訊。<br>
+ 如果你想要找一份好的（可能有些偏見）文件探討 Vue 與其他框架的比較，請參見 <a href="https://vuejs.org/v2/guide/comparison.html">Vue 指南：對比其他框架</a>。</p>
+
+<h2 id="Installation">安裝</h2>
+
+<p>如果要在既有的專案中使用 Vue，你可以把以下任一個 <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> 標籤加到你的頁面中，這樣你就可以開始在專案中使用 Vue，這也是為什麼 Vue 宣稱自己是一個漸進式的框架。它提供了一個很好的機會，你可以把一些使用函式庫（像是 JQuery）的專案轉變成使用 Vue，如此一來，你就可以使用很多 Vue 的核心功能，像是屬性、客製化元件以及資料管理。</p>
+
+<ul>
+ <li>
+  <p>開發環境版本（非優化版本，包含了有幫助的命令列警告。適合開發階段）</p>
+
+  <pre class="brush: html">&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>
+  <p>產品環境版本（優化版本，輕量化的命令列警告。我們建議你標明使用特定的版本號來引入 Vue，以避免新版本造成不可預期的破壞）</p>
+
+  <pre class="brush: html">&lt;script src="https://cdn.jsdelivr.net/npm/vue@2"&gt;&lt;/script&gt;</pre>
+ </li>
+</ul>
+
+<p>然而，以上方法有一些限制。若要建置一些較複雜的應用程式，你將需要使用 <a href="https://www.npmjs.com/package/vue">Vue NPM 套件</a>。 這讓你可以使用 Vue 的進階功能且可以使用打包器像是 WebPack。為了讓使用 Vue 建置應用程式變得更容易，可以使用 CLI 來精簡化開發流程。如果要使用 npm 套件 &amp; CLI，你將需要：</p>
+
+<ol>
+ <li>安裝 Node.js 8.11+</li>
+ <li>npm 或 yarn</li>
+</ol>
+
+<div class="notecard note">
+<p><strong>注意</strong>：如果你沒有安裝以上工具，請參考<a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups">關於安裝 npm 及 Node.js</a>。</p>
+</div>
+
+<p>在你的終端機執行以下命令來安裝 CLI：</p>
+
+<pre class="brush: bash">npm install --global @vue/cli</pre>
+
+<p>或者你比較喜歡使用 yarn：</p>
+
+<pre class="brush: bash">yarn global add @vue/cli</pre>
+
+<p>安裝完 CLI 後，在你想要創建專案的資料夾內開啟終端機然後執行 <code>vue create &lt;project-name&gt;</code> 來初始化專案。CLI 將會給你一連串專案組態，有些設定有預設值，而你可以更改成你自己的設定。這些選項讓你可以在專案裡配置 TypeScript、linting、vue-router、Testing 等等。</p>
+
+<p>之後我們會介紹如何使用它。</p>
+
+<h2 id="Initializing_a_new_project">初始化一個新專案</h2>
+
+<p>To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:</p>
+
+<ol>
+ <li>In terminal, <code>cd</code> to where you'd like to create your sample app, then run <code>vue create moz-todo-vue</code>.</li>
+ <li>Use the arrow keys and <kbd>Enter</kbd> to select the "Manually select features" option.</li>
+ <li>The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press <kbd>Enter</kbd> to proceed.</li>
+ <li>Next, you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit <kbd>Enter</kbd> again. This will help us catch common errors, but not be overly opinionated.</li>
+ <li>Next, you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit <kbd>Enter</kbd> to continue.</li>
+ <li>Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's <code>package.json</code> file. Select "In dedicated config files" and push <kbd>Enter</kbd>.</li>
+ <li>Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type <kbd>y</kbd> , otherwise type <kbd>n</kbd>.</li>
+</ol>
+
+<p>The CLI will now begin scaffolding out your project, and installing all of your dependencies.</p>
+
+<p>If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag <code>--packageManager=&lt;package-manager&gt;</code>, when you run <code>vue create</code>.  So if you wanted to create the <code>moz-todo-vue</code> project with npm and you'd previously chosen yarn, you’d run <code>vue create moz-todo-vue --packageManager=npm</code>.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: We've not gone over all of the options here, but you can <a href="https://cli.vuejs.org">find more information on the CLI</a> in the Vue docs.</p>
+</div>
+
+<h2 id="Project_structure">Project structure</h2>
+
+<p>If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:</p>
+
+<ul>
+ <li><code>.eslintrc.js</code>: This is a config file for <a href="https://eslint.org/">eslint</a>. You can use this to manage your linting rules.</li>
+ <li><code>babel.config.js</code>: This is the config file for <a href="https://babeljs.io/">Babel</a>, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.</li>
+ <li><code>.browserslistrc</code>: This is a config for <a href="https://github.com/browserslist/browserslist">Browserslist</a>. You can use this to control which browsers your tooling optimizes for.</li>
+ <li><code>public</code>: This directory contains static assets that are published, but not processed by <a href="https://webpack.js.org/">Webpack</a> during build (with one exception; <code>index.html</code> gets some processing).
+  <ul>
+   <li><code>favicon.ico</code>: This is the favicon for your app. Currently, it's the Vue logo.</li>
+   <li><code>index.html</code>: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it.
+    <div class="note"><strong>Note</strong>: this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.</div>
+   </li>
+  </ul>
+ </li>
+ <li><code>src</code>: This directory contains the core of your Vue app.
+  <ul>
+   <li><code>main.js</code>: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the <code>index.html</code> file your app should be attached to. This file is often where you register global components or additional Vue libraries.</li>
+   <li><code>App.vue</code>: this is the top-level component in your Vue app. See below for more explanation of Vue components.</li>
+   <li><code>components</code>: this directory is where you keep your components. Currently, it just has one example component.</li>
+   <li><code>assets</code>: this directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like <a href="https://sass-lang.com/">Sass/SCSS</a> or <a href="https://stylus-lang.com/">Stylus</a>.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="notecard note">
+<p><strong>Note</strong>: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a <code>views</code> directory).</p>
+</div>
+
+<h2 id=".vue_files_single_file_components">.vue files (single file components)</h2>
+
+<p>Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.</p>
+
+<p>While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in <code>.vue</code>. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.</p>
+
+<p>As a bonus, projects created with the Vue CLI are configured to use <code>.vue</code> files with Webpack out of the box. In fact, if you look inside the <code>src</code> folder in the project we created with the CLI, you'll see your first <code>.vue</code> file: <code>App.vue</code>.</p>
+
+<p>Let's explore this now.</p>
+
+<h3 id="App.vue">App.vue</h3>
+
+<p>Open your <code>App.vue</code> file — you’ll see that it has three parts: <code>&lt;template&gt;</code>, <code>&lt;script&gt;</code>, and <code>&lt;style&gt;</code>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.</p>
+
+<p><code>&lt;template&gt;</code> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: By setting the <code>lang</code> attribute on the <code>&lt;template&gt;</code> tag, you can use Pug template syntax instead of standard HTML — <code>&lt;template lang="pug"&gt;</code>. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.</p>
+</div>
+
+<p><code>&lt;script&gt;</code> contains all of the non-display logic of your component. Most importantly, your <code>&lt;script&gt;</code> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a <code>render()</code> function.</p>
+
+<p>In the case of <code>App.vue</code>, our default export sets the name of the component to <code>App</code> and registers the <code>HelloWorld</code> component by adding it into the <code>components</code> property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.</p>
+
+<pre class="brush: js">import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'App',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};</pre>
+
+<div class="notecard note">
+<p><strong>Note</strong>: If you want to use <a href="https://www.typescriptlang.org/">TypeScript</a> syntax, you need to set the <code>lang</code> attribute on the <code>&lt;script&gt;</code> tag to signify to the compiler that you're using TypeScript — <code>&lt;script lang="ts"&gt;</code>.</p>
+</div>
+
+<p><code>&lt;style&gt;</code> is where you write your CSS for the component. If you add a <code>scoped</code> attribute — <code>&lt;style scoped&gt;</code> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: If you select a CSS pre-processor when creating the project via the CLI, you can add a <code>lang</code> attribute to the <code>&lt;style&gt;</code> tag so that the contents can be processed by Webpack at build time. For example, <code>&lt;style lang="scss"&gt;</code> will allow you to use SCSS syntax in your styling information.</p>
+</div>
+
+<h2 id="Running_the_app_locally">在本地端運行應用程式</h2>
+
+<p>The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a <code>serve</code> command to the project’s <code>package.json</code> file as an npm script, so you can easily run it.</p>
+
+<p>In your terminal, try running <code>npm run serve</code> (or <code>yarn serve</code> if you prefer yarn). Your terminal should output something like the following:</p>
+
+<pre>INFO  Starting development server...
+98% after emitting CopyPlugin
+
+ DONE  Compiled successfully in 18121ms
+
+  App running at:
+  - Local:   &lt;http://localhost:8080/&gt;
+  - Network: &lt;http://192.168.1.9:8080/&gt;
+
+  Note that the development build is not optimized.
+  To create a production build, run npm run build.</pre>
+
+<p>If you navigate to the “local” address in a new browser tab (this should be something like <code>http://localhost:8080</code> as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.</p>
+
+<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="vue-default-app.png" style="border-style: solid; border-width: 1px;"></p>
+
+<h2 id="Making_a_couple_of_changes">Making a couple of changes</h2>
+
+<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;</a></code> element from the template section:</p>
+
+<pre class="brush: html"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd">&lt;img alt="Vue logo" src="./assets/logo.png"&gt;</span></pre>
+
+<p>If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the <code>HelloWorld</code> component from our template.</p>
+
+<p>First of all delete this line:</p>
+
+<pre class="brush: html">&lt;HelloWorld msg="Welcome to Your Vue.js App"/&gt;</pre>
+
+<p>If you save your <code>App.vue</code> file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <code>&lt;script&gt;</code> element that import and register the component:</p>
+
+<p>Delete these lines now:</p>
+
+<pre class="brush: js">import HelloWorld from './components/HelloWorld.vue'</pre>
+
+<pre class="brush: js">components: {
+  HelloWorld
+}</pre>
+
+<p>Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <code>&lt;template&gt;</code>.</p>
+
+<p>Let’s add a new <code>&lt;h1&gt;</code> inside <code>&lt;div id="app"&gt;</code>. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:</p>
+
+<pre class="brush: html">&lt;template&gt;
+  &lt;div id="app"&gt;
+    &lt;h1&gt;To-Do List&lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p><code>App.vue</code> will now show our heading, as you'd expect.</p>
+
+<h2 id="Summary">總結</h2>
+
+<p>Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.</p>
+
+<p>With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.</p>
+
+<p>In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.</p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="In_this_module">在本模組</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">前端框架介紹</a></li>
+ <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">框架的主要功能</a></li>
+ <li>React
+  <ul>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">開始學 React</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">建立我們的 React 待辦清單</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">把 React app 元件化</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">響應性 React：事件與狀態</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">響應性 React：編輯、過濾、條件式過濾</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">React 無障礙</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React 的資源</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">開始學 Ember</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app 架構與元件</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">響應性 Ember：事件、類別、狀態</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">響應性 Ember：Footer 功能、條件式渲染</a></li>
+   <li><a href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Ember 的路由</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember 的資源與除錯</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">開始學 Vue</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">建立第一個 Vue 元件</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">渲染 Vue 元件的列表</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">寫一個 todo 表單：Vue 的事件、方法、model</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">透過 CSS 樣式化 Vue 元件</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">使用 Vue 的計算屬性 (compueted)</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue 的條件式渲染：編輯已存在的待辦</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">重點管理 Vue ref</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue 的資源</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">開始學 Svelte</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">建立我們的 Svelte 待辦清單</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">把 Svelte app 元件化</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">部署與下一步</a></li>
+  </ul>
+ </li>
+ <li>Angular
+   <ul>
+    <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">開始學 Angular</a></li>
+    <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">開始我們的 Angular 待辦清單</a></li>
+    <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">把我們的 Angular app 樣式話</a></li>
+    <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">建立一個項目組建</a></li>
+    <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">過濾我們的待辦項目</a></li>
+    <li><a href="/zn-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li>
+   </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/vue-default-app.png b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/vue-default-app.png
new file mode 100644
index 0000000000..a68d84bb9f
--- /dev/null
+++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/vue-default-app.png