首页手记 Vue3项目实战：从零开始的完整指南

Vue3项目实战：从零开始的完整指南

标签：

前端工具 Vue.js

概述

本文将详细介绍如何从零开始搭建并开发一个Vue3项目，涵盖环境配置、组件使用、状态管理以及路由设置等多个方面。通过实际操作，读者可以了解Vue3的主要特性和最佳实践，从而更好地掌握Vue3项目开发的全过程。

Vue3简介

Vue.js 是一个轻量级的前端JavaScript框架，由尤雨欣（Evan You）在2014年最初发布。Vue 3是Vue的最新版本，优化了性能、API简洁性，并增加了许多新特性，如Composition API、更好的TypeScript支持等。Vue采用了响应式数据绑定和虚拟DOM技术，使得开发动态用户界面变得简单高效。

Vue3的主要特点

响应式数据绑定：Vue的数据绑定能够实时反映数据的变化，为UI界面提供动态更新的能力。
虚拟DOM：通过虚拟DOM技术来提升渲染性能，减少了DOM操作，提高了应用效率。
Composition API：Vue 3引入了Composition API，通过setup函数，可以更好地组织逻辑代码，提高代码的可读性和可维护性。
更好的TypeScript支持：Vue 3提供了更好的TypeScript支持，使得开发过程中可以更好地利用静态类型检查。

项目搭建与开发环境配置

安装Vue CLI

Vue CLI是Vue.js的官方脚手架工具，可以快速地搭建一个Vue项目的开发环境。首先，确保Node.js已安装，然后使用npm或yarn安装Vue CLI。

npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli

创建Vue项目

使用Vue CLI创建一个新的Vue项目，支持多种模板、插件预配置。这里我们使用最新的Vue 3版本来创建项目。

vue create my-vue3-project

在创建过程中选择Vue 3作为目标框架。

安装Vue Router

Vue Router是Vue.js的官方路由管理器，用于构建单页面应用。安装Vue Router。

cd my-vue3-project
npm install vue-router@next

安装Axios

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。安装Axios。

npm install axios

项目目录结构

典型的Vue项目结构如下：

my-vue3-project/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── ...
├── package.json
└── ...

启动项目

安装完成后，可以通过以下命令启动项目。

npm run serve

Vue3组件的基本使用方法

Vue组件是可复用的Vue实例，通过封装可重用的代码块来实现。每个组件都定义了自己的模板、内部数据、逻辑代码等。

创建组件

在src/components目录下创建一个名为HelloWorld.vue的文件。

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <p>Vue 3 Component Example</p>
  </div>
</template>

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

<style scoped>
/* 添加一些样式 */
</style>

在App.vue中使用组件

在src/App.vue文件中引入并使用HelloWorld组件。

<template>
  <div id="app">
    <HelloWorld message="Hello Vue 3" />
  </div>
</template>

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

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

<style>
/* 添加一些样式 */
</style>

数据绑定与事件绑定

使用v-bind指令绑定数据，v-on指令绑定事件。

<template>
  <div id="app">
    <button v-on:click="increment">点击增加</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

使用Composition API创建和使用组件

在Vue 3中，Composition API提供了更灵活的组件逻辑组织方式。下面是一个使用Composition API创建和使用组件的例子。

创建一个使用Composition API的组件

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

<script>
import { ref } from 'vue'

export default {
  name: 'CompositionComponent',
  setup() {
    const message = ref('Hello from Composition API')
    return { message }
  }
}
</script>

<style scoped>
/* 添加一些样式 */
</style>

在App.vue中引入并使用Composition API组件

<template>
  <div id="app">
    <CompositionComponent />
  </div>
</template>

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

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

<style>
/* 添加一些样式 */
</style>

状态管理与响应式原理

Vue3的响应式系统

Vue的响应式系统基于ES6的Proxy和Reflect API。Vue会创建一个观察者，当数据变化时，自动触发更新逻辑。

