首頁手記 Vue3學習：新手入門到實戰項目

Vue3學習：新手入門到實戰項目

標簽：

JavaScript 前端工具 Vue.js

概述

Vue3学习是一个涵盖了从环境搭建到实战项目的全面指南，帮助新手快速入门。文章详细介绍了如何搭建Vue3开发环境、使用Vue CLI创建项目以及安装必要的开发工具和依赖库。此外，还深入讲解了Vue3的组件化开发、响应式原理和生命周期钩子等内容。

Vue3学习：新手入门到实战项目

Vue3基础概念与环境搭建

介绍Vue3的基本概念

Vue.js 是一个渐进式JavaScript框架，它可以帮助我们构建动态的用户界面。Vue3 是 Vue.js 的最新版本，引入了许多新特性，如 Composition API、更快的渲染性能、更灵活的响应式系统等。Vue3 是完全向后兼容的，这意味着你可以在现有的 Vue2 项目中逐步迁移到 Vue3。

如何搭建Vue3开发环境

搭建 Vue3 开发环境主要包括以下步骤：

安装 Node.js 和 npm：确保你已经安装了 Node.js 和 npm（Node.js 包含在安装中）。
全局安装 Vue CLI：使用 Vue CLI 可以快速创建和管理 Vue 项目。
创建 Vue 项目：通过 Vue CLI 创建一个新的 Vue 项目，并选择 Vue3 作为版本。

安装 Node.js 和 npm

首先，你需要在你的计算机上安装 Node.js 和 npm。你可以从 Node.js 官方网站下载并安装最新版本。安装完成后，可以通过以下命令检查安装是否成功：

node -v
npm -v

全局安装 Vue CLI

使用 npm 安装 Vue CLI：

npm install -g @vue/cli

创建 Vue 项目

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

vue create my-vue3-project

在创建过程中，选择 Vue3 作为版本，并按照提示完成项目创建。创建完成后，你可以进入项目目录并启动开发服务器：

cd my-vue3-project
npm run serve

安装相关开发工具和依赖库

为了更好地开发 Vue3 项目，你需要安装一些开发工具和依赖库。这些包括：

Vue Devtools：一个浏览器扩展，可以帮助你调试 Vue 应用。
ESLint：一个代码检查工具，可以帮助你保持代码的一致性和质量。
Babel：一个 JavaScript 编译器，用于将现代 JavaScript 语法编译成浏览器可以理解的代码。

安装 Vue Devtools：

Vue Devtools 是一个浏览器扩展，可以从 Chrome 网上应用店或 Firefox 的附加组件仓库下载并安装。

安装 ESLint：

在项目中安装 ESLint：

npm install --save-dev eslint

安装 Babel：

在项目中安装 Babel：

npm install --save-dev @babel/core @babel/preset-env babel-loader

Vue3组件化开发

创建和使用Vue组件

Vue 组件是可复用的 Vue 实例，每个组件都有自己的数据、模板、DOM 和事件处理程序。你可以通过 Vue CLI 自动生成一个组件，也可以手动创建一个组件。

手动创建一个组件

在 src/components 目录下创建一个新的文件，例如 HelloWorld.vue，然后定义组件：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

在其他组件中使用创建的组件

在其他组件中使用 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>

传递组件参数（prop）

组件参数（prop）是父组件传递给子组件的数据。在 HelloWorld.vue 中，我们定义了一个 prop message，它将通过父组件传递数据。

在父组件中传递 prop

在父组件 App.vue 中传递 prop：

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

在子组件中接收 prop

在子组件 HelloWorld.vue 中接收 prop：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

解释插槽（slot）的使用

插槽（slot）是子组件中的预留区域，父组件可以通过这些预留区域传递内容。

定义插槽

在 HelloWorld.vue 中定义一个插槽：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <slot></slot>
  </div>
</template>

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

使用插槽

在父组件 App.vue 中使用插槽：

<template>
  <div id="app">
    <HelloWorld message="Hello Vue 3!">
      <p>This is a custom slot content</p>
    </HelloWorld>
  </div>
</template>

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

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

Vue3响应式原理与生命周期钩子

深入理解Vue3的响应式系统

Vue3 使用 Proxy 替代了 Vue2 中的 Object.defineProperty。Proxy 可以更方便地拦截和定义对象属性的访问和修改，从而实现更高效的响应式系统。

响应式对象的创建

当你定义一个响应式对象（通过 ref 或 reactive 创建）时，Vue 会利用 Proxy 对象来拦截对象的属性访问和修改操作。当属性值发生变化时，Vue 会自动触发视图的更新。

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

state.count++ // 触发响应式更新

计算属性和侦听器

在 Vue3 中，你可以使用 computed 创建计算属性，以及使用 watch 创建侦听器来监听属性的变化。

import { reactive, computed, watch } from 'vue'

const state = reactive({
  count: 0
})

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

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

介绍Vue3生命周期钩子

