首页手记 Vue3项目实战：从零开始构建你的第一个Vue3应用

Vue3项目实战：从零开始构建你的第一个Vue3应用

标签：

前端工具 Vue.js 面试

概述

本文将详细介绍如何从零开始构建Vue3项目，涵盖环境搭建、组件开发、状态管理以及实战案例等方面。你将学会如何安装和配置Vue CLI，创建和管理Vue3组件，使用Vuex进行状态管理，并通过一个简单的博客应用实战案例来巩固所学知识。此外，文章还将指导你如何打包和部署Vue3项目。

Vue3基础入门

Vue3简介

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架，Vue3是Vue.js的最新版本，它在性能、API以及开发者体验方面都有所改进。Vue3的主要特性包括：

更快的响应式系统
更小的体积
更强的类型支持
更稳定的API
更好的错误处理

Vue3的安装与环境搭建

要使用Vue3开发项目，首先需要安装Node.js和Vue CLI。Node.js是一个JavaScript运行时环境，Vue CLI是一个用于Vue项目快速搭建的命令行工具。

安装Node.js

访问Node.js官网下载最新的LTS版本，按照说明安装。
安装Vue CLI

打开终端，输入以下命令安装Vue CLI：
```
npm install -g @vue/cli
```
创建Vue3项目

使用Vue CLI创建一个新的Vue3项目：
```
vue create my-vue3-project
```
在Vue CLI的选项中选择一个预设的配置或手动选择特性。选择 Vue 3 选项来确保创建的项目基于Vue3。
运行项目

进入项目目录并启动开发服务器：
```
cd my-vue3-project
npm run serve
```
现在可以在浏览器中访问http://localhost:8080查看项目。

Vue3与Vue2的区别

Vue3相对Vue2主要在以下几个方面有所改进：

组合式API

Vue2中使用的是基于选项的API，而在Vue3中引入了组合式API（Composition API），使用setup()函数来组织逻辑。这使得代码更易于理解，尤其是对于大型项目。
响应式系统

Vue3中使用了Proxy对象来监听数据的变化，这使得性能有了显著的提升。
更小的体积

Vue3的体积比Vue2小，这对于优化前端应用的加载速度非常有用。
更好的错误处理

Vue3引入了更丰富的错误处理机制，使得调试变得更加容易。

响应式基础

Vue3的响应式系统使用了Proxy对象，相比Vue2的Object.defineProperty更加高效和灵活。

响应式数据

import { reactive } from 'vue'

const state = reactive({
 count: 0
})

计算属性

import { computed } from 'vue'

const doubleCount = computed(() => state.count * 2)

侦听器

import { watch } from 'vue'

watch(() => state.count, (newValue, oldValue) => {
 console.log(`Count changed from ${oldValue} to ${newValue}`)
})

Vue3项目结构与路由配置

项目基本结构

一个Vue3项目的基本结构如下：

my-vue3-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   ├── router/
│       ├── index.js
│   └── views/
│       ├── Home.vue
│       ├── About.vue
├── package.json
├── babel.config.js
└── vue.config.js

public/：存放静态文件，如index.html。
src/：存放项目的源代码，包括组件、路由配置等。
node_modules/：存放项目依赖包。

路由的基本配置

Vue3使用vue-router来管理单页面应用（SPA）的路由。以下是基本配置步骤：

安装vue-router

在项目根目录下，使用npm安装vue-router：
```
npm install vue-router@next
```

创建路由配置文件

在src/router/index.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
 {
   path: '/',
   name: 'Home',
   component: Home
 },
 {
   path: '/about',
   name: 'About',
   component: About
 }
]

const router = createRouter({
 history: createWebHistory(),
 routes
})

export default router

在主文件中引入路由

在src/main.js中引入并使用路由配置：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

路由的动态参数和守卫

动态参数

动态参数是指通过路径传递参数。可以在路由配置中使用:paramName来定义动态参数：

{
  path: '/user/:id',
  name: 'User',
  component: User
}

然后在组件中通过this.$route.params.id来访问动态参数。

守卫

守卫用于在导航触发时执行一些逻辑，常用的有：