使用Composition API的响应式

在Vue 3中，Composition API提供了ref和reactive来创建响应式数据。

import { reactive, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const state = reactive({
      message: 'Hello, Composition API'
    })

    function increment() {
      count.value++
    }

    return {
      count,
      state,
      increment
    }
  }
}

Vuex介绍与基本使用

Vuex是一个专为Vue.js应用开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证可预测性。

安装Vuex

npm install vuex@next --save

创建Vuex Store

创建一个src/store/index.js文件来定义Vuex store。

import { createStore } from 'vuex'

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

处理异步操作

在实际应用中，可能会遇到异步操作，如数据获取。Vuex提供了actions来处理这类操作。下面展示如何在Vuex中处理一个异步请求的例子。

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    async fetchData({ commit }) {
      // 模拟异步操作
      const response = await fetch('https://api.example.com/data')
      const data = await response.json()
      commit('increment', data)
    }
  },
  getters: {
    count: state => state.count
  }
})

在Vue项目中使用Vuex

在main.js中引入并使用Vuex store。

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

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

在组件中通过`this.$store`访问Vuex store。

```html
<template>
  <div id="app">
    <button v-on:click="increment">点击增加</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    }
  }
}
</script>

API请求与数据处理

Axios的使用与基本API请求

Axios是一个强大的HTTP客户端，支持Promise API，用于浏览器和Node.js。

安装Axios

npm install axios

发送基本的GET请求

import axios from 'axios'

export default {
  created() {
    axios.get('https://api.example.com/data')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

发送POST请求

import axios from 'axios'

export default {
  methods: {
    addData() {
      axios.post('https://api.example.com/data', {
        name: 'John Doe',
        age: 30
      })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}

处理异步请求结果

import axios from 'axios'

export default {
  methods: {
    fetchUser(userId) {
      axios.get(`https://api.example.com/users/${userId}`)
        .then(response => {
          console.log('User fetched:', response.data)
        })
        .catch(error => {
          console.error('Failed to fetch user:', error)
        })
    }
  }
}

数据过滤与展示

使用computed属性进行数据过滤

<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ],
      searchTerm: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.toLowerCase().includes(this.searchTerm.toLowerCase()))
    }
  }
}
</script>

使用过滤器进行数据处理

在Vue 3中，过滤器已经被移除，可以使用计算属性或方法代替。

export default {
  methods: {
    formatDate(date) {
      return new Date(date).toLocaleDateString()
    }
  }
}

用户交互与表单处理

Vue事件绑定与处理

Vue事件绑定可以将DOM事件与JavaScript函数进行绑定，当事件触发时，执行相应的操作。

<template>
  <div>
    <button v-on:click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

Vue表单验证与提交

表单验证可以通过v-model指令绑定表单数据，并结合v-if或v-show指令进行验证。

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">用户名:</label>
      <input type="text" id="username" v-model="username" />
      <span v-if="!isValidUsername">用户名必须至少包含4个字符</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  computed: {
    isValidUsername() {
      return this.username.length >= 4
    }
  },
  methods: {
    submitForm() {
      if (this.isValidUsername) {
        console.log('表单提交成功')
      } else {
        console.error('表单验证失败')
      }
    }
  }
}
</script>

更复杂的用户交互和表单验证逻辑

动态事件绑定

<template>
  <div>
    <button v-on:[dynamicEventName]="$event">动态事件绑定</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicEventName: 'click'
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

复合验证逻辑

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">用户名:</label>
      <input type="text" id="username" v-model="username" />
      <span v-if="!isValidUsername">用户名必须至少包含4个字符</span>
    </div>
    <div>
      <label for="email">邮箱:</label>
      <input type="email" id="email" v-model="email" />
      <span v-if="!isValidEmail">请输入有效的邮箱地址</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: ''
    }
  },
  computed: {
    isValidUsername() {
      return this.username.length >= 4
    },
    isValidEmail() {
      return this.email.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)
    }
  },
  methods: {
    submitForm() {
      if (this.isValidUsername && this.isValidEmail) {
        console.log('表单提交成功')
      } else {
        console.error('表单验证失败')
      }
    }
  }
}
</script>