Vue3 的生命周期钩子允许你在组件的不同生命周期阶段执行特定的代码。这些钩子包括：

setup：组件实例创建之前
onMounted：组件挂载到 DOM 后
onUpdated：组件更新后
onUnmounted：组件卸载后

使用生命周期钩子

在 Vue3 中，你可以在 setup 函数中使用生命周期钩子。

import { ref, onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    const count = ref(0)

    onMounted(() => {
      console.log('Component mounted')
    })

    onUpdated(() => {
      console.log('Component updated')
    })

    onUnmounted(() => {
      console.log('Component unmounted')
    })

    return {
      count
    }
  }
}

示例：如何在不同生命周期钩子中执行代码

假设我们有一个计数器组件，需要在不同生命周期钩子中执行特定代码。

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

<script>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    const count = ref(0)

    onMounted(() => {
      console.log('Component mounted')
    })

    onUpdated(() => {
      console.log('Component updated')
    })

    onUnmounted(() => {
      console.log('Component unmounted')
    })

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

路由与状态管理

使用Vue Router进行路由配置

Vue Router 是 Vue.js 官方支持的唯一路由器，它可以帮助你实现前端路由功能。

安装 Vue Router

npm install vue-router@next

配置路由

在项目中创建 router.js 文件来配置路由：

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

const routes = [
  { path: '/', component: Home },
  { path: '/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'

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

状态管理库Vuex的基本使用

Vuex 是一个用于 Vue.js 应用的状态管理库。它可以帮助你集中管理应用的状态，使状态管理更加方便和高效。

安装 Vuex

npm install vuex@next

配置 Vuex

创建一个 store.js 文件来配置 Vuex：

import { createStore } from 'vuex'

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

在主应用中使用 Vuex

在主应用 main.js 中引入并使用 Vuex 配置：

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

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

如何在项目中集成Vue Router和Vuex

在同一个项目中可以同时使用 Vue Router 和 Vuex，以便实现前端路由和状态管理。

创建组件并使用 Vuex

在组件中使用 Vuex：

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

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.getters.count)

    const increment = () => {
      store.dispatch('increment')
    }

    return {
      count,
      increment
    }
  }
}
</script>

Vue3项目实战

选择一个简单的项目（如待办事项列表）

待办事项列表是一个简单的小项目，可以用来练习 Vue3 的组件化开发、路由配置和状态管理。

从零开始构建项目

创建项目结构

创建项目的基本目录结构：

my-todo-app
├── src
│   ├── components
│   │   ├── TodoItem.vue
│   │   ├── TodoList.vue
│   │   └── TodoForm.vue
│   ├── router.js
│   └── main.js
├── store.js
└── package.json

安装必要的依赖

npm install vue-router@next vuex@next

配置路由

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

import { createRouter, createWebHistory } from 'vue-router'
import TodoList from '../components/TodoList.vue'
import About from '../components/About.vue'

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

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

export default router

配置 Vuex

在 store.js 中配置 Vuex：

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

export default createStore({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    },
    removeTodo(state, index) {
      state.todos.splice(index, 1)
    }
  },
  actions: {
    addTodo(context, todo) {
      context.commit('addTodo', todo)
    },
    removeTodo(context, index) {
      context.commit('removeTodo', index)
    }
  },
  getters: {
    todos: state => state.todos
  },
  plugins: [createPersistedState()]
})

创建组件

创建 TodoItem.vue 组件：

<template>
  <div class="todo-item">
    <input type="checkbox" :checked="todo.completed" @change="toggleComplete" />
    <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
    <button @click="removeTodo">Remove</button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  props: {
    todo: Object
  },
  setup(props) {
    const store = useStore()
    const todo = computed(() => props.todo)
    const toggleComplete = () => {
      props.todo.completed = !props.todo.completed
      store.dispatch('toggleComplete', props.todo)
    }
    const removeTodo = () => {
      store.dispatch('removeTodo', props.todo)
    }
    return {
      todo,
      toggleComplete,
      removeTodo
    }
  }
}
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
}
.completed {
  text-decoration: line-through;
}
</style>

创建 TodoList.vue 组件：

<template>
  <div class="todo-list">
    <TodoForm @add="addTodo" />
    <TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo" @remove="removeTodo" />
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import TodoForm from './TodoForm.vue'
import TodoItem from './TodoItem.vue'

export default {
  components: {
    TodoForm,
    TodoItem
  },
  setup() {
    const store = useStore()
    const todos = computed(() => store.getters.todos)
    const addTodo = (todo) => {
      store.dispatch('addTodo', todo)
    }
    const removeTodo = (todo) => {
      const index = todos.value.indexOf(todo)
      store.dispatch('removeTodo', index)
    }
    return {
      todos,
      addTodo,
      removeTodo
    }
  }
}
</script>

<style scoped>
.todo-list {
  padding: 10px;
}
</style>

创建 TodoForm.vue 组件：

