【Vue3 教程】創建你的第一個 Vue 3 項目

2021 年 2 月 15 日 Vue 3 正式發佈! 在尤雨溪的聲明中，他宣佈了新框架中最大的變化，並談論了整個 Vue 團隊所做的出色工作。

長期以來，開發者一直在等待 Vue 3 宣佈的真正酷的特性，比如 Typescript 支持、對大型項目更好的組織、及使 Vue 應用程序更好的渲染優化。

本文中我們要做以下的內容，使用組合 API 構建了兩個組件。

開始

有幾種不同的選項可用於將 Vue 3 添加到現有項目或創建自己的 Vue 3 項目。

這裏，我用自己最喜歡的兩個選項：

Vue CLI
Vite

Vue CLI

如果你用過 Vue 開發，那麼很可能使用了 Vue CLI 來設置項目。

首先，我們必須確保擁有 Vue CLI 的最新版本，可以通過在終端上運行 npm update -g @vue/cli 來做到這一點。

接下來，創建項目，運行 vue create <項目名>，如果 CLI 是最新的，我們就可以選擇 Vue 3。

選擇了 Vue 3 選項，我們的應用程序便會構建。完成後，我們只需要進入我們的項目，然後運行我們的 Vue 應用, 該命令是：

cd <項目我>
npm run serve

現在，在瀏覽器中輸入http://localhost:8080/，就會看到我們的應用程序！

Vite

Vite (法語意爲 "快速的"，發音 /vit/) 是一種新型前端構建工具，能夠顯著提升前端開發體驗，它主要由兩部分組成：

一個開發服務器，它利用原生 ES 模塊提供了豐富的內建功能，如速度快到驚人的模塊熱更新（HMR）。
一套構建指令，它使用 Rollup 打包你的代碼，預配置輸出高度優化的靜態資源用於生產。

爲什麼使用 Vite

你現在可能會有疑問？，那麼 Vite 與現有的vue-cli到底有什麼不同呢?

由於 @ vue-cli / service 是在 webpack 之上構建的，因此它是一個模塊捆綁程序，它將在啓動，熱重載和編譯時捆綁整個 Vue 項目。

由於@vue-cli/service是在 webpack 之上構建的，因此它是一個模塊捆綁程序，它將在啓動，熱重載和編譯時捆綁整個 Vue 項目。

Webpack 的工作方式是，它通過解析應用程序中的每一個 import 和 require ，將整個應用程序構建成一個基於 JavaScript 的捆綁包，並在運行時轉換文件（例如 Sass、TypeScript、SFC）。

這都是在服務器端完成的，依賴的數量和改變後構建 / 重新構建的時間之間有一個大致的線性關係。

相反，Vite 不捆綁應用服務器端。相反，它依賴於瀏覽器對 JavaScript 模塊的原生支持（也就是 ES 模塊，是一個比較新的功能）。

瀏覽器將在需要時通過 HTTP 請求任何 JS 模塊，並在運行時進行處理。Vite 開發服務器將按需轉換任何文件（如 Sass、TypeScript、SFC）。

這種架構避免了服務器端對整個應用的捆綁，並利用瀏覽器高效的模塊處理，提供了一個明顯更快的開發服務器。

提示：當你對應用程序進行 code-split 和 tree-shake 動時，Vite 的速度會更快，因爲它只加載它需要的模塊，即使是在開發階段。這與 Webpack 不同，在 Webpack 中，代碼拆分只對生產包有利。

創建第一個 Vite 項目

運行下面命令即可：

npm init vite-app <項目名>

然後，我們只需進入我們的項目文件夾，安裝依賴項，然後使用以下命令運行我們的應用程序:

cd <項目名>
npm install
npm run dev

現在，如果我們導航到http://localhost:3000 –我們應該看到以下應用程序：

一些你應該知道的 Vue Vite 特性

1. 將項目打包到生產中

2.asset 路徑

