From 8b39617142dc9cb05d81390544e00e5b3c2f4789 Mon Sep 17 00:00:00 2001 From: Pin-Ting Tang Date: Wed, 28 Apr 2021 15:39:18 +0800 Subject: Client-side_JavaScript_frameworks/Vue_getting_started (zh-TW translation)(partial) (#676) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 翻譯部分 Client-side_JavaScript_frameworks/Vue_getting_started * 更改一些用語 * 修改標點符號 * 修正符號 * Client-side_JavaScript_frameworks/Vue_getting_started (zh-TW translation)(partial) * 修改一些用語 --- .../vue_getting_started/index.html | 56 +++++++++++----------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'files/zh-tw') 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:

初始化一個新專案

-

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:

+

為了探索 Vue 各式各樣的功能，我們將會製作一個待辦事項應用程式。我們將使用 Vue CLI 來創造一個新專案框架來建構我們的應用程式。請跟著以下步驟：

    -
  1. In terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue.
    2. -
  2. Use the arrow keys and Enter to select the "Manually select features" option.
    3. -
  3. 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 Enter to proceed.
    4. -
  4. Next, you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit Enter again. This will help us catch common errors, but not be overly opinionated.
    5. -
  5. 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 Enter to continue.
    6. -
  6. 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 package.json file. Select "In dedicated config files" and push Enter.
    7. -
  7. 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 y , otherwise type n.
    8. +
  8. 在終端機 cd 切換到你想要創建應用程式的資料夾，然後執行 vue create moz-todo-vue。
    9. +
  9. 使用方向鍵以及 Enter 鍵，選擇「Manually select features」
    10. +
  10. 第一個呈現在你眼前的選單讓你選擇想要加入到專案的功能。確認「Babel」和「Linter / Formatter」都已選取。如果沒有的話，使用方向鍵及空白鍵來切換選取，當它們都已被選取，按下 Enter 鍵進行下一步。
    11. +
  11. 接下來，你要選擇 linter / formatter 的設定。切換到「Eslint with error prevention only」然後按下 Enter。這個設定會進行報錯提醒，但不會強制你修改。
    12. +
  12. 然後，你將會被詢問需要哪種自動化的 linting 設定。選擇「Lint on save」。這樣每當我們儲存專案檔案時，就會自動幫我們檢查錯誤。按下 Enter 鍵進行下一步。
    13. +
  13. 現在，你將要選擇如何管理你的組態檔案。「In dedicated config files」將會把你的組態設定放在專門的檔案裡，像是 ESLint 的組態設定會放在它們專門的檔案裡。「In package.json」，會把你的組態設定放在應用程式的 package.json 檔案裡。選擇「In dedicated config files」然後按下 Enter。
    14. +
  14. 最後，你將會被問到是否要將以上設定存為預設值。你可以自行決定，如果未來想要再使用這組設定，請按下 y， 否則按 n。
-

The CLI will now begin scaffolding out your project, and installing all of your dependencies.

+

CLI 會開始建構你的專案，並且安裝所需的相依套件。

-

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 --packageManager=<package-manager>, when you run vue create.  So if you wanted to create the moz-todo-vue project with npm and you'd previously chosen yarn, you’d run vue create moz-todo-vue --packageManager=npm.

+

如果你之前沒有執行過 Vue CLI，你將會被問一個問題－請選擇套件管理員。你可以使用方向鍵來選擇你想使用的套件管理員，Vue CLI 將會把這個套件管理員設為預設值。之後如果你想要使用不同的套件管理員，可以在執行 vue create 時傳入一個標幟 --packageManager=<package-manager>。舉例來說，如果你現在想要用 npm 來創建 moz-todo-vue 專案，但是之前是使用 yarn，你可以執行 vue create moz-todo-vue --packageManager=npm。

-

Note: We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.

+

注意：在這裡我們沒有介紹所有的選項，你可以參考 Vue 官方文件裡的關於 CLI 的更多資訊。

-

Project structure

+

專案結構

-

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:

+

如果以上都執行成功的話，CLI 將會為你的專案創建一連串的檔案和資料夾。其中最重要的如下：

-

Note: 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 views directory).

+

注意：依據你創建專案時所選設定的不同，你可能會看到其他資料夾（舉例來說，如果你有選擇 router，你將會看到一個 views 資料夾）。

-

.vue files (single file components)

+

.vue 檔案 (單一檔案元件)

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.

@@ -171,7 +171,7 @@ export default { };
-

Note: If you want to use TypeScript syntax, you need to set the lang attribute on the <script> tag to signify to the compiler that you're using TypeScript — <script lang="ts">.

+

注意: 如果你想要使用 TypeScript 語法， you need to set the lang attribute on the <script> tag to signify to the compiler that you're using TypeScript — <script lang="ts">.

<style> is where you write your CSS for the component. If you add a scoped attribute — <style scoped> — 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.

-- cgit v1.2.3-54-g00ecf