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

本文详细介绍了如何从零开始使用Vue 3构建一个完整的项目，涵盖了环境搭建、组件开发、路由管理、状态管理和项目部署等关键步骤，旨在帮助开发者快速掌握Vue3项目实战。

Vue3基础入门 Vue3简介

Vue.js是一个用于构建用户界面的渐进式JavaScript框架。相比Angular和React，Vue的开发哲学更注重简洁和易用性。Vue 3是Vue.js框架的最新版本，它在性能、API设计和可维护性方面都有所提升。

Vue3与Vue2的区别

性能优化

Vue 3通过重构虚拟DOM和渲染器，显著提高了应用的渲染效率。Vue 3重新设计了响应式系统，采用了基于Proxy的响应式实现，这使得Vue 3在监听大量属性时表现得更为高效。

Composition API

Vue 3引入了Composition API，这是一个替代Options API的新API。Composition API提供了一种更灵活的方式来组织复杂逻辑，允许用户通过setup函数来定义和组合组件逻辑。

TypeScript支持改进

Vue 3对TypeScript的支持更为友好，提供了更好的类型推断和TypeScript类型定义。这使得开发者在编写Vue应用时可以更好地利用TypeScript的静态类型检查功能。

更小的体积

Vue 3的体积更小，有助于加快应用的加载速度。

Vue3项目环境搭建

安装Node.js

首先，确保系统中已经安装了Node.js。可以访问Node.js官网下载并安装最新版本的Node.js。

安装Vue CLI

Vue CLI是一个基于Vue.js的项目脚手架工具，帮助开发者快速创建和管理Vue.js项目。安装Vue CLI的步骤如下：

npm install -g @vue/cli

创建Vue项目

使用Vue CLI创建一个新的Vue 3项目：

vue create my-vue3-app

在创建过程中，可以选择使用Vue 3作为目标框架。如果选择了默认配置，Vue CLI会自动选择Vue 3作为项目的基础。

创建Vue3项目 使用Vue CLI创建项目

使用Vue CLI创建Vue 3项目后，可以使用以下命令启动开发服务器：

npm run serve

这将启动一个本地开发服务器，你可以在浏览器中访问http://localhost:8080来查看项目。

项目文件结构解析

一个典型的Vue 3项目包含以下文件和目录：

• public: 用于存放静态资源，如index.html、favicon.ico等。
• src: 包含项目的主要源代码。
  • assets: 存放静态资源，如图片、字体等。
  • components: 存放Vue组件。
  • App.vue: 应用的主组件。
  • main.js: 应用的入口文件。
  • router: 用于存放路由配置。
  • store: 用于存放状态管理配置。

Vue3组件化开发 组件的基本写法

在Vue中，组件是可重用的Vue实例，它们可以组合在一起以构建复杂的用户界面。下面是一个简单的Vue组件示例：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

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

<style scoped>
h2 {
  color: blue;
}
</style>

在这个示例中，定义了一个名为HelloWorld的组件，它有两个属性title和message，这两个属性可以通过父组件传入。

传参与接收参数

父组件向子组件传递参数

父组件可以通过props将数据传递给子组件。例如，如果父组件想要向HelloWorld组件传递title和message：

<!-- 父组件 -->
<template>
  <div>
    <HelloWorld title="欢迎" message="欢迎访问Vue3应用" />
  </div>
</template>

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

export default {
  components: {
    HelloWorld
  }
}
</script>

子组件接收参数

子组件通过定义props来接收父组件传递的数据。如下示例：

<!-- 子组件 -->
<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

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

使用 Props 和 Emits

Props

Props是父组件传递给子组件的数据属性。通过定义props属性，子组件可以接收父组件传递的数据。例如：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

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

Emits

Emits允许子组件向父组件发送自定义事件。例如，当用户点击按钮时，子组件可以触发一个自定义事件，并传递一些数据给父组件。