與其他 Vue 項目設置一樣，Vite 提供了兩種引用 `asset`` 的方法。

絕對路徑 - 使用公用文件夾。這些資源使用/file.extension引用，並且在構建項目時將複製到dist文件夾的根目錄中。
相對路徑 - 例如，根據文件夾的文件結構來相對訪問src/assets文件夾中的文件。構建項目時，整個文件夾都將作爲_assets放置在dist文件夾中。

Vue3 最大的變化之一是使用 Typescript 重寫了核心庫，允許根據 IDE 進行類型檢查和更好的錯誤消息。

通過提供對.ts文件和 SFC 中的<script lang =“ ts”>的內置 Typescript 支持，Vite 再次與 Vue 3 順利集成。

理解 Vue3 組件

現在我們已經設置好了 Vue 3 應用程序，並且理解了 Vue 3 Vite 工具，讓我們來看看這些組件是如何工作的。

Vue 3 中最大的變化是引入了組合 API。在這個新的結構中，我們能夠根據特性來組織代碼，而不是僅僅通過data、computed等來分離代碼。

這允許我們創建更多模塊化、可讀性和可伸縮性的代碼，因爲單個特性的代碼都可以在代碼的一個區域中編寫。

如果打開src/components/HelloWorld.vue文件，我們將看到與我們在 Vue2 中編寫的代碼看起來相同的代碼 - 這稱爲 Options API。

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

這很棒，因爲在 Vue3 中，我們仍然可以在其中使用 vue2 的語法。

在本教程中，我們將介紹如何在新的 Composition API 中實現這一點，並從 Options API 中識別出這些變化。

組合 API 中的響應性數據

我們首先從 vue 核心庫導入一些東西，以允許我們創建響應式變量。

import { ref } from 'vue'

然後，讓我們用如下所示的setup函數替換data選項。

import { ref } from 'vue'
  export default {
    setup () {
      
      return {
       
      }
    }
  }

這個 setup 方法在組件創建時運行，在這裏我們可以定義所有需要組件使用的響應數據、計算屬性、方法等。

還有，該setup方法返回的任何內容都可以在模板中訪問。

使用 ref 創建響應式數據

爲了顯示這一點，我們在模板中使用v-model創建一個文本輸入。

<template>
   <div>
     <h2> Filter LearnVue Articles </h2>
     <input 
      type='text' 
      placeholder='Filter Search' 
      v-model='query'
    />
    {{ query }}
   </div>
</template>

我們使用ref創建響應式query變量，然後從setup方法返回它。

setup () {
      const query = ref('')

      return {
        query
      }
}

然後，如返回到應用程序，會看到我們使用 Composition API 獲得了響應式數據。

很好！接下來，我們在input中添加一個clear按鈕，看看如何在 Composition API 中創建一個方法。

組合 API 中的方法

在選項 API 中，Vue 對象中有一個完整的屬性專門用於方法。對於較大的文件，這意味着數據可能在數百行之外的方法中聲明，這使得組件更難讀取和維護。

在組合 API 中，一切都在 setup 方法中，這意味着我們可以根據特性組織代碼，甚至將通用特性提取到它們自己的代碼模塊中。

我們創建一個reset方法，它獲取我們的ref並將其設置爲一個空字符串。

setup () {
      const query = ref('')

      const reset = (evt) => {
        query.value = '' // clears the query
      }
      
      return {
        reset,
        query
      }
}

需要注意的一件事是，我們需要調用query.value才能訪問數據的值。

爲什麼？

如果我們使用console.log(query)，我們看到它不僅僅是一個字符串值，而是一個 Proxy。使用 Proxy 允許我們輕鬆地獲取數據變化，這也是爲什麼我們需要在引用上調用.value的原因。

然後，就像在選項 API 使用的一樣，我們可以在模板中添加一個按鈕，在單擊時調用這個reset方法。

<button @click='reset'> Reset </button>

向 Vue3 項目添加第二個組件

現在我們已經有了輸入和查詢數據，接着，創建一個組件顯示結果。

這個組件取名爲SearchResults.vue

要將其添加到我們的HelloWorld.vue組件中，首先必須將其導入並在我們的導出默認值中聲明它。

<script>
  import { ref } from 'vue'
  import SearchResults from './SearchResults.vue'
  export default {
    components: {
      SearchResults
    },
    // ...
  }
</script>

然後，我們可以像這樣將它添加到模板中:

// HelloWorld.vue
<template>
   <div>
     <h2> Filter LearnVue Articles </h2>
     <input 
      type='text' 
      placeholder='Filter Search' 
      v-model='query'
    />
    <br>
    <button @click='reset'> Reset </button>
    <search-results/>
   </div>
</template>

傳遞參數

Vue props 允許父組件將數據傳遞給其子組件。對於我們的例子，我們希望從HelloWorld.vue傳遞query字符串給SearchResults.vue。

// HelloWorld.vue
<search-results :query='query'/>

訪問參數

在SearchResults.vue內部，從 JSON 文件導入所有的文章信息。

import titles from '../post-data.json'
export default {
  setup (props, context) {
 
  }
}

然後，我們需要幾個步驟來訪問 props。

首先，我們必須在 props 選項中聲明它們。這告訴我們的組件需要什麼數據。

// SearchResults.vue
export default {
  props: {
    query: String
  },
  setup (props, context) {
  // ...

如果我們仔細觀察setup方法，就會發現它接受兩個參數。

props – 包含傳遞給組件的所有 props
context– 包含 attrs，slot和emit

我們將使用 props 在 setup 方法中訪問我們的 props 的值。

我們所需要做的就是使用計算屬性來過濾使文章列表。

計算屬性

// SearchResults.vue
import { computed } from 'vue'

然後，我們這樣設置它，其中我們的computed屬性接受一個getter方法。每當其中一個依賴項發生更改時，此方法將更新我們的computed屬性。

// SearchResults.vue
import { computed } from 'vue'
import titles from '../post-data.json'
export default {
  props: {
    query: String
  },
  setup (props, context) {
    
    const filteredTitles = computed(() => {
     
    })

    return {
      filteredTitles
    }
  }
}

對於這個方法，我們希望使用query過濾所有的標題。所有內容都轉換爲小寫，所以我們不必擔心大小寫。

// SearchResults.vue
const filteredTitles = computed(() => {
      return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase()))
    })

很好~

剩下要做的就是實際使用我們的模板來顯示數據! 這是使用v-for循環完成的。

// SearchResults.vue
<template>
  <div class='root'>
    <p> Showing {{ filteredTitles.length }} results for "{{ query }}" </p>
    <ul>
      <li v-for='title in filteredTitles' :key='title.Page'>
        {{ title.Name }}
      </li>
    </ul>
  </div>
</template>

就這~

Vue3 生命週期鉤子

在開始使用 Vue3 之前，還需要知道的另一件事是如何使用 Vue 生命週期鉤子。

像 Composition API 的其他部分一樣，我們必須導入我們想要使用的生命週期鉤子，並在setup方法中聲明它們。

// Lifecycle Example 
import { computed, onMounted } from 'vue'
export default {
  setup () {
    
    onMounted(() => {
      console.log('mounted')
    })
  }
}

總結

Vue 3 中有很多很棒的功能，這些功能對於創建可擴展的 Vue 應用程序非常有用。

希望本文本對你在使用 vue3 時提供一些幫助。

作者：Shadeed 譯者：前端小智來源：dmitripavlutin

原文：https://learnue.co/2020/12/setting-up-your-frst-vue3-project-vue-3-0-release/

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/vqRfJtXcXg6fS_aeX0x8jQ

開始