vue3 自學（一）基礎知識學習和搭建一個腳手架

一 定 會 去 旅 行發表於2021-07-28
Vue

 

兩年前曾自學過幾天vue，那時候版本還是vue2，但後來專案中一直沒用到，當時也覺得學習成本太高，便沒有繼續學習下去。初學者可以看下連結文章以前的吐槽~~

學習 Vue ，從入門到放棄

 

最近部門決定升級架構，vue便又被安排上日程，開啟官網發現版本已經升級到vue3，而且vue3跟vue2相比無論作者從底層開發還是元件搭建都有不少變化，不過優點是變得容易學了~~

官方中文文件：https://vue3js.cn/docs/zh/guide/introduction.html#vue-js-%E6%98%AF%E4%BB%80%E4%B9%88

 

基本的學習仍然是前3部分（基礎、深入元件、過渡&動畫），當然還可以先只學習前2部分。不過這些都是建立在有前端三件套（html、css、JavaScript）基礎之上的，如果你純小白，需要先學習最最基礎的前端三件套，那麼本文就不適合你。

 

個人挺喜歡runoob或w3cschool系列的基礎學習：https://www.runoob.com/vue3/vue3-intro.html

 

 

 

看完以上內容，你可能覺得自己已經會不少東西了，但實踐是檢驗真理的唯一標準，我們需要上手操作一下，不然真的很容易遺忘。

 

只是跟隨資料中的例項講解的話，並不是很有效，最好的方式是建一個專案，在專案中從無到有，在完善中實踐，將所學知識融會貫通。

 

所以我會從一個專案的搭建開始，該專案主要內容是form表格和檔案上傳，但因為是專案，所以很多東西都連貫起來了。

 

 一、搭建專案。

 

vue3搭建專案已經變得非常容易，在vue2的時候還需要手動配置webpack等，但在vue3中通過vue-cli建立專案直接將webpack4內建了，你可以先不用去學習關於webpack的知識了，減少了很多學習壓力。

 

官方介紹的使用方式有三種：

1、直接引入檔案使用：<script src="https://unpkg.com/vue@next"></script> 

2、自己npm搭建，包括webpack等都自己配置。

3、使用vue-cli安裝（或vite）。

首先官方說的是如果之前沒有任何node經驗，推薦使用第一種方式學習vue，等熟悉了vue，再學習node和webpack等方式搭建。

因為我已經有相關經驗，所以直接使用第三種方式，我就是為了逃避自己搭建webpack等~~ 

 

然後選用了vue-cli方式，因為對於vite也不熟，擔心是另一種知識需要學習，所以本次就先用vue-cli，以後再看vite有什麼優勢，因為runoob上推薦的是vite方式，當然個人感覺runoob上的vue-cli安裝方式有誤，例項中仍然使用的是webpack方式。所以此處建議用官方vue-cli方式：https://cli.vuejs.org/zh/guide/installation.html

 

vue-cli截至當前最新版本是4.x，對於node版本有要求，官方說的是node8.9以上，個人實踐8.9.3版本不行，官方推薦是node10以上，這裡我直接安裝截至當前node最新版本。

如果你是初次安裝node，或不需要保留舊版本node，可以跳過這一步，我是因為還有老系統版本需要維護，而node新版本對舊版本相容性並不好，或者是因為對應的npm安裝外掛相容不好，所以需要本地保留新舊多個版本node，這就不得不用到多版本管理工具nvm，我這裡是windows系統，所以使用nvm-windows，可以參考我上一篇文章：https://www.cnblogs.com/jying/p/15069473.html

 

安裝完node後，再安裝全域性vue-cli。對於之前使用過vue2-cli的，需要升級到最新版本，升級方式按上文官網文件升級。 

npm install -g @vue/cli

輸入 vue -V 檢視安裝的版本。如果報錯 vue : 無法載入檔案 *\vue.ps1，因為在此係統上禁止執行指令碼。有關詳細資訊，可找到對應版本node安裝目錄下的vue.ps1刪除，參考該文章解決：https://blog.csdn.net/ayunnuo/article/details/113770967 ，如果不報錯，可直接到下一步。

 

然後就可以直接建立專案了，只需要一行程式碼。https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create 

vue create 你的專案名稱

  

可能會提示以下內容，說你的映象不是國內的，可能會慢，其實前面已經設定過淘寶映象，不知道是不是因為用nvm沒找到配置的原因，既然它提示，那就選擇同意Y。如果沒有這一步提示就直接到下一步。

 

 

然後才是真正的第一步，選擇vue版本，因為現在市面上主流的專案還大多用的vue2，所以此處搭建保留了vue2的方式，而且預設放在第一行，我們這次是用vue3，使用向下箭頭 ↓ 鍵盤按鍵選中第二行，按Enter鍵開始搭建。

等待安裝完成…………

 

 

 

搭建完成之後的專案結構長下面這樣：關於vue3對於vue2專案結構的改變，強烈建議看這篇文章：https://www.cnblogs.com/ITPower/p/14510295.html 

 

新搭建的專案已經安裝好了必需的依賴包，可以直接啟動專案：

npm run serve

專案啟動後會顯示本地可訪問的路徑，其中埠號預設是從8080開始，如果8080埠已經被佔用，則會自動調整埠號為8081，如果8081被佔用，繼續增加為8082，依此類推，是不是很牛逼，我都不知道怎麼配置，現在直接給預設配置好了~~~

 

介面長這樣：

 

通過前面學習vue的前兩部分（基礎、深入元件），你已經知道了vue的基礎知識和元件基礎知識，下面我簡單介紹下自己的理解。

在我看來，每個.vue檔案都是一個元件，不管是App.vue還是components資料夾下的vue檔案，都可以被看作單獨的元件檔案，都可以通過import被引用，也都可以被作為components元件使用，我認為它們內部定義沒有區別，那就都是一樣的，即都是元件。

 

前面你自學例項的時候已看到，官方講解的例項是下面這樣：

const root = { ... }

const app = Vue.createApp(root)
app.component('my-component-name', {
  /* ... */
})
app.mount('#app')




 


而我們建立的專案入口預設是main.js，只有三行程式碼：  




import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app') 




其它的模組都嵌入在App.vue中，則App.vue也可認為是所有.vue檔案的老大，我們所有的後續vue檔案都會最終引入到App.vue中顯示。


我們摺疊程式碼後可以看到App.vue和HelloWorld.vue檔案的結構是一樣的。只是App.vue中多了對HelloWorld.vue的引用使用，所以我說所有.vue檔案都是元件。




 


現在我們去修改下HelloWorld.vue中的程式碼，只保留標題，刪除所有的樣式，剩餘程式碼如下：




<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>

</style>




儲存程式碼後，頁面自動重新整理，這便是自動熱更新~~


 


 


好了，本文先說到這裡，現在你已經搭建好了一個vue3最基本的架構了，是不是經我這麼一說，看起來非常簡單了。


 


下一篇我們開始做form表單。


 


 


 


 






相關文章