<template>
  <div>
    <button @click="sendData">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendData() {
      this.$emit('customEvent', '这是传递的数据')
    }
  }
}
</script>

在父组件中，可以通过监听子组件的自定义事件来接收数据：

<template>
  <div>
    <ChildComponent @customEvent="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data) // 输出: 这是传递的数据
    }
  }
}
</script>

Vue3路由的基本使用 路由的基本概念

Vue Router是Vue.js官方的路由管理器，它允许定义多个视图将URL映射到组件。Vue Router使用基于HTML5 History模式的路由，使得URL看起来像是静态页面，同时利用Vue的渲染功能来动态加载内容。

定义路由

首先，安装Vue Router：

npm install vue-router@4

在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')

路由嵌套

路由可以嵌套在一起，形成更复杂的URL结构。例如：

const routes = [
  {
    path: '/parent',
    name: 'Parent',
    component: Parent,
    children: [
      {
        path: 'child1',
        name: 'Child1',
        component: Child1
      },
      {
        path: 'child2',
        name: 'Child2',
        component: Child2
      }
    ]
  }
]

动态路由

动态路由允许你根据URL中的参数来加载不同的组件。例如：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    props: true
  }
]

在组件中使用props来获取动态参数：

<template>
  <div>
    <h2>User ID: {{ id }}</h2>
  </div>
</template>

<script>
export default {
  props: ['id'],
  created() {
    console.log('User ID:', this.id)
  }
}
</script>

Vue3状态管理 Vuex简介

Vuex是一个用于Vue.js应用的状态管理库。它可以帮助开发者更好地管理应用的状态，尤其是在构建复杂的应用时。Vuex允许开发者将状态集中管理，以保持应用的可维护性和可测试性。

安装Vuex

首先安装Vuex：

npm install vuex@next

使用Vuex进行状态管理

在src/store/index.js中定义Vuex store：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAction({ commit }) {
      commit('increment')
    },
    decrementAction({ commit }) {
      commit('decrement')
    }
  },
  getters: {
    count(state) {
      return state.count
    }
  }
})

export default store

然后在src/main.js中引入并使用store：

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

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

Vuex的模块化管理

Vuex支持模块化管理，允许开发者将store分割成多个小模块。例如：

const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAction({ commit }) {
      commit('increment')
    }
  }
}

const moduleB = {
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    setMessageAction({ commit }, message) {
      commit('setMessage', message)
    }
  }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

在组件中使用store：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="setMessage">设置消息</button>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count', 'message'])
  },
  methods: {
    ...mapActions(['incrementAction', 'setMessageAction'])
  }
}
</script>

Vue3项目部署 构建Vue项目

在发布Vue项目之前，需要先构建项目。可以通过以下命令构建项目：

npm run build

构建完成后，会在dist目录下生成一个可发布的静态文件。

部署到本地服务器

可以直接在本地搭建一个简单的HTTP服务器来运行构建后的静态文件。例如，使用Python的内置HTTP服务器：

python3 -m http.server 8000

这将启动一个服务器，可以在浏览器中访问http://localhost:8000查看应用。

发布到线上服务器

将构建后的静态文件部署到线上服务器。例如，可以将构建后的文件复制到Web服务器的根目录。

scp -r dist/* user@yourserver.com:/path/to/webroot

也可以使用Git或其他版本控制系统来管理部署过程。

配置服务器

确保服务器上的Web服务器（如Nginx或Apache）配置正确，以便能够提供静态文件。

server {
  listen 80;
  server_name yourdomain.com;

  root /path/to/webroot;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

通过以上步骤，Vue项目可以成功部署到线上服务器，并对外提供服务。

总结

本文详细介绍了如何使用Vue 3从零开始构建一个完整的应用。包括了项目环境搭建、组件化开发、路由管理、状态管理以及项目部署等关键步骤。希望读者能够通过本文快速上手Vue 3，构建出功能丰富、结构清晰的前端应用。