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

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

 

兩年前曾自學過幾天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表單。

 

 

 

 

相關文章