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