首页手记 Vue3项目实战：新手入门教程

Vue3项目实战：新手入门教程

标签：

前端工具 Vue.js

概述

本文详细介绍了Vue3项目实战的相关内容，包括Vue3的核心特性、项目结构、开发环境配置、组件化开发、路由与状态管理以及部署上线的步骤。通过学习，新手开发者可以快速上手Vue3项目开发。

Vue3项目实战：新手入门教程

Vue3核心特性

Vue 3 是 Vue.js 的最新版本，它带来了许多性能和功能上的提升。以下是 Vue 3 的一些核心特性：

响应式系统重构

Vue 3 对响应式系统进行了重写，使用了 Proxy 代替 Object.defineProperty，这使得 Vue 3 在访问和修改对象属性时能够更好地处理嵌套属性的响应式更新。例如，以下代码展示了如何使用 Vue 3 的响应式系统：

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

console.log(state.count) // 输出 0
state.count++          // 修改属性
console.log(state.count) // 输出 1

更小的体积

Vue 3 的体积相比 Vue 2 缩小了约 41%，这使得应用加载更快，更加轻量。

Composition API

Composition API 是 Vue 3 新引入的一个重要特性，它允许开发者以一种更结构化、更模块化的方式来组织逻辑，这对于大型应用尤其有用。例如，以下代码展示了如何使用 Composition API：

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

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

const count = ref(0)

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

onMounted(() => {
  console.log('Component is mounted')
})
</script>

Teleport 和 Suspense 组件

Teleport 组件允许你将 DOM 结构从一个位置“传送”到另一个位置，这对于需要将 DOM 从当前渲染树移出的应用（如弹出窗口、对话框）非常有用。例如，以下代码展示了如何使用 Teleport：
```
<teleport to="#portal">
<div>This content is rendered into #portal</div>
</teleport>
```

Suspense 组件允许在异步组件加载完成前渲染一个 fallback 占位元素，这可以改善用户体验，避免组件加载时的空白。例如，以下代码展示了如何使用 Suspense：

<template>
<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>
</template>

<script setup>
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))
</script>

更好的 TypeScript 支持

Vue 3 的类型定义更加完善，支持更好的 TypeScript 体验。同时，Composition API 的类型推断也更加友好。

性能优化

Vue 3 通过对模板编译优化、响应式系统重构以及全新的渲染机制等技术手段，提升了应用的性能，特别是在组件更新时的表现更加优秀。

Vue3项目结构概述

一个典型的 Vue 3 项目结构如下：

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

public 目录：存放静态资源，比如 index.html。
src 目录：存放项目的主要代码，包括组件、路由、状态管理等。
node_modules 目录：存放项目依赖的 npm 包。

package.json 文件：项目的基本信息，包括依赖包、脚本等。例如：

{
"name": "my-vue-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
},
"dependencies": {
  "@vue/cli-service": "~4.5.0",
  "vue": "^3.0.0",
  "vue-router": "^4.0.0",
  "vuex": "^4.0.0"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-eslint": "~4.5.0",
  "@vue/cli-plugin-router": "~4.5.0",
  "@vue/cli-plugin-vuex": "~4.5.0",
  "@vue/cli-service": "~4.5.0",
  "eslint": "^6.0.0",
  "eslint-plugin-vue": "^6.0.0"
}
}

babel.config.js 文件：配置 Babel，用于转换 Vue 单文件组件：
```
module.exports = {
presets: [
  '@vue/cli-plugin-babel/preset'
]
}
```

vue.config.js 文件：Vue CLI 项目的配置文件：

module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/my-vue-app/' : '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: true,
productionSourceMap: false
}

安装及配置Vue3开发环境

安装Node.js

Vue 3 需要 Node.js 运行环境，确保你的机器上安装了 Node.js。可以通过 Node.js 官方网站下载安装。

创建 Vue 项目

安装 Vue CLI：
```
npm install -g @vue/cli
```
初始化项目：
```
vue create my-vue-app
```

在项目初始化时，可以选择 Vue 3 模板，或者选择默认配置。

进入项目目录并运行：
```
cd my-vue-app
npm run serve
```

