一、Vue 3 簡介
Vue 3 是目前web前端最流行的漸進式 JavaScript 框架之一，用于構建用戶界面。它在 Vue 2 的基礎上進行了諸多改進和優化，提供了更高效的性能、更靈活的組合式 API 以及更好的 TypeScript 支持等。
二、創建 Vue 3 項目
（一）使用 Vue CLI
- ?確保已安裝 Node.js，然后在終端中全局安裝 Vue CLI：
vue create my-vue3-project
在創建過程中，會有一系列的配置選項，例如是否使用 TypeScript、選擇 CSS 預處理器等。對于新手，可以先選擇默認配置，后續再根據項目需求進行調整。
（二）使用 Vite
- 通過以下命令創建一個基于 Vite 的 Vue 3 項目：
npm init vite@latest my-vite-vue3-project -- --template vue
cd my-vite-vue3-project npm install
三、項目結構剖析
（一）以 Vue CLI 創建的項目為例
src
main.js
（或 main.ts，如果使用 TypeScript）是項目的入口文件。在這里，會創建 Vue 應用實例并將其掛載到 HTML 頁面的特定 DOM 元素上。App.vue
是根組件，它定義了整個應用的基本布局結構，并且可以包含其他子組件。components
目錄用于存放自定義的組件，這些組件可以在不同的頁面或功能模塊中復用。
四、組件的創建與使用
（一）創建組件
- 在 components 目錄下創建一個新的 .vue 文件，比如 MyComponent.vue。
- 在 <template> 標簽內定義組件的 HTML 結構。例如：
<template><div><h2>{{ title }}</h2><p>{{ content }}</p></div></template>
- 在 <script> 標簽中，使用 export default 導出組件的配置對象。通過 data 函數返回組件的數據對象：
<script>exportdefault{data(){return{title:'My Component',content:'This is the content of my component.'};}};</script>
- 還可以在 <style> 標簽中定義組件的樣式，加上 scoped 屬性可以確保樣式僅應用于當前組件：
<style scoped> div{border:1px solid#ccc;padding:10px;} </style>
（二）使用組件
- 在需要使用組件的父組件（如 App.vue）中，首先在 <script> 標簽內導入組件：
import MyComponent from './components/MyComponent.vue';
- 然后在組件的 components 選項中注冊組件：
exportdefault{components:{MyComponent}};
- 最后在 <template> 標簽中使用組件標簽：
<template><div><MyComponent/></div></template>
五、響應式數據處理
（一）ref 的使用
ref
主要用于創建基本數據類型（如數字、字符串、布爾值等）的響應式數據。在組件的 <script> 中：
import{ ref}from'vue';exportdefault{setup(){const count=ref(0);const message=ref('Hello, Vue 3!');return{ count, message};}};
- 在模板中訪問 ref 數據時，需要使用 .value 屬性：
<template><div><p>Count: {{ count.value }}</p><p>Message: {{ message.value }}</p><button@click="count.value++">Increment Count</button></div></template>
（二）reactive 的使用
reactive
用于創建復雜數據類型（如對象、數組）的響應式數據。例如：
import{ reactive}from'vue';exportdefault{setup(){const user=reactive({name:'John',age:30,hobbies:['reading','coding']});return{ user};}};
- 在模板中可以直接訪問和修改 reactive 對象的屬性：
<template><div><p>Name: {{ user.name }}</p><p>Age: {{ user.age }}</p><p>Hobbies: {{ user.hobbies.join(', ') }}</p><button@click="user.age++">Increment Age</button></div></template>
六、生命周期鉤子
（一）組合式 API 中的生命周期鉤子
- 在 Vue 3 的組合式 API 中，有一些新的生命周期鉤子函數。例如，onMounted 鉤子在組件掛載完成后被調用。在組件的 setup 函數中使用：
import { onMounted} from 'vue';exportdefault{setup(){onMounted(()=>{console.log('Component is mounted.');});return{};}};
- 還有其他鉤子如 onUpdated（組件更新后調用）、onUnmounted（組件卸載前調用）等，可以根據項目需求在 setup 函數中引入并使用。
七、路由基礎
（一）安裝和配置 Vue Router
- 在 src 目錄下創建 router 目錄，并在其中創建 index.js（或 index.ts）文件。
- 定義路由數組，每個路由對象包含路徑 path 和對應的組件 component：
import { createRouter, createWebHistory} from'vue-router';importHomefrom'../views/Home.vue';importAboutfrom'../views/About.vue';const routes=[{path:'/',component:Home},{path:'/about',component:About}];const router=createRouter({history:createWebHistory(), routes});exportdefault router;
（二）在應用中使用路由
- 在 main.js（或 main.ts）中導入并使用路由：
import { createApp} from 'vue';import App from './App.vue';import router from './router';const app=createApp(App); app.use(router); app.mount('#app');
- 在 App.vue 的 <template> 中添加 <router-view> 標簽，用于顯示當前路由對應的組件：
<template><div><router-view></router-view></div></template>
八、狀態管理（Vuex）基礎
（一）安裝和配置 Vuex
- 在 src 目錄下創建 store 目錄，并在其中創建 index.js（或 index.ts）文件。
import{ createStore}from'vuex';const store=createStore({state(){return{count:0};},mutations:{increment(state){ state.count++;}}});exportdefault store;
（二）在組件中使用 Vuex
- 在 main.js（或 main.ts）中導入并使用 Vuex：
import { createApp} from 'vue';import App from' ./App.vue';import store from './store';const app=createApp(App); app.use(store); app.mount('#app');
- 在組件中，可以通過 this.$store（選項式 API）或者 useStore（組合式 API）來訪問和修改狀態。例如，使用組合式 API：
import { useStore} from 'vuex';export default{setup(){const store=useStore();constincrementCount=()=>{ store.commit('increment');};return{ incrementCount};}};
該文章在 2024/12/20 11:14:43 編輯過
400 186 1886