beforeEach：在进入每个页面之前执行。
beforeEnter：在进入特定路由之前执行。
beforeRouteLeave：在离开当前路由时执行。

示例：

router.beforeEach((to, from, next) => {
  if (to.name === 'User') {
    console.log('Entering User page')
  }
  next()
})

Vue3组件开发

组件的基础使用

组件是Vue应用的基本构造单元。组件有自己的作用域（局部变量），也能够拥有自己的生命周期。

创建组件

在src/views/目录下创建一个新的组件文件，如HelloWorld.vue：

<template>
 <div class="hello">
   <h1>Hello, {{ msg }}</h1>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 props: {
   msg: String
 }
}
</script>

<style scoped>
.hello {
 text-align: center;
}
</style>

在其他组件中使用

在其他组件中引入并使用上面创建的组件：

<template>
 <div>
   <HelloWorld msg="Welcome to Your Vue.js App"/>
 </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
 name: 'App',
 components: {
   HelloWorld
 }
}
</script>

组件之间的传值

组件可以通过属性（props）、事件（emit）或注入（provide/inject）等方式来传递数据。

使用Props

HelloWorld.vue组件接受一个msg属性：

<template>
 <div class="hello">
   <h1>Hello, {{ msg }}</h1>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 props: {
   msg: String
 }
}
</script>

在调用该组件时传递参数：

<HelloWorld msg="Hello Vue 3"/>

使用Emit

当需要从子组件向父组件传递数据时，子组件可以使用$emit触发事件：

<template>
 <button @click="sendToParent">Click me</button>
</template>

<script>
export default {
 name: 'ChildComponent',
 methods: {
   sendToParent() {
     this.$emit('child-event', 'Hello from child component')
   }
 }
}
</script>

在父组件中监听事件：

<ChildComponent @child-event="handleChildEvent"/>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
 components: {
   ChildComponent
 },
 methods: {
   handleChildEvent(message) {
     console.log(message)
   }
 }
}
</script>

使用Provide/Inject

provide和inject允许在组件树中传递数据，无需中间组件传递props。

<!-- ParentComponent.vue -->
<script>
export default {
 data() {
   return {
     message: 'Hello from parent'
   }
 },
 provide() {
   return {
     message: this.message
   }
 }
}
</script>

<!-- ChildComponent.vue -->
<script>
export default {
 inject: ['message'],
 mounted() {
   console.log(this.message)
 }
}
</script>

插槽的使用

插槽用于定义组件内容，允许在组件中插入自定义模板。

默认插槽

<template>
 <div>
   <slot></slot>
 </div>
</template>

使用组件时插入内容：

<CustomComponent>
 <p>This is my custom content</p>
</CustomComponent>

具名插槽

<template>
 <div>
   <slot name="header"></slot>
   <slot></slot>
   <slot name="footer"></slot>
 </div>
</template>

使用命名插槽：

<CustomComponent>
 <template v-slot:header>
   <h1>Header</h1>
 </template>
 <p>Main content</p>
 <template v-slot:footer>
   <h2>Footer</h2>
 </template>
</CustomComponent>

Vue3状态管理与响应式

Vuex的使用

Vuex是一个专为Vue应用设计的状态管理模式，它能够帮助你更好地管理应用的状态。

安装Vuex
```
npm install vuex@next
```

创建和使用Store

在src/store/index.js中配置store：

import { createStore } from 'vuex'

export default createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++
   }
 },
 actions: {
   increment({ commit }) {
     commit('increment')
   }
 },
 getters: {
   doubleCount: state => state.count * 2
 }
})

在组件中使用vuex

<template>
 <div>
   <p>Count: {{ count }}</p>
   <p>Double Count: {{ doubleCount }}</p>
   <button @click="increment">Increment</button>
 </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
 computed: {
   ...mapState(['count']),
   ...mapGetters(['doubleCount'])
 },
 methods: {
   ...mapActions(['increment'])
 }
}
</script>

状态管理的基本流程

创建Store

使用createStore创建一个Vuex store实例。
定义State

在store中定义应用的状态。
定义Mutations

处理状态的变更，通常用于同步操作。
定义Actions

