Vue3学习：从入门到初级实战教程

2024/10/10 0:02:53

本文主要是介绍Vue3学习：从入门到初级实战教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

本文提供了从入门到实战的Vue3学习教程，涵盖环境搭建、组件开发、路由配置、状态管理和实战项目等内容。通过详细步骤和示例代码，帮助读者快速掌握Vue3的关键概念和使用技巧。适合希望深入了解Vue3的新手开发者。在Vue3学习过程中，你将学会如何创建和管理Vue3项目，开发复杂界面组件，并进行状态管理和路由导航。

Vue3简介与环境搭建

什么是Vue3

Vue3是Vue.js的最新版本，它为现代前端应用提供了更强大的功能和更好的性能。Vue3引入了许多重要的改进，例如新的组件API、Composition API、更高效的渲染机制等。这些改进使得Vue3在开发大型应用和构建复杂的用户界面时更加高效和灵活。

安装Node.js和Vue CLI

要开始使用Vue3，首先需要安装Node.js和Vue CLI。

安装Node.js

访问Node.js官网下载最新版本的Node.js安装包。
运行安装程序，安装Node.js。

完成Node.js安装后，可以通过以下命令验证安装是否成功：

node -v
npm -v

安装Vue CLI

Vue CLI是Vue.js的官方脚手架工具，用于快速创建和管理Vue项目。

打开终端，使用以下命令全局安装Vue CLI：
```
npm install -g @vue/cli
```
通过以下命令验证Vue CLI是否安装成功：
```
vue --version
```

创建第一个Vue3项目

使用Vue CLI创建一个新的Vue3项目。

打开终端，执行以下命令创建一个新项目：
```
vue create my-vue3-project
```
在创建项目过程中，选择使用Vue3。如果使用默认配置，可以直接选择“Use Vue 3”选项。

项目结构

创建项目后，项目文件夹通常包含以下文件和文件夹：

my-vue3-project/
├── .git/
├── .gitignore
├── babel.config.js
├── package.json
├── public/
├── README.md
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
└── yarn.lock

项目运行与调试

创建项目后，可以通过以下步骤来运行和调试项目。

进入项目文件夹：
```
cd my-vue3-project
```
安装项目依赖：
```
npm install
```
启动开发服务器：
```
npm run serve
```
打开浏览器，访问http://localhost:8080/来查看应用。在开发过程中，可以通过在浏览器开发者工具中设置断点来调试代码，例如在App.vue中设置断点来追踪数据变化。

基础组件开发

组件的基本概念

在Vue中，组件是可复用的代码块，每个组件可以包含自己的模板、样式和逻辑。组件可以被看作是一组独立的、可组合的构建块，它们可以被组合在一起形成更复杂的界面。

创建和使用组件

创建组件的最简单方法是在src/components文件夹中创建一个新的.vue文件，例如HelloWorld.vue。

<template>
  <div class="hello">
    <h1>Hello, Vue3!</h1>
  </div>
</template>

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

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

在App.vue中引入并使用这个组件：

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

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

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

组件的属性与事件

组件属性

组件属性是传递给组件的数据，可以在父组件中定义，并在子组件中使用。

