Vue3全家桶学习：从零开始的简单教程

2024/10/29 4:03:18

本文主要是介绍Vue3全家桶学习：从零开始的简单教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本文介绍了Vue3全家桶学习的全过程，包括Vue3的基础入门、安装配置、项目创建以及Vue Router和Vuex的状态管理。此外，还详细讲解了Vue3与TypeScript的结合使用，以及高效的开发实践技巧。

Vue3基础入门

Vue3简介

Vue.js 是一个渐进式JavaScript框架，用于构建用户界面。Vue 3是Vue.js的最新版本，它带来了许多改进和新特性，旨在提高应用的性能和开发体验。Vue 3引入了Composition API，提供了更灵活和强大的组件状态管理方式。此外，Vue 3的核心库体积更小，解析速度更快，并且有更好的TypeScript支持。

安装配置Vue3

安装Vue3需要先安装Node.js和npm（Node.js的包管理器）。安装完成后，可以通过以下步骤安装Vue CLI（命令行工具），并创建一个新的Vue 3项目。

安装Vue CLI
```
npm install -g @vue/cli
```
创建一个新的Vue 3项目
```
vue create my-vue3-app
```
在创建项目时，可以选择预设的模板，或自定义项目配置，包括是否使用Vue Router、Vuex、TypeScript等。
安装Vue 3

如果选择自定义项目配置，可以手动添加Vue 3。
```
cd my-vue3-app
npm install vue@next
```
运行项目
```
npm run serve
```
这将启动开发服务器，并在浏览器中打开项目。

创建第一个Vue3项目

项目结构

创建后的项目结构如下：

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

Hello World 示例

在 src/App.vue 文件中编写一个简单的 Hello World 示例。

<template>
 <div id="app">
   <h1>{{ message }}</h1>
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
   return {
     message: 'Hello Vue 3'
   }
 }
}
</script>

<style>
#app {
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

在 src/main.js 文件中引入并使用这个组件。

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

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

运行项目
```
npm run serve
```
打开浏览器，访问 http://localhost:8080，应该能看到 "Hello Vue 3"。

Vue3的核心概念

组件：Vue 3中的组件是可重用的Vue实例，可以组合在一起构建复杂的用户界面。每个组件都有自己的模板、逻辑和样式。例如：

<template>
<div>
  <h1>{{ message }}</h1>
  <input v-model="inputValue" placeholder="请输入">
</div>
</template>

<script>
export default {
name: 'MyComponent',
data() {
  return {
    message: 'Hello Vue 3',
    inputValue: ''
  }
}
}
</script>

<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

模板：Vue 3使用单文件组件格式（.vue文件），将模板、脚本和样式封装在一起。模板是HTML结构，可以包含Vue的指令和绑定。例如：
```
<template>
<div>
  <h1>{{ message }}</h1>
  <input v-model="inputValue" placeholder="请输入">
</div>
</template>
```
指令：Vue指令是特殊的HTML属性，用于添加交互行为。例如：
```
<div v-if="seen">条件渲染</div>
<input v-model="message" placeholder="请输入">
```
指令如v-if用于条件渲染，v-model用于双向数据绑定。

Vue Router集成

什么是Vue Router

Vue Router是Vue.js的官方路由管理器，用于实现前端路由。它允许根据URL路径动态切换不同的视图组件。Vue Router支持路由参数、路由元信息、路由守卫等功能，使得页面导航更加灵活。

安装并配置Vue Router

安装Vue Router
```
npm install vue-router@next
```

创建路由配置

在 src/router.js 文件中定义路由配置。

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/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')

创建路由组件

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

<!-- src/components/Home.vue -->
<template>
 <div>
   <h1>Home Page</h1>
   <router-link to="/about">Go to About Page</router-link>
 </div>
</template>

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

<!-- src/components/About.vue -->
<template>
 <div>
   <h1>About Page</h1>
   <router-link to="/">Go to Home Page</router-link>
 </div>
</template>

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

使用 <router-view> 渲染组件

在 src/App.vue 文件中使用 <router-view> 标签渲染路由组件。
```
<template>
 <div id="app">
   <router-view></router-view>
 </div>
</template>
```

实现页面路由跳转

