首页手记 Vue3+Vite学习：初学者快速上手指南

Vue3+Vite学习：初学者快速上手指南

标签：

前端工具 Vue.js

概述

本文将带你深入了解Vue3的核心概念和Vite的使用方法，帮助你掌握Vue3和Vite的结合技巧，包括项目结构、路由配置和状态管理等。文章还详细介绍了Vue3的新特性和性能优化，以及如何在实际项目中应用这些知识。在学习过程中，你将学会构建一个简单的博客应用，并掌握调试与优化应用性能的方法。

Vue3基础入门

Vue3的核心概念

Vue.js 是一种用于构建用户界面的渐进式框架，与其它大型框架不同，Vue 采用渐进式的设计思想，能够很好地融入现有的项目中。Vue3是Vue的最新版本，引入了许多新特性和优化，使得开发者能够更高效地开发应用。

1.1 项目结构

Vue3项目的典型结构如下：

my-vue3-project/
├── public/                   # 静态文件，例如图片、HTML文件
├── src/                      # 主目录，包括所有源代码
│   ├── assets/               # 资源文件，例如图片、字体等
│   ├── components/           # 自定义的Vue组件
│   ├── views/                # 应用的视图组件
│   ├── App.vue               # 应用的根组件
│   ├── main.js               # 应用的入口文件
│   ├── router/               # 路由配置
│   │   └── index.js          # 路由配置文件
│   ├── store/                # Vuex状态管理配置
│   │   └── index.js          # Vuex的状态管理文件
│   ├── shims-vue.d.ts        # TypeScript兼容声明文件
│   └── vite.config.ts        # Vite配置文件
├── package.json              # 项目元数据和依赖项
└── vite.config.ts            # Vite配置文件

1.2 响应式系统

响应式系统是Vue的核心特性之一，它允许开发者声明任何数据对象，并使该数据对象的改变在视图上自动反映出来。在Vue3中，响应式系统进行了重大改进，引入了Proxy代理对象，提高了性能。

1.3 模板语法

Vue3使用模板语法来定义视图，模板语法基于HTML，允许你使用{{ }}语法来插入数据，使用v-前缀的指令来实现动态行为。例如：

<div id="app">
  {{ message }}
  <p v-if="seen">现在你看到我了</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!',
    seen: true
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

1.4 Vue实例

Vue3中的应用是通过Vue实例来创建的。Vue实例是一个JavaScript对象，它包含了Vue的内部属性和方法。Vue实例的创建使用new Vue()函数，配置选项可以包括el, data, methods等。

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

app.mount('#app')

1.5 Vue3的事件系统

Vue3中的事件系统允许在组件之间传递数据和事件。通过v-on指令可以实现事件绑定，v-on:click可以绑定点击事件。

<button v-on:click="reverseMessage">反转消息</button>

methods: {
  reverseMessage() {
    this.message = this.message.split('').reverse().join('')
  }
}

Vue3的安装与配置

2.1 安装Vue CLI

Vue CLI是一个强大的CLI工具，用于快速搭建Vue应用。首先，你需要安装Node.js。然后，可以通过npm全局安装Vue CLI：

npm install -g @vue/cli

2.2 创建Vue3项目

使用Vue CLI创建Vue3项目，选择Vue 3.0版本：

vue create my-vue3-project

在选择预设时，选择Manually select features，然后选择Vue 3。项目的创建会自动完成。

2.3 运行项目

创建完成后，进入项目目录并安装依赖：

cd my-vue3-project
npm install

然后启动开发服务器：

npm run serve

Vue3组件的创建与使用

Vue3组件是构建大规模应用的基石。一个组件由template、script和style三部分组成。

2.4 创建组件

创建一个简单的组件HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="reverseMessage">反转消息</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    reverseMessage() {
      this.msg = this.msg.split('').reverse().join('')
    }
  }
}
</script>

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

2.5 在其他组件中使用

在App.vue或其他组件中使用HelloWorld组件：

<template>
  <div id="app">
    <HelloWorld msg="你好，Vue3!" />
  </div>
</template>

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

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

Vite简介与安装

了解Vite的基本概念

Vite是一个基于原生ES模块的JavaScript构建工具，提供了极快的冷启动速度和丰富的开发功能。与传统的构建工具（如Webpack）相比，Vite在开发模式下无需编译，直接访问原生模块，大大提高了开发效率。

Vite的安装与配置

3.1 安装Vite

使用npm或yarn安装Vite CLI：

npm install -g create-vite

3.2 创建Vite项目

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

create-vite my-vue3-vite-project

选择Vue作为框架，Vite会自动配置好项目结构。

3.3 运行项目

安装依赖后，启动开发服务器：

npm install
npm run dev

Vite与Vue3的集成

Vite与Vue3集成可以提供更快速的开发体验。在项目中，Vite已经准备好了与Vue3的集成，无需额外配置。

创建第一个Vue3+Vite项目

初始化Vue3+Vite项目