处理异步操作，如请求接口数据。
定义Getters

计算属性，允许基于状态返回值。
在组件中使用

通过mapState、mapGetters、mapActions等辅助函数将store中的属性和方法映射到组件的计算属性和方法中。

Vue3项目实战案例

实战案例分析与设计

假设我们要开发一个简单的博客应用，包含用户登录、文章发布和文章列表等功能。

用户登录
- 登录页面：让用户输入用户名和密码。
- 登录逻辑：验证用户信息，存储用户状态。
文章发布
- 发布页面：让用户输入文章标题、内容等信息。
- 发布逻辑：将文章信息保存到数据库或本地存储。
文章列表
- 文章列表页面：展示所有文章。
- 列表逻辑：从数据库或本地存储中获取文章信息。

实战案例实现步骤

安装依赖
```
npm install axios
```

创建登录页面

<template>
 <div>
   <h1>Login</h1>
   <form @submit.prevent="handleLogin">
     <input type="text" v-model="username" placeholder="Username" required>
     <input type="password" v-model="password" placeholder="Password" required>
     <button type="submit">Login</button>
   </form>
 </div>
</template>

<script>
export default {
 data() {
   return {
     username: '',
     password: ''
   }
 },
 methods: {
   async handleLogin() {
     const response = await axios.post('/api/login', {
       username: this.username,
       password: this.password
     })
     if (response.data.success) {
       this.$router.push('/articles')
     } else {
       alert('Login failed')
     }
   }
 }
}
</script>

创建发布页面

<template>
 <div>
   <h1>Post Article</h1>
   <form @submit.prevent="handlePost">
     <input type="text" v-model="title" placeholder="Title" required>
     <textarea v-model="content" placeholder="Content" required></textarea>
     <button type="submit">Post</button>
   </form>
 </div>
</template>

<script>
export default {
 data() {
   return {
     title: '',
     content: ''
   }
 },
 methods: {
   async handlePost() {
     const response = await axios.post('/api/articles', {
       title: this.title,
       content: this.content
     })
     if (response.data.success) {
       this.$router.push('/articles')
     } else {
       alert('Post failed')
     }
   }
 }
}
</script>

创建文章列表页面

<template>
 <div>
   <h1>Articles</h1>
   <div v-for="article in articles" :key="article.id">
     <h2>{{ article.title }}</h2>
     <p>{{ article.content }}</p>
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     articles: []
   }
 },
 async mounted() {
   const response = await axios.get('/api/articles')
   this.articles = response.data.articles
 }
}
</script>

实战案例的调试与优化

调试
- 使用浏览器开发者工具检查网络请求，确保API调用正常。
- 使用console.log输出关键变量的值，确保数据正确传递。
优化
- 优化页面加载速度：减少不必要的请求，合理使用缓存。
- 优化用户体验：增加加载提示，优化交互逻辑。

Vue3项目部署与发布

项目打包发布流程

打包项目

使用npm run build命令将项目打包：
```
npm run build
```
打包完成后，会在dist/目录下生成静态文件。
部署到服务器

将dist/目录下的文件上传到服务器，配置好web服务器（如Nginx或Apache）。

部署到不同平台的方法

静态文件服务器

使用轻量级的静态文件服务器，如nginx、http-server等。
```
npm install -g http-server
http-server dist -p 8080
```
云服务提供商

使用云服务提供商（如阿里云、腾讯云等）的Web服务，上传打包后的文件。
GitHub Pages

将打包后的文件推送到GitHub仓库，设置GitHub Pages。
```
git add dist
git commit -m "deploy"
git push origin master
```

注意事项与常见问题解决

跨域问题

在开发环境中，可以通过设置代理来解决跨域问题。在vue.config.js中配置代理：
```
module.exports = {
 devServer: {
   proxy: 'http://localhost:3000'
 }
}
```
环境变量问题

使用.env文件来管理环境变量，确保不同环境下的变量正确配置。
```
VUE_APP_API_URL=http://localhost:3000
```
打包后样式问题

打包后样式可能不正确，检查是否使用了正确的CSS模块化配置。
```
css: {
 modules: true,
 extract: true
}
```