<!-- 父组件 -->
<template>
  <div id="app">
    <Person :name="name" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Person
  },
  data() {
    return {
      name: 'John'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div class="person">
    <p>Name: {{ name }}</p>
  </div>
</template>

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

组件事件

组件事件是组件间通信的一种方式，允许父组件监听子组件触发的事件。

<!-- 父组件 -->
<template>
  <div id="app">
    <ChildComponent @child-event="onChildEvent" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  methods: {
    onChildEvent(eventData) {
      console.log('Child event received:', eventData)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div class="child-component">
    <button @click="triggerEvent">Trigger Event</button>
  </div>
</template>

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

复杂通信

处理组件间复杂通信时，可以传递复杂的对象或数组属性。例如，父组件可以传递一个对象属性给子组件，并在子组件中修改该对象的属性。

<!-- 父组件 -->
<template>
  <div id="app">
    <ComplexComponent :user="user" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ComplexComponent
  },
  data() {
    return {
      user: {
        id: 1,
        name: 'John',
        age: 25
      }
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div class="complex-component">
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
    <button @click="updateAge">Update Age</button>
  </div>
</template>

<script>
export default {
  name: 'ComplexComponent',
  props: {
    user: Object
  },
  methods: {
    updateAge() {
      this.user.age++
    }
  }
}
</script>

响应式数据绑定

数据响应机制

Vue3的响应式系统基于Proxy对象。当数据发生变化时，Vue会自动更新视图。以下是简单的响应式数据绑定示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'New Message'
    }
  }
}
</script>

使用v-model双向绑定数据

v-model指令用于在表单控件和组件中实现双向数据绑定。

<template>
  <div>
    <input v-model="inputValue" placeholder="Type something" />
    <p>Input Value: {{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>
``

### 更复杂的双向绑定
例如，在复杂表单中使用`v-model`进行双向绑定。
```vue
<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>
        Name:
        <input v-model="formData.name" type="text" />
      </label>
      <label>
        Age:
        <input v-model.number="formData.age" type="number" />
      </label>
      <button type="submit">Submit</button>
    </form>
    <p>Form Data: {{ formData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    submitForm() {
      // 处理表单提交逻辑
    }
  }
}
</script>

计算属性与侦听器

计算属性

计算属性适用于依赖于其他数据的场合。

<template>
  <div>
    <p>{{ fullName }}</p>
    <p>{{ doubleAge }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      age: 25
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    },
    doubleAge() {
      return this.age * 2
    }
  }
}
</script>

侦听器

侦听器用于监听数据变化并执行相应的操作。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search" />
    <p>Search Query: {{ searchQuery }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  watch: {
    searchQuery(newVal) {
      console.log(`Search query changed to: ${newVal}`)
    }
  }
}
</script>

路由与导航

安装Vue Router

要使用Vue Router，首先需要安装Vue Router。

npm install vue-router@next

路由配置与导航

创建路由配置

在项目根目录下创建一个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

在主应用文件中使用路由

在main.js文件中引入并使用路由配置。

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

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

页面导航

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

复杂路由配置

例如，嵌套路由和命名视图。

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/nested/:id',
    name: 'Nested',
    component: NestedView,
    props: true,
    children: [
      {
        path: 'child',
        name: 'Child',
        component: () => import('../views/ChildView.vue')
      }
    ]
  }
]

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

export default router

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link :to="{ name: 'Nested', params: { id: '1' }}">NestedView</router-link>
    <router-view />
  </div>
</template>

状态管理

Vuex简介

Vuex是一个用于Vue.js应用的状态管理模式。它提供了一个集中式的存储，使得应用中的所有组件可以共享和管理状态。

安装和配置Vuex

安装Vuex：
```
npm install vuex@next
```
创建Vuex store：
- 在项目根目录下创建一个store文件夹，并在其中创建一个index.js文件。
- 定义状态、操作、转换器等。
```
import { createStore } from 'vuex'
```
const store = createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
}
},
actions: {
increment({ commit }) {
commit('increment')
},
decrement({ commit }) {
commit('decrement')
}
},
getters: {
doubleCount(state) {
return state.count * 2
}
}
})

export default store

在主应用文件中引入并使用store。

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

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

状态管理与数据流

使用`mapState`和`mapActions`

mapState和mapActions辅助函数用于将状态和操作映射到组件中。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

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

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

复杂状态管理

处理异步状态和状态持久化。

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0,
    asyncData: null
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
    setData(state, data) {
      state.asyncData = data
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement({ commit }) {
      commit('decrement')
    },
    async fetchAsyncData({ commit }) {
      // 模拟异步操作
      setTimeout(() => {
        commit('setData', 'Async Data')
      }, 2000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

<template>
  <div>
    <p>{{ asyncData }}</p>
    <button @click="fetchData">Fetch Async Data</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['asyncData'])
  },
  methods: {
    ...mapActions(['fetchAsyncData'])
  },
  created() {
    this.fetchAsyncData()
  }
}
</script>

实战项目：构建个人博客页面

项目需求分析

构建一个简单的个人博客页面，包含以下功能：

显示文章列表
显示单篇文章详情
发表新文章
编辑和删除文章

组件拆分与功能开发

文章列表组件

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <router-link :to="`/articles/${article.id}`">{{ article.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const articles = ref([])

    onMounted(() => {
      articles.value = store.state.articles
    })

    return { articles }
  }
}
</script>

文章详情组件

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
    <router-link to="/articles/new">发表新文章</router-link>
  </div>
</template>

<script>
import { ref, onMounted, inject } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

export default {
  setup() {
    const route = useRoute()
    const store = useStore()
    const article = ref({})

    onMounted(() => {
      const articleId = route.params.id
      article.value = store.state.articles.find(a => a.id === articleId)
    })

    return { article }
  }
}
</script>

发表新文章组件

<template>
  <div>
    <h1>发表新文章</h1>
    <form @submit.prevent="submitArticle">
      <label>
        标题:
        <input v-model="article.title" type="text" />
      </label>
      <label>
        内容:
        <textarea v-model="article.content" />
      </label>
      <button type="submit">发表</button>
    </form>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const article = ref({
      id: Date.now(),
      title: '',
      content: ''
    })

    const submitArticle = () => {
      store.dispatch('addArticle', article.value)
      article.value = {
        id: Date.now(),
        title: '',
        content: ''
      }
    }

    return { article, submitArticle }
  }
}
</script>

编辑文章组件

<template>
  <div>
    <h1>编辑文章</h1>
    <form @submit.prevent="updateArticle">
      <label>
        标题:
        <input v-model="article.title" type="text" />
      </label>
      <label>
        内容:
        <textarea v-model="article.content" />
      </label>
      <button type="submit">保存</button>
    </form>
    <button @click="deleteArticle">删除</button>
  </div>
</template>

<script>
import { ref, onMounted, inject } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

export default {
  setup() {
    const route = useRoute()
    const store = useStore()
    const article = ref({})

    onMounted(() => {
      const articleId = route.params.id
      article.value = store.state.articles.find(a => a.id === articleId)
    })

    const updateArticle = () => {
      store.dispatch('updateArticle', article.value)
    }

    const deleteArticle = () => {
      store.dispatch('deleteArticle', article.value)
    }

    return { article, updateArticle, deleteArticle }
  }
}
</script>

复杂功能实现

实现文章列表的动态加载和分页功能。

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="article in paginatedArticles" :key="article.id">
        <router-link :to="`/articles/${article.id}`">{{ article.title }}</router-link>
      </li>
    </ul>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const articles = ref([])
    const paginatedArticles = ref([])
    const currentPage = ref(0)
    const pageSize = 5

    const loadArticles = async () => {
      articles.value = await store.dispatch('fetchArticles')
      paginatedArticles.value = articles.value.slice(0, pageSize)
    }

    const loadMore = () => {
      const start = currentPage.value * pageSize
      const end = start + pageSize
      paginatedArticles.value = articles.value.slice(start, end)
      currentPage.value++
    }

    onMounted(() => {
      loadArticles()
    })

    return { paginatedArticles, loadMore }
  }
}
</script>

项目部署与上线

部署Vue项目到生产环境通常涉及以下步骤：

构建项目：
```
npm run build
```
将构建输出的dist文件夹部署到生产环境服务器。
配置服务器以服务静态文件。
测试部署后的应用。

部署到Heroku示例：

安装Heroku CLI：
```
npm install -g heroku
```
登录Heroku：
```
heroku login
```
创建Heroku应用：
```
heroku create my-vue-app
```

配置Heroku应用：

heroku config:set NPM_CONFIG_PRODUCTION=false

构建和部署应用：

npm run build
git add -A
git commit -m "Build for Heroku"
git push heroku main

访问应用：
```
heroku open
```

通过以上步骤，你可以完成Vue3项目的构建、调试、组件开发、状态管理、路由配置以及项目部署。掌握了这些技能，你可以开始开发更复杂和功能丰富的Vue应用。

这篇关于Vue3学习：从入门到初级实战教程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！