路由与导航

Vue Router的基本使用

Vue Router是Vue.js的官方路由管理器。

安装Vue Router

npm install vue-router@next --save

创建路由配置文件

创建src/router.js文件。

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../views/About.vue') }
]

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

export default router

在main.js中引入并使用路由

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

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

创建视图组件

创建src/views/Home.vue和src/views/About.vue文件。

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

页面导航

在App.vue中使用导航链接。

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

路由守卫与动态路由配置

路由守卫

路由守卫是Vue Router提供的一种机制，用于在导航过程中进行一些操作，如权限验证、数据预取等。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

router.beforeEach((to, from, next) => {
  // 预验证逻辑
  if (to.path === '/about') {
    console.log('导航到了about页面')
  }
  next()
})

export default router

动态路由配置

动态路由可以在运行时根据某些条件动态地添加或移除路由。

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  {
    path: '/user/:id',
    component: () => import('../views/User.vue'),
    props: true
  }
]

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

export default router

项目部署与调试

项目打包与部署

打包项目

使用Vue CLI的命令来打包项目。

npm run build

在dist目录生成打包后的文件，可以用于部署到服务器或静态文件托管服务。

部署到服务器

将dist目录中的文件上传到服务器，可以通过FTP、SCP等工具上传。

部署到静态文件托管服务

可以使用GitHub Pages、Netlify等静态文件托管服务。

调试技巧与常见问题解决

使用Vue Devtools

Vue Devtools是Chrome和Firefox浏览器的插件，用于调试Vue应用。可以查看组件树、状态管理、路由等。

使用console.log

打印变量和状态的变化，帮助追踪问题。

调试组件逻辑

使用debugger语句，配合Chrome DevTools进行断点调试。

export default {
  methods: {
    handleClick() {
      debugger
      console.log('按钮被点击了')
    }
  }
}

常见问题排查

组件未渲染：检查组件是否正确引入，并且父组件是否正确使用。
响应式数据未更新：检查是否正确使用ref或reactive，确保数据是响应式的。
表单验证失败：检查输入是否满足验证条件。
路由导航问题：检查路由配置是否正确，路由守卫是否阻碍了导航。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

LEATH

手记
篇

粉丝

93

获赞与收藏

469

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31629 354

网络编程入门教程

20个小节 12989 244

Pandas 入门教程

25个小节 19123 359

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3项目实战：从零开始的完整指南

Vue3的主要特点

安装Vue CLI

创建Vue项目

安装Vue Router

安装Axios

项目目录结构

启动项目

创建组件

在App.vue中使用组件

数据绑定与事件绑定

使用Composition API创建和使用组件

创建一个使用Composition API的组件

在App.vue中引入并使用Composition API组件

Vue3的响应式系统

使用Composition API的响应式

Vuex介绍与基本使用

安装Vuex

创建Vuex Store

处理异步操作

在Vue项目中使用Vuex

Axios的使用与基本API请求

安装Axios

发送基本的GET请求

发送POST请求

处理异步请求结果

数据过滤与展示

使用computed属性进行数据过滤

使用过滤器进行数据处理

Vue事件绑定与处理

Vue表单验证与提交

更复杂的用户交互和表单验证逻辑

动态事件绑定

复合验证逻辑

Vue Router的基本使用

安装Vue Router

创建路由配置文件

在main.js中引入并使用路由

创建视图组件

页面导航

路由守卫与动态路由配置

路由守卫

动态路由配置

项目打包与部署

打包项目

部署到服务器

部署到静态文件托管服务

调试技巧与常见问题解决

使用Vue Devtools

使用console.log

调试组件逻辑

常见问题排查

阅读免费教程