From fca49c8c27e58481a1d8cdfddd1f44feed3f42d4 Mon Sep 17 00:00:00 2001 From: Pin-Ting Tang Date: Wed, 28 Apr 2021 00:40:22 +0800 Subject: Initial /learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started, zh-TW (#662) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 翻譯部分 Client-side_JavaScript_frameworks/Vue_getting_started * 更改一些用語 * 修改標點符號 * 修正符號 --- .../vue_getting_started/index.html | 310 +++++++++++++++++++++ .../vue_getting_started/vue-default-app.png | Bin 0 -> 33228 bytes 2 files changed, 310 insertions(+) create mode 100644 files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html create mode 100644 files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/vue-default-app.png 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 +--- +
{{LearnSidebar}}
+ +
{{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")}}
+ +

現在來介紹我們的第三個框架 Vue。在這篇文章中，我們會介紹 Vue 的背景，如何安裝 Vue 及建立一個新專案，學習整個 Vue 專案的高階架構及一個獨立的元件，學習如何在本地端運行專案，以及開始建構我們的範例。

+ + + + + + + + + + + + +
先備知識 +

熟悉 HTML、CSS、以及 JavaScript 的核心知識，知道如何使用 終端機/命令列工具（terminal/command line）。

+ +

Vue 元件是由 Javascript 物件（用來管理應用的資料）及樣本語法（用來映射成 DOM 結構）所組成的。另外，你將需要使用終端機安裝 node 和 npm，以便下載及使用一些 Vue 的進階功能（像是單一檔案的元件或是渲染函式）

+
目標開啟一個 Vue 專案，建立本地端開發環境，以及了解 Vue 是如何運作。
+ +

更了解 Vue

+ +

Vue 是一個新穎的 Javascript 框架，它提供了很多有用的功能來達到漸進增強（progressive enhancement）的策略。與其他的框架不同的是，你可以把 Vue 和既有的 HTML 做整合，這讓你可以像使用插入性替換的函式庫一樣來使用 Vue，就像使用 JQuery 一樣。

+ +

除此之外，你也可以使用 Vue 來寫一個單頁式應用程式。這讓你可以完全使用 Vue 來建構網頁，當處理較複雜的應用時有較好的開發效率及體驗。Vue 也有提供函式庫來做客戶端路由及狀態管理。Vue 對客戶端路由及狀態管理這些工具採取中間立場的態度，雖然 Vue 的核心團隊推薦使用這些函式庫，但是這些函式庫沒有直接打包進 Vue，而是讓你可以自由選擇使用其他更適合你的應用的路由庫或狀態管理庫。

+ +

除了可以漸進地把 Vue 整合到應用程式裡，Vue 也提供了漸進式的方法來撰寫網頁內容。就像大部分的框架，Vue 讓你創造可以重複使用的網頁內容區塊（稱為元件）。大部分時候，Vue 元件是用一種特殊的 HTML 樣板語法寫成的，然而在一些場景使用 HTML 語法會有限制時，你可以使用 JSX 或是 Javascript 函式來定義你的元件。

+ +

當你閱讀這份教程時，你可以在其他分頁打開 Vue 指南 以及 API 文件，以方便參考更多資訊。
+ 如果你想要找一份好的（可能有些偏見）文件探討 Vue 與其他框架的比較，請參見 Vue 指南：對比其他框架。

+ +

安裝

+ +

如果要在既有的專案中使用 Vue，你可以把以下任一個 <script> 標籤加到你的頁面中，這樣你就可以開始在專案中使用 Vue，這也是為什麼 Vue 宣稱自己是一個漸進式的框架。它提供了一個很好的機會，你可以把一些使用函式庫（像是 JQuery）的專案轉變成使用 Vue，如此一來，你就可以使用很多 Vue 的核心功能，像是屬性、客製化元件以及資料管理。

+ + + +

然而，以上方法有一些限制。若要建置一些較複雜的應用程式，你將需要使用 Vue NPM 套件。 這讓你可以使用 Vue 的進階功能且可以使用打包器像是 WebPack。為了讓使用 Vue 建置應用程式變得更容易，可以使用 CLI 來精簡化開發流程。如果要使用 npm 套件 & CLI，你將需要：

+ +
    +
  1. 安裝 Node.js 8.11+
    2. +
  2. npm 或 yarn
    3. +
+ +
+

注意：如果你沒有安裝以上工具，請參考關於安裝 npm 及 Node.js。

+
+ +

在你的終端機執行以下命令來安裝 CLI：

+ +
npm install --global @vue/cli
+ +

或者你比較喜歡使用 yarn：

+ +
yarn global add @vue/cli
+ +

安裝完 CLI 後，在你想要創建專案的資料夾內開啟終端機然後執行 vue create <project-name> 來初始化專案。CLI 將會給你一連串專案組態，有些設定有預設值，而你可以更改成你自己的設定。這些選項讓你可以在專案裡配置 TypeScript、linting、vue-router、Testing 等等。

+ +

之後我們會介紹如何使用它。

+ +

初始化一個新專案

+ +

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:

+ +
    +
  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. +
+ +

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

+ +

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.

+ +
+

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

+
+ +

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:

+ + + +
+

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).

+
+ +

.vue files (single file components)

+ +

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.

+ +

While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in .vue. 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.

+ +

As a bonus, projects created with the Vue CLI are configured to use .vue files with Webpack out of the box. In fact, if you look inside the src folder in the project we created with the CLI, you'll see your first .vue file: App.vue.

+ +

Let's explore this now.

+ +

App.vue

+ +

Open your App.vue file — you’ll see that it has three parts: <template>, <script>, and <style>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.

+ +

<template> 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.

+ +
+

Note: By setting the lang attribute on the <template> tag, you can use Pug template syntax instead of standard HTML — <template lang="pug">. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.

+
+ +

<script> contains all of the non-display logic of your component. Most importantly, your <script> 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 render() function.

+ +

In the case of App.vue, our default export sets the name of the component to App and registers the HelloWorld component by adding it into the components 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.

+ +
import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'App',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};
+ +
+

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">.

+
+ +

<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.

+ +
+

Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a lang attribute to the <style> tag so that the contents can be processed by Webpack at build time. For example, <style lang="scss"> will allow you to use SCSS syntax in your styling information.

+
+ +

在本地端運行應用程式

+ +

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 serve command to the project’s package.json file as an npm script, so you can easily run it.

+ +

In your terminal, try running npm run serve (or yarn serve if you prefer yarn). Your terminal should output something like the following:

+ +
INFO  Starting development server...
+98% after emitting CopyPlugin
+
+ DONE  Compiled successfully in 18121ms
+
+  App running at:
+  - Local:   <http://localhost:8080/>
+  - Network: <http://192.168.1.9:8080/>
+
+  Note that the development build is not optimized.
+  To create a production build, run npm run build.
+ +

If you navigate to the “local” address in a new browser tab (this should be something like http://localhost:8080 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.

+ +

default vue app render, with vue logo, welcome message, and some documentation links

+ +

Making a couple of changes

+ +

Let's make our first change to the app — we’ll delete the Vue logo. Open the App.vue file, and delete the <img> element from the template section:

+ +
<img alt="Vue logo" src="./assets/logo.png">
+ +

If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the HelloWorld component from our template.

+ +

First of all delete this line:

+ +
<HelloWorld msg="Welcome to Your Vue.js App"/>
+ +

If you save your App.vue 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 <script> element that import and register the component:

+ +

Delete these lines now:

+ +
import HelloWorld from './components/HelloWorld.vue'
+ +
components: {
+  HelloWorld
+}
+ +

Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <template>.

+ +

Let’s add a new <h1> inside <div id="app">. 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:

+ +
<template>
+  <div id="app">
+    <h1>To-Do List</h1>
+  </div>
+</template>
+ +

App.vue will now show our heading, as you'd expect.

+ +

總結

+ +

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.

+ +

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.

+ +

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.

+ +

{{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")}}

+ +

在本模組

+ + 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 Binary files /dev/null and b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/vue-default-app.png differ -- cgit v1.2.3-54-g00ecf