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

時間  2021-03-26
標籤 html 前端 vue webpack git github web 面試 vue-cli npm 欄目 HTML 简体版
原文   原文鏈接
做者：Shadeed
譯者：前端小智
來源：dmitripavlutin
點贊再看，微信搜索 【大遷世界】,B站關注 【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。html

github 地址：https://github.com/qq44924588...前端

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

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

本文中咱們要作如下的內容，使用組合API構建了兩個組件。git

image

開始

有幾種不一樣的選項可用於將Vue 3添加到現有項目或建立本身的Vue 3項目。github

這裏，我用本身最喜歡的兩個選項：web

  1. Vue CLI
  2. Vite

Vue CLI

若是你用過Vue開發，那麼極可能使用了Vue CLI來設置項目。面試

首先，咱們必須確保擁有Vue CLI的最新版本，能夠經過在終端上運行 npm update -g @vue/cli 來作到這一點。vue-cli

接下來，建立項目，運行 vue create <項目名>，若是 CLI是最新的，咱們就能夠選擇Vue 3。npm

image.png

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

cd <項目我>
npm run serve

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

image.png

Vite

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

爲何使用 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 –咱們應該看到如下應用程序：

image.png

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

1.將項目打包到生產中

Vite的一個目標是使Vue的開發和生產儘量容易。雖然在開發過程當中沒有捆綁，可是將你的項目捆綁到生產中是很是容易的。

你所要作的就是運行npm run build。

若是查看package.json，實現是運行 vite build –與其餘構建過程同樣，打包後會放在dist文件中。

image.png

2.asset 路徑

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

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

image.png

3.內置 Typescript 支持

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

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

理解 Vue3 組件

如今咱們已經設置好了Vue 3應用程序，而且理解了Vue 3 Vite工具，讓咱們來看看這些組件是如何工做的。

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

這容許咱們建立更多模塊化、可讀性和可伸縮性的代碼，由於單個特性的代碼均可以在代碼的一個區域中編寫。

image.png

若是打開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得到了響應式數據。

image

很好！接下來，咱們在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>

image

向 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方法，就會發現它接受兩個參數。

  1. props – 包含傳遞給組件的全部 props
  2. 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>

就這~

![上傳中...]()

image

Vue3 生命週期鉤子

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

image.png

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

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

總結

Vue 3中有不少很棒的功能，這些功能對於建立可擴展的Vue應用程序很是有用。

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

完~，我是刷碗智，我要去刷碗了，咱們下期見~

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://learnue.co/2020/12/se...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程