一、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