在组件中使用导航链接来实现页面跳转。

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

<template>
  <div>
    <h1>About Page</h1>
    <router-link to="/">Go to Home Page</router-link>
  </div>
</template>

路由参数和查询参数的使用

路由参数

在路由配置中定义带有参数的路径。

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

在组件中通过 $route.params 访问参数。

<script>
export default {
 name: 'User',
 created() {
   console.log(this.$route.params.id)
 }
}
</script>

查询参数

在路由路径中添加查询参数。

<a href="/user/123?name=John">Go to User Profile</a>

在组件中通过 $route.query 访问查询参数。

<script>
export default {
 name: 'User',
 created() {
   console.log(this.$route.query.name)
 }
}
</script>

Vuex状态管理

什么是Vuex

Vuex是Vue.js的状态管理模式，主要用于管理应用的全局状态。它提供了一个集中式的存储来管理组件之间的状态共享，使得状态管理更加清晰和高效。

创建Vuex Store

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

创建Vuex Store

在 src/store.js 文件中定义Vuex Store。

import { createStore } from 'vuex'

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

export default store

在主应用文件中引入并使用Vuex Store

在 src/main.js 文件中引入并使用Vuex Store。

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

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

使用State、Mutation和Action

State

State存储应用的状态。
```
state: {
 count: 0
}
```

Mutation

Mutation是同步更改状态的函数。

mutations: {
 increment(state) {
   state.count++
 }
}

Action

Action是可以包含异步逻辑的函数，用于操作状态。
```
actions: {
 increment({ commit }) {
   commit('increment')
 }
}
```

Getter的使用方法

Getter用于从State中获取状态。

getters: {
  count: state => state.count
}

在组件中通过store.getters.count获取状态。

<template>
  <div>
    {{ count }}
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['count'])
  }
}
</script>

Vue3与TypeScript结合

了解TypeScript

TypeScript是JavaScript的超集，增加了类型检查和静态类型支持，使得开发者可以编写更健壮的代码。TypeScript的类型系统可以帮助开发者发现潜在的错误，并在编译阶段提供代码提示和重构支持。

安装并配置TypeScript

安装TypeScript
```
npm install typescript --save-dev
```

配置 tsconfig.json

创建 tsconfig.json 文件。

{
 "compilerOptions": {
   "target": "esnext",
   "module": "esnext",
   "moduleResolution": "node",
   "strict": true,
   "jsx": "preserve",
   "sourceMap": true,
   "resolveJsonModule": true,
   "esModuleInterop": true,
   "baseUrl": "."
 },
 "include": ["src/**/*.ts", "src/**/*.vue"],
 "exclude": ["node_modules"]
}

为Vue3项目添加TypeScript支持

在 src 目录下创建 .ts 文件，并在 main.ts 文件中引入 Vue 和其他库。

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

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

使用TypeScript进行开发

在组件中使用TypeScript类型定义。

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const title = ref('Hello TypeScript')

    return {
      title
    }
  }
})
</script>

高效开发实践

使用CLI脚手架快速搭建项目

使用Vue CLI脚手架可以快速搭建一个Vue 3项目。

vue create my-vue3-app

常用的Vue插件介绍和使用

vue-router：前面已经介绍了如何使用Vue Router。
vuex：前面已经介绍了如何使用Vuex。

axios：用于发起HTTP请求。

npm install axios

使用Axios发起请求。

import axios from 'axios'

axios.get('/data')
 .then(response => {
   console.log(response.data)
 })
 .catch(error => {
   console.error(error)
 })

vue-property-decorator：用于装饰器功能。

npm install vue-property-decorator

使用装饰器。

import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class MyComponent extends Vue {
 @Prop({ type: String, default: 'Default Value' })
 title!: string
}

开发过程中的调试技巧

console.log：在组件中使用console.log调试输出数据。
```
console.log(this.$store.state.count)
```
Vue Devtools：使用Vue Devtools插件，可以在浏览器中查看组件树和状态。
TypeScript类型检查：利用TypeScript的类型检查功能，发现潜在的错误。

代码规范和项目结构管理

ESLint：用于代码风格检查。
```
npm install eslint --save-dev
```
Prettier：用于代码格式化。
```
npm install prettier --save-dev
```