<template>
  <form @submit.prevent="submitTodo">
    <input v-model="newTodo.text" placeholder="Add new todo" />
    <button type="submit">Add</button>
  </form>
</template>

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

export default {
  setup(props, { emit }) {
    const store = useStore()
    const newTodo = ref({ text: '', completed: false })

    const submitTodo = () => {
      if (newTodo.value.text.trim() === '') return
      store.dispatch('addTodo', { text: newTodo.value.text, completed: false })
      newTodo.value.text = ''
      emit('add', newTodo.value)
    }

    return {
      newTodo,
      submitTodo
    }
  }
}
</script>

<style scoped>
form {
  display: flex;
  padding: 5px;
}
input {
  flex: 1;
  margin-right: 10px;
}
</style>

解释每个步骤的具体实现

在 TodoList.vue 中，我们使用 v-for 指令来渲染每一个待办事项，并且通过 TodoItem 组件来显示和操作每一个待办事项。

在 TodoForm.vue 中，我们使用 v-model 来双向绑定输入框的值，并且在提交表单时将新的待办事项添加到 Vuex 中。

通过这种方式，我们实现了待办事项列表的增删操作，并且通过 Vuex 来集中管理待办事项的状态。

调试与优化

使用Vue Devtools调试Vue应用

Vue Devtools 是一个浏览器扩展，可以帮助你调试 Vue 应用。它提供了以下功能：

检查组件树：可以查看应用中的所有组件及其属性。
观察状态变化：可以观察 Vuex 的状态变化。
时间旅行：可以回退和前进到应用的不同状态。

安装 Vue Devtools

从 Chrome 网上应用店或 Firefox 的附加组件仓库下载并安装 Vue Devtools。

使用 Vue Devtools

在浏览器中打开 Vue 应用，然后打开 Vue Devtools，你可以看到应用的组件树，并且可以观察状态变化。

性能优化方法

Vue3 提供了一些性能优化的方法，包括：

优化渲染：避免不必要的渲染，例如使用 v-once 指令来避免重复渲染。
优化计算属性：避免在计算属性中执行昂贵的操作，例如调用外部库的函数。
优化事件处理：避免在事件处理函数中执行昂贵的操作，例如进行复杂的计算。

优化渲染

避免不必要的渲染：

<template>
  <div>
    <p v-if="dataLoaded">{{ data }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const dataLoaded = ref(false)
    const data = ref('')

    // 模拟加载数据
    setTimeout(() => {
      dataLoaded.value = true
      data.value = 'Data loaded'
    }, 2000)

    return {
      dataLoaded,
      data
    }
  }
}
</script>

优化计算属性

避免在计算属性中执行昂贵的操作：

import { computed } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const doubleCount = computed(() => {
      return count.value * 2
    })

    return {
      count,
      doubleCount
    }
  }
}

代码注释与版本控制实践

代码注释

代码注释是解释代码的重要部分，可以帮助其他开发者理解代码的逻辑和功能。

// 定义一个响应式对象
const state = reactive({
  count: 0
})

// 当 count 变化时触发回调函数
watch(state.count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
})

版本控制实践

使用 Git 进行版本控制是一种常见的实践。你可以使用命令行或 Git 图形界面工具来管理版本。

初始化 Git 仓库

git init
git add .
git commit -m "Initial commit"

提交代码

git add .
git commit -m "Add todo list functionality"

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

慕蓋茨4494581

手記
篇

粉絲

12

獲贊與收藏

29

關注作者，訂閱最新文章

閱讀免費教程

JavaScript 入門教程

80個小節 320821 2270

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13196 249

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue3學習：新手入門到實戰項目

介绍Vue3的基本概念

如何搭建Vue3开发环境

安装 Node.js 和 npm

全局安装 Vue CLI

创建 Vue 项目

安装相关开发工具和依赖库

创建和使用Vue组件

手动创建一个组件

在其他组件中使用创建的组件

传递组件参数（prop）

在父组件中传递 prop

在子组件中接收 prop

解释插槽（slot）的使用

定义插槽

使用插槽

深入理解Vue3的响应式系统

响应式对象的创建

计算属性和侦听器

介绍Vue3生命周期钩子

使用生命周期钩子

示例：如何在不同生命周期钩子中执行代码

使用Vue Router进行路由配置

安装 Vue Router

配置路由

在主应用中使用路由

状态管理库Vuex的基本使用

安装 Vuex

配置 Vuex

在主应用中使用 Vuex

如何在项目中集成Vue Router和Vuex

创建组件并使用 Vuex

选择一个简单的项目（如待办事项列表）

从零开始构建项目

创建项目结构

安装必要的依赖

配置路由

配置 Vuex

创建组件

解释每个步骤的具体实现

使用Vue Devtools调试Vue应用

安装 Vue Devtools

使用 Vue Devtools

性能优化方法

优化渲染

优化计算属性

代码注释与版本控制实践

代码注释

版本控制实践

初始化 Git 仓库

提交代码

閱讀免費教程