Vue3?基礎概念與環(huán)境搭建過程詳解
前言
首先需要提醒大家的是，Vue2 已經(jīng)在2023年停止維護，為了能更好地適應前端開發(fā)的發(fā)展趨勢以及獲得更好的性能和功能，我們將從這篇文章開始進入Vue3的階段。如果對Vue2有想了解的小伙伴可以自行查詢學習。本文將帶你了解 Vue3 的基礎概念，并手把手教你完成環(huán)境搭建，為后續(xù)的階段打下堅實的基礎。
一、Vue3 簡介
Vue3 是 Vue.js 的最新主要版本，于 2020 年 9 月正式發(fā)布。它在性能、可維護性和開發(fā)體驗方面都有了顯著的改進。相比 Vue2，Vue3 的主要特點包括：
更高效的響應式系統(tǒng)：使用
Proxy替代了Object.defineProperty，解決了數(shù)組和深層嵌套對象監(jiān)聽的問題。組合式 API（Composition API）：提供了更靈活的方式來組織組件邏輯，尤其適合復雜場景下的代碼復用。
更好的 TypeScript 支持：Vue3 內(nèi)置對 TypeScript 的友好支持，使得類型推導更加準確。
體積更小，性能更高：通過 Tree-shaking 和優(yōu)化核心庫，Vue3 的體積更小，運行效率更高。
二、Vue3 基礎概念
（一）響應式系統(tǒng)的改進
Vue3 的響應式系統(tǒng)是其最重要的改進之一。在 Vue2 中，響應式依賴于 Object.defineProperty，這種方式存在以下問題：
無法監(jiān)聽對象屬性的動態(tài)添加或刪除。
對數(shù)組的操作支持有限。
Vue3 使用了 ES6 的Proxy來實現(xiàn)響應式，解決了這些問題。例如：
const handler = {
get(target, key, receiver) {
console.log(`獲取屬性: ${key}`);
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log(`設置屬性: ${key} = ${value}`);
return Reflect.set(target, key, value, receiver);
}
};
const state = new Proxy({ count: 0 }, handler);
state.count++; // 輸出：獲取屬性: count，設置屬性: count = 1
通過Proxy，Vue3 能夠全面監(jiān)聽對象和數(shù)組的變化，從而提升性能和開發(fā)體驗。
（二）組合式 API
組合式 API 是 Vue3 引入的一項重要特性，旨在解決 Vue2 中選項式 API 在復雜組件中邏輯分散的問題。它的核心思想是將相關的邏輯組合在一起，而不是按照選項（如data、methods）來組織。
示例代碼
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0); // 定義一個響應式變量
const doubleCount = computed(() => count.value * 2); // 計算屬性
function increment() {
count.value++;
}
return {
count,
doubleCount,
increment
};
}
};在這個例子中，所有與計數(shù)相關的邏輯都被集中到setup函數(shù)中，代碼更加清晰易讀
（三）更好的類型推導
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)境，它允許我們在服務器端運行 JavaScript。
根據(jù)您的操作系統(tǒng)（Windows、macOS 或 Linux），選擇對應的安裝包并下載。
安裝完成后，可以通過以下命令檢查是否安裝成功：
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ù)實際需求進行選擇。如果不確定，可以選擇默認配置。
- 進入項目目錄并安裝依賴
創(chuàng)建完成后，進入項目目錄并安裝依賴：
cd my-vue3-project npm install
- 啟動開發(fā)服務器
安裝完成后，運行以下命令啟動開發(fā)服務器：
npm run dev
啟動成功后，終端會顯示一個本地訪問地址（通常是http://localhost:5173）。打開瀏覽器訪問該地址，即可看到項目運行效果。
四、項目結(jié)構(gòu)解析
創(chuàng)建好項目后，我們來看一下 Vue3 項目的基本結(jié)構(gòu)（以默認配置為例）：
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 配置文件
關鍵文件說明
index.html
項目的基礎 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
項目的入口文件，負責初始化 Vue 應用并掛載到 DOM 上。
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');App.vue
根組件，定義了應用的整體結(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 的基礎概念，并通過Vite成功搭建了開發(fā)環(huán)境。相比于傳統(tǒng)的 Vue CLI，Vite提供了更快的開發(fā)體驗，特別適合現(xiàn)代前端項目的需求。接下來，我們將深入學習 Vue3 的更多特性和功能，逐步提升我們的開發(fā)能力。
到此這篇關于Vue3基礎概念與環(huán)境搭建的文章就介紹到這了,更多相關Vue3基礎概念與環(huán)境搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue中的methods、computed計算屬性和watch監(jiān)聽屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計算屬性和watch監(jiān)聽屬性的使用和區(qū)別,本文通過示例代碼給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
很多朋友在token過期時刷新頁面，頁面長時間未操作，再刷新頁面時，第一次彈出“token失效,請重新登錄!”提示，針對這個問題該怎么處理呢，下面小編給大家?guī)碓蚍治黾敖鉀Q方法，一起看看吧2021-07-07
基于vue.js輪播組件vue-awesome-swiper實現(xiàn)輪播圖
一般做移動端輪播圖的時候，最常用的就是Swiper插件了，而vue.js也有一個輪播組件vue-awesome-swiper，用法跟swiper相似。接下來通過本文給大家詳解講解vue.js輪播組件vue-awesome-swiper實現(xiàn)輪播圖實例代碼，需要的朋友參考下2017-03-03
自己最近做項目的時候遇到需要下載文件的需求,索性這里給總結(jié)下,這篇文章主要給大家介紹了關于Vue中下載不同文件五種常用的方式,需要的朋友可以參考下2023-09-09
淺談vue中改elementUI默認樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認樣式引發(fā)的static 與assets的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue+element表單校驗功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
vue項目使用js監(jiān)聽瀏覽器關閉、刷新及后退事件的方法
這篇文章主要給大家介紹了關于vue項目使用js監(jiān)聽瀏覽器關閉、刷新及后退事件的相關資料,文中通過代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
本文主要介紹了Vue?UI創(chuàng)建項目詳細步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Vue指令修飾符,v-bind對樣式控制的增強,computed計算屬性,watch監(jiān)視器詳解
這篇文章主要介紹了Vue指令修飾符,v-bind對樣式控制的增強,computed計算屬性,watch監(jiān)視器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
這篇文章主要介紹了vue項目中使用token的身份驗證的簡單實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03