项目目录结构解析

项目目录结构如前文所述，每个文件夹和文件的作用如下：

assets：存放静态资源，如图片、字体等。
components：存放 Vue 组件。
App.vue：应用的根组件。

main.js：应用的入口文件，通常用于初始化 Vue 实例：

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

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

router：存放路由配置文件：

index.js：路由配置文件示例：

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

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

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

export default router

store：存放状态管理配置文件：

index.js：状态管理配置文件示例：

import { createStore } from 'vuex'

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

package.json：项目配置信息，包括依赖、脚本等。
babel.config.js：配置 Babel，用于转换 Vue 单文件组件。
vue.config.js：Vue CLI 项目的配置文件。

创建第一个Vue3项目

初始化项目

使用 Vue CLI 创建 Vue 3 项目：

vue create my-vue-app

选择 Vue 3 模板，或者选择默认配置，根据提示完成项目初始化。

使用Vue CLI快速搭建项目

确保你已经安装了 Vue CLI：
```
npm install -g @vue/cli
```
使用 Vue CLI 创建新项目：
```
vue create my-vue-app
```
进入项目目录：
```
cd my-vue-app
```
运行项目：
```
npm run serve
```

项目目录结构解析

项目目录结构如前文所述，关键文件如下：

src/App.vue：应用的根组件，包含应用的主要布局。
src/main.js：应用的入口文件，初始化 Vue 实例并挂载根组件。
public/index.html：应用的 HTML 模板，包含 Vue 实例挂载点。
package.json：项目配置信息，包括依赖、脚本等。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

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

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3 App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

组件化开发

深入理解组件

在 Vue 3 中，组件是构建应用的基础。组件可以看作是一个独立的模块，负责自定义的 UI 界面，可以被复用和组合。

创建和使用组件

组件定义通常包括一个模板、一个脚本和一个可选的样式块。例如，创建一个简单的按钮组件：

<!-- Button.vue -->
<template>
  <button @click="handleClick">
    {{ buttonText }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const buttonText = ref('Click me')
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
</script>

在其他组件中使用该按钮组件：

<!-- App.vue -->
<template>
  <Button />
</template>

<script setup>
import Button from './components/Button.vue'
</script>

传值和通信

在 Vue 3 中，可以通过 props 和 emit 实现组件间的通信。例如，创建一个父组件传递数据给子组件，并在子组件中通过 emit 传递事件给父组件。

父组件传递数据给子组件

父组件：

<!-- Parent.vue -->
<template>
  <Child :message="parentMessage" @child-event="handleChildEvent" />
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const parentMessage = ref('Hello from Parent')
const handleChildEvent = (event) => {
  console.log(event)
}
</script>

子组件接收 props：

<!-- Child.vue -->
<template>
  <button @click="handleClick">
    {{ message }}
  </button>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  message: String
})

const emit = defineEmits(['child-event'])

const handleClick = () => {
  emit('child-event', 'Hello from Child')
}
</script>

路由管理与状态管理

Vue Router基础

Vue Router 是 Vue.js 官方的路由管理库，用于实现单页面应用的导航。

安装 Vue Router

npm install vue-router@next

配置路由

创建路由配置文件：

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

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

在组件中使用路由：

<!-- App.vue -->
<template>
 <router-view></router-view>
</template>

使用Vuex进行状态管理

Vuex 是 Vue.js 的状态管理库，用于集中管理应用的状态。Vue 3 中，Vuex 的使用方式基本保持不变，但需要兼容 Composition API 的情况。

安装 Vuex

npm install vuex@next

配置 Vuex Store

// src/store/index.js
import { createStore } from 'vuex'

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

在组件中使用 Vuex

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

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

在组件中使用 Vuex：

<!-- App.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const store = useStore()
const count = computed(() => store.state.count)
const doubleCount = computed(() => store.getters.doubleCount)

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

常见问题和调试技巧

常见错误及解决方法

