Client-side_JavaScript_frameworks/Vue_getting_started (zh-TW translation)(partial) (#676)

* 翻譯部分 Client-side_JavaScript_frameworks/Vue_getting_started

* 更改一些用語

* 修改標點符號

* 修正符號

* Client-side_JavaScript_frameworks/Vue_getting_started (zh-TW translation)(partial)

* 修改一些用語

1 files changed, 28 insertions, 28 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
index 6c5727b8a2..4720f18769 100644
--- 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
@@ -86,57 +86,57 @@ tags:
 
 <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>
+<p>為了探索 Vue 各式各樣的功能，我們將會製作一個待辦事項應用程式。我們將使用 Vue CLI 來創造一個新專案框架來建構我們的應用程式。請跟著以下步驟：</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>
+ <li>在終端機 <code>cd</code> 切換到你想要創建應用程式的資料夾，然後執行 <code>vue create moz-todo-vue</code>。</li>
+ <li>使用方向鍵以及 <kbd>Enter</kbd> 鍵，選擇「Manually select features」</li>
+ <li>第一個呈現在你眼前的選單讓你選擇想要加入到專案的功能。確認「Babel」和「Linter / Formatter」都已選取。如果沒有的話，使用方向鍵及空白鍵來切換選取，當它們都已被選取，按下 <kbd>Enter</kbd> 鍵進行下一步。</li>
+ <li>接下來，你要選擇 linter / formatter 的設定。切換到「Eslint with error prevention only」然後按下 <kbd>Enter</kbd>。這個設定會進行報錯提醒，但不會強制你修改。</li>
+ <li>然後，你將會被詢問需要哪種自動化的 linting 設定。選擇「Lint on save」。這樣每當我們儲存專案檔案時，就會自動幫我們檢查錯誤。按下 <kbd>Enter</kbd> 鍵進行下一步。</li>
+ <li>現在，你將要選擇如何管理你的組態檔案。「In dedicated config files」將會把你的組態設定放在專門的檔案裡，像是 ESLint 的組態設定會放在它們專門的檔案裡。「In package.json」，會把你的組態設定放在應用程式的 <code>package.json</code> 檔案裡。選擇「In dedicated config files」然後按下 <kbd>Enter</kbd>。</li>
+ <li>最後，你將會被問到是否要將以上設定存為預設值。你可以自行決定，如果未來想要再使用這組設定，請按下 <kbd>y</kbd>， 否則按 <kbd>n</kbd>。</li>
 </ol>
 
-<p>The CLI will now begin scaffolding out your project, and installing all of your dependencies.</p>
+<p>CLI 會開始建構你的專案，並且安裝所需的相依套件。</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>
+<p>如果你之前沒有執行過 Vue CLI，你將會被問一個問題－請選擇套件管理員。你可以使用方向鍵來選擇你想使用的套件管理員，Vue CLI 將會把這個套件管理員設為預設值。之後如果你想要使用不同的套件管理員，可以在執行 <code>vue create</code> 時傳入一個標幟 <code>--packageManager=&lt;package-manager&gt;</code>。舉例來說，如果你現在想要用 npm 來創建 <code>moz-todo-vue</code> 專案，但是之前是使用 yarn，你可以執行 <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>
+<p><strong>注意</strong>：在這裡我們沒有介紹所有的選項，你可以參考 Vue 官方文件裡的<a href="https://cli.vuejs.org">關於 CLI 的更多資訊</a>。</p>
 </div>
 
-<h2 id="Project_structure">Project structure</h2>
+<h2 id="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>
+<p>如果以上都執行成功的話，CLI 將會為你的專案創建一連串的檔案和資料夾。其中最重要的如下：</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).
+ <li><code>.eslintrc.js</code>：這是 <a href="https://eslint.org/">eslint</a> 的組態檔案，你可以使用它來管理你的 linting 規則。</li>
+ <li><code>babel.config.js</code>：這是 <a href="https://babeljs.io/">Babel</a> 的組態檔案，在開發階段我們可以使用一些 Javascript 的新功能，透過這個檔案轉換成在產品環境可以跨瀏覽器運行的舊版語法。你也可以在這個檔案裡註冊額外的 babel 套件。</li>
+ <li><code>.browserslistrc</code>：這是 <a href="https://github.com/browserslist/browserslist">Browserslist</a>的組態檔案。你可以透過它來控制需要對哪些瀏覽器進行支持與優化</li>
+ <li><code>public</code>：這個資料夾包含了所有發布的靜態檔案，這些檔案在建置過程不會經過 <a href="https://webpack.js.org/">Webpack</a> 加工。（但是有一個例外：<code>index.html</code> 會有一些處理）。
   <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><code>favicon.ico</code>：這是應用程式的 favicon。目前是 Vue 的標誌。</li>
+   <li><code>index.html</code>：這是應用程式的模板。你的 Vue 應用程式會透過這個 HTML 頁面來運行，你也可以使用 lodash 樣板語言在這個頁面穿插一些值。
+    <div class="note"><strong>注意</strong>：這個模板不是用來管理你的應用程式的版面－而是用來管理應用程式以外的靜態 HTML 檔案，只有在使用一些進階的功能才需要修改這個檔案。</div>
    </li>
   </ul>
  </li>
- <li><code>src</code>: This directory contains the core of your Vue app.
+ <li><code>src</code>：這個資料夾是 Vue 專案的核心。
   <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>
+   <li><code>main.js</code>：這是應用程式的進入點。目前，這個檔案會初始化你的 Vue 應用程式並定義要將應用掛載到 <code>index.html</code> 檔案中的哪個 HTML 元素。通常還會在這個檔案註冊全域性元件或載入其他 Vue 函式庫。</li>
+   <li><code>App.vue</code>：這是 Vue 應用程式的根節點元件。往下看可以了解更多關於 Vue 元件的說明。</li>
+   <li><code>components</code>：你可以把你的元件放在這個資料夾。目前它只有放一個範例元件。</li>
+   <li><code>assets</code>：這個資料夾是用來放一些靜態檔案像是 CSS 和圖片。因為這些檔案在來源目錄下，它們可以透過 Webpack 加工處理。這表示你可以使用一些前處理器，像是 <a href="https://sass-lang.com/">Sass / SCSS</a> 或是 <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>
+<p><strong>注意</strong>：依據你創建專案時所選設定的不同，你可能會看到其他資料夾（舉例來說，如果你有選擇 router，你將會看到一個 <code>views</code> 資料夾）。</p>
 </div>
 
-<h2 id=".vue_files_single_file_components">.vue files (single file components)</h2>
+<h2 id=".vue_files_single_file_components">.vue 檔案 (單一檔案元件)</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>
 
@@ -171,7 +171,7 @@ export default {
 };</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>
+<p><strong>注意</strong>: 如果你想要使用 <a href="https://www.typescriptlang.org/">TypeScript</a> 語法， 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>