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

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

标签：

Vue.js webpack vuex

本文介绍了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
```

项目结构

项目结构示例如下：

my-vue3-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── store/
│   ├── main.ts
│   ├── router.ts
│   ├── store.ts
│   ├── App.vue
├── .eslintrc.json
├── .prettierrc
├── package.json
├── tsconfig.json
└── babel.config.js

总结与进阶方向

本教程回顾

本教程介绍了如何从零开始搭建一个Vue 3项目，包括安装配置、创建第一个应用、使用Vue Router和Vuex进行状态管理、与TypeScript结合开发，以及一些高效的开发实践技巧。

Vue3全家桶学习心得分享

通过本次学习，可以体会到Vue 3的强大功能和灵活性。Composition API提供了更多的开发自由度，使得组件逻辑更加清晰。Vue Router和Vuex使得前端路由和状态管理更简单。TypeScript增加了代码的健壮性和可维护性。这些工具和框架的结合使用，使得前端开发变得更加高效和愉悦。

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

Vue3基础入门

Vue3简介

安装配置Vue3

创建第一个Vue3项目

Vue3的核心概念

Vue Router集成

什么是Vue Router

安装并配置Vue Router

实现页面路由跳转

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

Vuex状态管理

什么是Vuex

创建Vuex Store

使用State、Mutation和Action

Getter的使用方法

Vue3与TypeScript结合

了解TypeScript

安装并配置TypeScript

为Vue3项目添加TypeScript支持

使用TypeScript进行开发

高效开发实践

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

常用的Vue插件介绍和使用

开发过程中的调试技巧

代码规范和项目结构管理

总结与进阶方向

本教程回顾

Vue3全家桶学习心得分享

推荐的学习资源和下一步的学习方向

阅读免费教程

热搜

最近搜索清空

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

Vue3基础入门

Vue3简介

安装配置Vue3

创建第一个Vue3项目

Vue3的核心概念

Vue Router集成

什么是Vue Router

安装并配置Vue Router

实现页面路由跳转

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

Vuex状态管理

什么是Vuex

创建Vuex Store

使用State、Mutation和Action

Getter的使用方法

Vue3与TypeScript结合

了解TypeScript

安装并配置TypeScript

为Vue3项目添加TypeScript支持

使用TypeScript进行开发

高效开发实践

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

常用的Vue插件介绍和使用

开发过程中的调试技巧

代码规范和项目结构管理

总结与进阶方向

本教程回顾

Vue3全家桶学习心得分享

推荐的学习资源和下一步的学习方向

阅读免费教程