无法找到模块：
- 确保所有依赖都已安装。
- 重新安装依赖：npm install 或 yarn install。
响应式问题：
- 确保使用 ref 或 reactive 来创建响应式变量。
- 检查模板中的绑定是否正确。
路由配置错误：
- 检查 router 文件中的路径是否正确。
- 确认组件路径正确。
状态管理问题：
- 确保状态管理配置正确。
- 检查 store 的 mutations、actions 和 getters 是否正确。
- 确保在组件中正确使用 store。

Vue Devtools调试工具的使用

Vue Devtools 是一个强大的调试工具，可以帮助开发者更好地理解 Vue 应用的内部结构和状态。

安装 Vue Devtools 扩展程序：
- 对于 Chrome 浏览器，可以在 Chrome 网上应用店搜索并安装。
- 对于 Firefox 浏览器，可以在 Firefox Add-ons 页面搜索并安装。
使用 Vue Devtools：
- 打开浏览器开发者工具（快捷键：F12）。
- 在“Elements”标签页中，点击 Vue 标签，可以看到应用的组件树。
- 在“Components”标签页中，可以看到组件的属性、状态和事件。
- 在“Store”标签页中，可以查看 Vuex 的状态。

通过这些功能，可以方便地查看和调试应用的状态，帮助开发者更快地解决问题。

项目部署与上线

构建Vue项目

构建 Vue 项目是为了将开发环境中的代码转换为生产环境可用的代码。构建后的代码可以部署到任何静态服务器上。

构建项目：
```
npm run build
```
这将在 dist 目录下生成构建文件。

构建文件结构：

dist/
├── index.html
├── index.js
└── ...

部署到服务器

将构建后的文件部署到服务器的步骤如下：

将 dist 目录下的文件复制到服务器上。
配置服务器以支持静态文件服务。
测试部署后的应用。

部署到静态服务器

使用 scp 命令将文件复制到服务器：

scp -r dist/* user@hostname:/path/to/destination/

配置服务器支持静态文件服务：

对于 Nginx 服务器，配置如下：

server {
listen 80;
server_name yourdomain.com;
root /path/to/destination;
index index.html;

location / {
 try_files $uri $uri/ /index.html;
}
}

对于 Apache 服务器，配置如下：

<VirtualHost *:80>
ServerName yourdomain.com
DocumentRoot /path/to/destination

<Directory /path/to/destination>
 AllowOverride All
 Require all granted
</Directory>

<Directory /path/to/destination/dist>
 AllowOverride All
 Require all granted
</Directory>

ErrorLog ${APACHE_LOG_DIR}/yourdomain.com_error.log
CustomLog ${APACHE_LOG_DIR}/yourdomain.com_access.log combined
</VirtualHost>

测试部署：
- 在浏览器中访问你的域名或 IP 地址，查看部署是否成功。

部署到云平台

注册云平台账号（如阿里云、腾讯云等）。
创建服务器实例。
按照上述步骤将构建后的文件上传到服务器。
配置服务器支持静态文件服务。
测试部署。

通过以上步骤，可以将 Vue 3 项目成功部署到生产环境，为用户提供稳定的服务。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

牧羊人nacy

手记
篇

粉丝

5

获赞与收藏

26

关注作者，订阅最新文章

相关文章推荐

SpringBoot知识体系+Vue3全家桶全栈项目实战

Vue3实战(05)-教你快速搭建Vue3工程化项目

【学习打卡】第8天【2022版】Vue3 系统入门与项目实战第八讲

【学习打卡】第7天【2022版】Vue3 系统入门与项目实战第七讲

【笔记】MindManager 2018新手入门教程

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue3项目实战：新手入门教程

响应式系统重构

更小的体积

Composition API

Teleport 和 Suspense 组件

更好的 TypeScript 支持

性能优化

安装Node.js

创建 Vue 项目

项目目录结构解析

初始化项目

使用Vue CLI快速搭建项目

项目目录结构解析

深入理解组件

创建和使用组件

传值和通信

父组件传递数据给子组件

Vue Router基础

安装 Vue Router

配置路由

使用Vuex进行状态管理

安装 Vuex

配置 Vuex Store

在组件中使用 Vuex

常见错误及解决方法

Vue Devtools调试工具的使用

构建Vue项目

部署到服务器

部署到静态服务器

部署到云平台

相关文章推荐

阅读免费教程