Vue3?基礎(chǔ)概念與環(huán)境搭建過程詳解
前言
首先需要提醒大家的是，Vue2 已經(jīng)在2023年停止維護(hù)，為了能更好地適應(yīng)前端開發(fā)的發(fā)展趨勢以及獲得更好的性能和功能，我們將從這篇文章開始進(jìn)入Vue3的階段。如果對Vue2有想了解的小伙伴可以自行查詢學(xué)習(xí)。本文將帶你了解 Vue3 的基礎(chǔ)概念，并手把手教你完成環(huán)境搭建，為后續(xù)的階段打下堅實的基礎(chǔ)。
一、Vue3 簡介
Vue3 是 Vue.js 的最新主要版本，于 2020 年 9 月正式發(fā)布。它在性能、可維護(hù)性和開發(fā)體驗方面都有了顯著的改進(jìn)。相比 Vue2，Vue3 的主要特點包括：
更高效的響應(yīng)式系統(tǒng)：使用
Proxy替代了Object.defineProperty，解決了數(shù)組和深層嵌套對象監(jiān)聽的問題。組合式 API（Composition API）：提供了更靈活的方式來組織組件邏輯，尤其適合復(fù)雜場景下的代碼復(fù)用。
更好的 TypeScript 支持：Vue3 內(nèi)置對 TypeScript 的友好支持，使得類型推導(dǎo)更加準(zhǔn)確。
體積更小，性能更高：通過 Tree-shaking 和優(yōu)化核心庫，Vue3 的體積更小，運行效率更高。
二、Vue3 基礎(chǔ)概念
（一）響應(yīng)式系統(tǒng)的改進(jìn)
Vue3 的響應(yīng)式系統(tǒng)是其最重要的改進(jìn)之一。在 Vue2 中，響應(yīng)式依賴于 Object.defineProperty，這種方式存在以下問題：
無法監(jiān)聽對象屬性的動態(tài)添加或刪除。
對數(shù)組的操作支持有限。
Vue3 使用了 ES6 的Proxy來實現(xiàn)響應(yīng)式，解決了這些問題。例如：
const handler = {
get(target, key, receiver) {
console.log(`獲取屬性: ${key}`);
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log(`設(shè)置屬性: ${key} = ${value}`);
return Reflect.set(target, key, value, receiver);
}
};
const state = new Proxy({ count: 0 }, handler);
state.count++; // 輸出：獲取屬性: count，設(shè)置屬性: count = 1
通過Proxy，Vue3 能夠全面監(jiān)聽對象和數(shù)組的變化，從而提升性能和開發(fā)體驗。
（二）組合式 API
組合式 API 是 Vue3 引入的一項重要特性，旨在解決 Vue2 中選項式 API 在復(fù)雜組件中邏輯分散的問題。它的核心思想是將相關(guān)的邏輯組合在一起，而不是按照選項（如data、methods）來組織。
示例代碼
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0); // 定義一個響應(yīng)式變量
const doubleCount = computed(() => count.value * 2); // 計算屬性
function increment() {
count.value++;
}
return {
count,
doubleCount,
increment
};
}
};在這個例子中，所有與計數(shù)相關(guān)的邏輯都被集中到setup函數(shù)中，代碼更加清晰易讀
（三）更好的類型推導(dǎo)
Vue3 內(nèi)置了對 TypeScript 的深度支持，開發(fā)者可以直接在組件中使用類型聲明，減少類型錯誤的發(fā)生。例如：
import { defineComponent, ref } from 'vue';
interface User {
name: string;
age: number;
}
export default defineComponent({
setup() {
const user = ref<User>({ name: 'Alice', age: 25 });
function updateAge(newAge: number) {
user.value.age = newAge;
}
return { user, updateAge };
}
});通過 TypeScript，我們可以確保數(shù)據(jù)類型的正確性，提高代碼的健壯性。
三、環(huán)境搭建
（一）安裝 Node.js
在搭建 Vue3 開發(fā)環(huán)境之前，我們需要先安裝 Node.js。Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行時環(huán)境，它允許我們在服務(wù)器端運行 JavaScript。
根據(jù)您的操作系統(tǒng)（Windows、macOS 或 Linux），選擇對應(yīng)的安裝包并下載。
安裝完成后，可以通過以下命令檢查是否安裝成功：
node -v npm -v
如果能夠正確輸出版本號，則說明安裝成功。
（二）使用 Vite 創(chuàng)建 Vue3 項目
相比于傳統(tǒng)的 Vue CLI，Vite是一個更現(xiàn)代化的構(gòu)建工具，具有更快的冷啟動速度和熱更新能力。接下來，我們將使用Vite來創(chuàng)建一個 Vue3 項目。
- 全局安裝
create-vue
打開終端或命令提示符，運行以下命令以全局安裝create-vue：
npm install -g create-vue
- 創(chuàng)建 Vue3 項目
使用以下命令創(chuàng)建一個新的 Vue3 項目：
create-vue my-vue3-project
在創(chuàng)建過程中，系統(tǒng)會提示您選擇一些配置選項，例如：
是否使用 TypeScript？
是否使用 Pinia（Vuex 的替代方案）？
是否啟用測試工具（如 Vitest 和 Cypress）？
您可以根據(jù)實際需求進(jìn)行選擇。如果不確定，可以選擇默認(rèn)配置。
- 進(jìn)入項目目錄并安裝依賴
創(chuàng)建完成后，進(jìn)入項目目錄并安裝依賴：
cd my-vue3-project npm install
- 啟動開發(fā)服務(wù)器
安裝完成后，運行以下命令啟動開發(fā)服務(wù)器：
npm run dev
啟動成功后，終端會顯示一個本地訪問地址（通常是http://localhost:5173）。打開瀏覽器訪問該地址，即可看到項目運行效果。
四、項目結(jié)構(gòu)解析
創(chuàng)建好項目后，我們來看一下 Vue3 項目的基本結(jié)構(gòu)（以默認(rèn)配置為例）：
my-vue3-project ├── node_modules/ # 項目依賴的模塊 ├── public/ # 靜態(tài)資源，如 favicon.ico 等 ├── src/ # 項目的源代碼 │ ├── assets/ # 圖片、樣式等資源 │ ├── components/ # 自定義組件 │ ├── views/ # 頁面視圖 │ ├── App.vue # 根組件 │ ├── main.ts # 入口文件（TypeScript） ├── .gitignore # Git 忽略配置 ├── index.html # 頁面模板 ├── package.json # 項目依賴和腳本配置 ├── tsconfig.json # TypeScript 配置（如果選擇使用 TypeScript） └── vite.config.ts # Vite 配置文件
關(guān)鍵文件說明
index.html
項目的基礎(chǔ) HTML 文件，所有的內(nèi)容都會被注入到這個文件中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite + Vue3</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html>
main.ts
項目的入口文件，負(fù)責(zé)初始化 Vue 應(yīng)用并掛載到 DOM 上。
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');App.vue
根組件，定義了應(yīng)用的整體結(jié)構(gòu)。
<template>
<div id="app">
<h1>Hello Vue3 with Vite</h1>
</div>
</template>
<script lang="ts">
export default {
name: 'App'
};
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
}
</style>五、總結(jié)
在本篇文章中，我們了解了 Vue3 的基礎(chǔ)概念，并通過Vite成功搭建了開發(fā)環(huán)境。相比于傳統(tǒng)的 Vue CLI，Vite提供了更快的開發(fā)體驗，特別適合現(xiàn)代前端項目的需求。接下來，我們將深入學(xué)習(xí) Vue3 的更多特性和功能，逐步提升我們的開發(fā)能力。
到此這篇關(guān)于Vue3基礎(chǔ)概念與環(huán)境搭建的文章就介紹到這了,更多相關(guān)Vue3基礎(chǔ)概念與環(huán)境搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue路由切換時取消之前的所有請求操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
今天小編就為大家分享一篇VUE實現(xiàn)強制渲染,強制更新，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
EventBus稱為事件總線,當(dāng)兩個組件屬于不同的兩個組件分支,或者兩個組件沒有任何聯(lián)系的時候,不想使用Vuex這樣的庫來進(jìn)行數(shù)據(jù)通信,就可以通過事件總線來進(jìn)行通信,這篇文章主要給大家介紹了關(guān)于Vue?eventBus事件總線封裝后再用的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue如何利用axios調(diào)用后臺api接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue select選擇框數(shù)據(jù)變化監(jiān)聽方法
今天小編就為大家分享一篇vue select選擇框數(shù)據(jù)變化監(jiān)聽方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
加入購物車，是一個登錄后的用戶 才能進(jìn)行的操作，所以需要進(jìn)行鑒權(quán)判斷，判斷用戶token是否存在，這篇文章主要介紹了Vue加入購物車判斷token添加登錄提示,需要的朋友可以參考下2023-11-11
Animate.css這個動畫庫,很多的動畫在這個庫里面都定義好了,我們用的時候可以直接使用里面的類名就可以,下面我們就來看看如何在vue項目中使用Animate.css吧2023-08-08
解決vue cli4升級sass-loader(v8)后報錯問題
這篇文章主要介紹了解決vue cli4升級sass-loader(v8)后報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue + echarts實現(xiàn)中國省份地圖點擊聯(lián)動
這篇文章主要介紹了vue + echarts實現(xiàn)中國地圖省份點擊聯(lián)動,需要的朋友可以參考下2022-04-04
最近工作中遇到了報錯,現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報錯的簡單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12