使用Vite CLI创建Vue3项目，选择Vue 3.0版本：

create-vite my-vue3-vite-project

选择Vue作为框架，Vite会自动配置好项目结构。

项目结构的解读

项目初始化后，结构如下：

my-vue3-vite-project/
├── public/                   # 静态文件
├── src/                      # 主目录，包括所有源代码
│   ├── assets/               # 资源文件
│   ├── components/           # 自定义的Vue组件
│   ├── views/                # 应用的视图组件
│   ├── App.vue               # 应用的根组件
│   ├── main.js               # 应用的入口文件
│   ├── router/               # 路由配置
│   │   └── index.js          # 路由配置文件
│   ├── store/                # Vuex状态管理配置
│   │   └── index.js          # Vuex的状态管理文件
│   └── shims-vue.d.ts        # TypeScript兼容声明文件
├── package.json              # 项目元数据和依赖项
└── vite.config.ts            # Vite配置文件

基本路由与状态管理的配置

4.1 配置路由

安装vue-router：

npm install vue-router@next

在router目录下创建index.js：

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

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

const app = createApp(App)

app.use(router)

app.mount('#app')

4.2 配置Vuex

安装vuex：

npm install vuex@next

在store目录下创建index.js：

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

在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')

Vue3+Vite中的常用API与特性

Composition API与Options API的区别与使用

5.1 Options API

Options API是Vue2中的主要API，包含data, methods, computed, watch等选项。例如：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

5.2 Composition API

Composition API是Vue3引入的重大特性，它允许更灵活地组织和重用逻辑。例如：

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

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue!')

    watch(message, (newVal, oldVal) => {
      console.log('Message changed from', oldVal, 'to', newVal)
    })

    return {
      message
    }
  }
}
</script>

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

5.3 生命周期钩子

Vue3提供了多个生命周期钩子，用于在组件生命周期的特定阶段执行代码。例如：

export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  }
}

5.4 响应式原理

Vue3的响应式系统基于ES6的Proxy对象，性能更高。当数据发生变化时，Vue会触发重新渲染，确保视图与数据同步。

Vue3中的新特性和性能优化

5.5 Teleport API

Teleport API允许你将DOM节点渲染到DOM树之外的任意位置。例如：

<template>
  <teleport to="body">
    <div class="modal">
      <p>这是一个模态窗口</p>
    </div>
  </teleport>
</template>

5.6 依赖缓存优化

Vue3在渲染时对依赖缓存进行了优化，减少了不必要的渲染，提高了性能。

开发实战：构建一个简单的应用

设计应用的基本架构

6.1 项目结构

构建一个简单的博客应用。项目结构如下：

my-vue3-vite-project/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── BlogPost.vue
│   │   ├── Nav.vue
│   ├── views/
│   │   ├── Home.vue
│   │   ├── About.vue
│   ├── App.vue
│   ├── main.js
│   ├── router/
│   │   └── index.js
│   ├── store/
│   │   └── index.js
│   └── shims-vue.d.ts
├── package.json
└── vite.config.ts

6.2 路由配置

在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

实现组件交互与数据流

6.3 创建博客文章组件

在components/BlogPost.vue中创建博客文章组件：

<template>
  <div class="blog-post">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  }
}
</script>

6.4 创建导航组件

在components/Nav.vue中创建导航组件：

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

6.5 使用组件

在views/Home.vue和views/About.vue中使用组件：

<template>
  <div>
    <h1>Home</h1>
    <BlogPost title="第一篇博客" content="这是第一篇博客内容。" />
    <BlogPost title="第二篇博客" content="这是第二篇博客内容。" />
  </div>
</template>

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

export default {
  components: {
    BlogPost
  }
}
</script>
``

```html
<template>
  <div>
    <h1>About</h1>
    <p>这里是关于页面。</p>
  </div>
</template>

调试与优化应用性能

6.6 使用Vue Devtools

安装Vue Devtools插件，可以帮助你调试Vue应用。

6.7 性能优化

使用v-once指令避免不必要的重新渲染，或者使用v-cache缓存组件实例。

总结与实践建议

回顾核心知识点

Vue3的核心概念包括响应式系统、模板语法、Vue实例、事件系统等。
Vite是一个基于原生ES模块的快速开发工具。
Vue3提供了Composition API和Options API，以及丰富的生命周期钩子和响应式原理。
Vue3中的新特性和性能优化包括Teleport API、依赖缓存优化等。

实践建议与资源推荐

建议多实践，构建实际应用来深入理解Vue3和Vite。
推荐学习网站：慕课网，提供丰富的Vue3和Vite相关课程。
参考官方文档和社区资源，保持更新和学习。

进阶学习的方向与途径

深入理解Vue3的新特性和最佳实践。
学习Vue3的Composition API和TypeScript结合使用。
探索Vite的更多高级配置和插件使用。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

qq_遁去的一_1

手记
篇

粉丝

7

获赞与收藏

23

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30591 343

网络编程入门教程

20个小节 12566 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空