首页手记 Vue3项目实战：从入门到上手

Vue3项目实战：从入门到上手

标签：

Vue.js

概述

本文详细介绍了如何从零开始构建Vue3项目，涵盖准备工作、基础语法、组件化开发、状态管理与路由、实战项目案例等内容，帮助开发者快速上手Vue3项目实战。文中不仅讲解了项目的创建和基本功能实现，还提供了详细的代码示例和实战演练，确保开发者能够掌握Vue3的核心特性和最佳实践。

准备工作

在开始开发Vue3项目前，需要确保已安装Node.js和Vue CLI，并按照步骤创建Vue3项目。

安装Node.js和Vue CLI

安装Node.js

首先，确保已安装Node.js。访问官方网站（https://nodejs.org/）下载最新版本的Node.js，安装完成后确保Node.js已正确安装：
```
# 检查Node.js版本
node -v
# 检查npm版本
npm -v
```
安装Vue CLI

Vue CLI是Vue.js的官方脚手架，用于快速搭建Vue应用。使用npm安装Vue CLI：
```
npm install -g @vue/cli
```
验证Vue CLI是否安装成功：
```
vue --version
```

创建Vue3项目

使用Vue CLI创建Vue3项目。首先，创建一个新文件夹用于存放项目：

mkdir my-vue3-app
cd my-vue3-app

接着，使用Vue CLI创建项目。指定使用Vue 3的版本，使用以下命令：

vue create my-vue3-app

在创建过程中，Vue CLI会提示选择预设配置，选择Manually select features，然后选择Progressive Web App、Router和Vuex等所需的功能。之后选择Vue 3作为预设版本。

项目结构简介

创建成功的Vue3项目结构如下：

my-vue3-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   ├── router/
│   │   └── index.js
│   └── store/
│       └── index.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

public/：存放静态资源，如index.html。
src/：项目的主要代码文件。App.vue是应用的主要入口组件，main.js是应用的启动文件。
router/：存放路由配置文件index.js。
store/：存放状态管理文件index.js。

Vue3基础语法

模板语法

Vue使用模板语法将HTML与JavaScript绑定。模板语法由插值表达式（{{ }}）、指令（以v-开头的属性）、和事件绑定组成。

插值表达式

插值表达式用于显示变量的值：

<div id="app">
 <span>{{ message }}</span>
</div>

相应的JS代码：

new Vue({
 el: '#app',
 data: {
   message: 'Hello Vue!'
 }
});

指令

指令是带有v-前缀的特殊属性。例如，v-bind用于动态绑定属性：

<div id="app">
 <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc" />
</div>

相应的JS代码：

new Vue({
 el: '#app',
 data: {
   imageSrc: 'https://example.com/image.jpg'
 }
});

计算属性与方法

计算属性是基于数据变量的派生值。适用于涉及复杂计算的数据。方法则用于操作数据或执行逻辑。

计算属性

<div id="app">
 <p>{{ fullName }}</p>
</div>

相应的JS代码：

new Vue({
 el: '#app',
 data: {
   firstName: 'John',
   lastName: 'Doe'
 },
 computed: {
   fullName: function() {
     return `${this.firstName} ${this.lastName}`;
   }
 }
});

方法

<div id="app">
 <button v-on:click="sayHello">Say Hello</button>
</div>

相应的JS代码：

new Vue({
 el: '#app',
 methods: {
   sayHello: function() {
     alert('Hello!');
   }
 }
});

指令和事件绑定

Vue提供多种内置指令来操作DOM元素。例如v-if、v-for、v-on等。

条件渲染

使用v-if和v-else指令来根据条件渲染元素：

<div id="app">
 <p v-if="isLoggedIn">You are logged in</p>
 <p v-else>You are not logged in</p>
</div>

相应的JS代码：

new Vue({
 el: '#app',
 data: {
   isLoggedIn: false
 }
});

列表渲染

使用v-for指令来遍历数组或对象：

<div id="app">
 <ul>
   <li v-for="item in items">{{ item }}</li>
 </ul>
</div>

相应的JS代码：

new Vue({
 el: '#app',
 data: {
   items: ['Item 1', 'Item 2', 'Item 3']
 }
});

事件绑定

使用v-on指令来绑定事件处理程序：

<div id="app">
 <button v-on:click="increment">Increment</button>
 <p>{{ count }}</p>
</div>

相应的JS代码：

new Vue({
 el: '#app',
 data: {
   count: 0
 },
 methods: {
   increment: function() {
     this.count += 1;
   }
 }
});

组件化开发

创建和使用组件

创建组件

首先，创建一个新组件文件，例如HelloWorld.vue：

<!-- HelloWorld.vue -->
<template>
 <div class="hello">
   <h1>{{ message }}</h1>
 </div>
</template>

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

<style scoped>
.hello {
 color: red;
}
</style>

在父组件中使用组件

在父组件中引入并使用新创建的组件：

<!-- App.vue -->
<template>
 <div id="app">
   <HelloWorld message="Hello from App.vue" />
 </div>
</template>

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

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

属性传递与事件监听

属性传递

在App.vue中传递属性给HelloWorld组件：

<!-- App.vue -->
<template>
 <div id="app">
   <HelloWorld message="Hello from App.vue" />
 </div>
</template>

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

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

在HelloWorld.vue中接收并使用属性：

<!-- HelloWorld.vue -->
<template>
 <div class="hello">
   <h1>{{ message }}</h1>
 </div>
</template>

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

事件监听

在HelloWorld.vue中定义一个自定义事件，并在父组件中监听该事件：

<!-- HelloWorld.vue -->
<template>
 <div class="hello">
   <h1>{{ message }}</h1>
   <button @click="sendEvent">Send Event</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 props: {
   message: String
 },
 methods: {
   sendEvent() {
     this.$emit('custom-event', 'Data sent from child component');
   }
 }
}
</script>

在App.vue中定义事件监听器：

<!-- App.vue -->
<template>
 <div id="app">
   <HelloWorld message="Hello from App.vue" @custom-event="handleEvent" />
 </div>
</template>

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

export default {
 name: 'App',
 components: {
   HelloWorld
 },
 methods: {
   handleEvent(data) {
     console.log(data);
   }
 }
}
</script>

插槽与动态组件

插槽

使用插槽来允许父组件向子组件插入内容：

<!-- HelloWorld.vue -->
<template>
 <div class="hello">
   <h1>{{ message }}</h1>
   <slot></slot>
 </div>
</template>

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

在App.vue中使用插槽：

<!-- App.vue -->
<template>
 <div id="app">
   <HelloWorld message="Hello from App.vue">
     <p>This is some custom content</p>
   </HelloWorld>
 </div>
</template>

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

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

动态组件

使用<component>标签和is属性来动态切换组件：

<!-- App.vue -->
<template>
 <div id="app">
   <button @click="componentName = 'HelloWorld'">Show HelloWorld</button>
   <button @click="componentName = 'AnotherComponent'">Show AnotherComponent</button>
   <component :is="componentName"></component>
 </div>
</template>

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

export default {
 name: 'App',
 data() {
   return {
     componentName: 'HelloWorld'
   };
 },
 components: {
   HelloWorld,
   AnotherComponent
 }
}
</script>

状态管理与路由

使用Vuex进行状态管理

安装Vuex

使用Vue CLI创建项目时，可以选择安装Vuex。如果没有安装，可以手动安装：
```
npm install vuex --save
```

创建Vuex store

创建src/store/index.js文件：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 },
 actions: {
   increment({ commit }) {
     commit('increment');
   }
 }
});

在组件中使用Vuex

在组件中使用Vuex，首先需要引入mapActions：

import { mapActions } from 'vuex';

export default {
 name: 'App',
 methods: {
   ...mapActions(['increment'])
 }
};

在模板中调用Vuex的方法：

<template>
 <div id="app">
   <p>{{ $store.state.count }}</p>
   <button @click="increment()">Increment</button>
 </div>
</template>

Vue Router的基本使用

安装Vue Router

使用Vue CLI创建项目时，可以选择安装Vue Router。如果没有安装，可以手动安装：
```
npm install vue-router --save
```

创建路由配置

创建src/router/index.js文件：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld.vue';

Vue.use(Router);

export default new Router({
 routes: [
   {
     path: '/',
     name: 'HelloWorld',
     component: HelloWorld
   },
   {
     path: '/another',
     name: 'AnotherComponent',
     component: () => import('@/components/AnotherComponent.vue')
   }
 ]
});

在主文件中使用路由

在src/main.js中引入并使用路由：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
 el: '#app',
 router,
 render: h => h(App)
});

导航到路由

在模板中使用<router-link>和<router-view>来导航到不同路由：

<template>
 <div id="app">
   <router-link to="/">Home</router-link>
   <router-link to="/another">Another</router-link>
   <router-view></router-view>
 </div>
</template>

路由的动态参数与守卫

动态参数

在路由中使用动态参数：

export default new Router({
 routes: [
   {
     path: '/user/:id',
     name: 'User',
     component: () => import('@/components/User.vue')
   }
 ]
});

在组件中访问动态参数：

<template>
 <div id="user">
   <p>User ID: {{ $route.params.id }}</p>
 </div>
</template>

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

路由守卫

使用路由守卫来控制导航行为：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld.vue';

Vue.use(Router);

const router = new Router({
 routes: [
   {
     path: '/',
     name: 'HelloWorld',
     component: HelloWorld
   }
 ]
});

router.beforeEach((to, from, next) => {
 console.log('Navigating from', from.path, 'to', to.path);
 next();
});

export default router;

常见问题解决

常见错误与调试技巧

错误常见原因
- 模板错误：模板中使用了不存在的变量或指令。
- 组件未定义：在父组件中使用了未定义的子组件。
- 状态管理问题：Vuex store中状态未正确更新。
调试技巧
- Vue Devtools：安装Vue Devtools浏览器插件，帮助检查Vue应用的状态。
- 控制台日志：在组件或方法中打印日志，检查变量的值。
- 断点调试：使用浏览器开发者工具中的断点功能，调试Vue应用中的代码。

性能优化方法

懒加载

使用Vue Router的懒加载功能，按需加载组件：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld.vue';

Vue.use(Router);

export default new Router({
 routes: [
   {
     path: '/',
     name: 'HelloWorld',
     component: HelloWorld
   },
   {
     path: '/lazy',
     name: 'LazyComponent',
     component: () => import('@/components/LazyComponent.vue')
   }
 ]
});

状态管理优化

使用Vuex的actions和mutations来优化状态管理：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++;
   }
 },
 actions: {
   increment({ commit }) {
     commit('increment');
   }
 }
});

测试Vue3应用

单元测试

使用vue-test-utils和jest进行单元测试：

npm install vue-test-utils jest --save-dev

创建测试文件src/components/HelloWorld.spec.js：

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
 it('renders props.message when passed', () => {
   const wrapper = shallowMount(HelloWorld, {
     propsData: { message: 'Hello' }
   });
   expect(wrapper.text()).toBe('Hello');
 });
});

集成测试

使用vue-test-utils和jest进行集成测试：

import { shallowMount } from '@vue/test-utils';
import App from '@/App.vue';

describe('App.vue', () => {
 it('renders HelloWorld component', () => {
   const wrapper = shallowMount(App);
   expect(wrapper.findComponent({ name: 'HelloWorld' })).toBeTruthy();
 });
});

实战项目案例

小项目实战演练

创建一个简单的CRUD应用，包括增删改查功能。

项目需求
- 用户可以添加、编辑、删除和查看用户列表。
项目结构

创建项目文件夹my-crud-app，安装Vue CLI创建项目：
```
vue create my-crud-app
```

定义数据模型

在src/store/index.js中定义用户数据模型：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
   users: []
 },
 mutations: {
   add(state, user) {
     state.users.push(user);
   },
   remove(state, id) {
     state.users = state.users.filter(user => user.id !== id);
   },
   update(state, updatedUser) {
     const index = state.users.findIndex(user => user.id === updatedUser.id);
     if (index !== -1) {
       state.users[index] = updatedUser;
     }
   }
 },
 actions: {
   add({ commit }, user) {
     commit('add', user);
   },
   remove({ commit }, id) {
     commit('remove', id);
   },
   update({ commit }, updatedUser) {
     commit('update', updatedUser);
   }
 }
});

创建用户组件

创建src/components/UserForm.vue用于添加和编辑用户：

<template>
 <form @submit.prevent="handleSubmit">
   <label>
     名称:
     <input type="text" v-model="name" />
   </label>
   <label>
     年龄:
     <input type="number" v-model.number="age" />
   </label>
   <button type="submit">{{ isEditing ? '更新' : '添加' }}</button>
 </form>
</template>

<script>
export default {
 props: {
   name: String,
   age: Number,
   id: Number,
   isEditing: Boolean
 },
 methods: {
   handleSubmit() {
     if (this.isEditing) {
       this.$store.dispatch('update', { id: this.id, name: this.name, age: this.age });
     } else {
       this.$store.dispatch('add', { name: this.name, age: this.age });
     }
   }
 }
}
</script>

创建src/components/UserList.vue用于显示用户列表：

<template>
 <div>
   <UserForm v-if="isEditing" :name="editingUser.name" :age="editingUser.age" :id="editingUser.id" :isEditing="true" />
   <ul>
     <li v-for="user in users" :key="user.id">
       {{ user.name }} - {{ user.age }}
       <button @click="editUser(user)">编辑</button>
       <button @click="removeUser(user.id)">删除</button>
     </li>
   </ul>
   <UserForm v-if="!isEditing" />
 </div>
</template>

<script>
import UserForm from './UserForm.vue';

export default {
 components: {
   UserForm
 },
 computed: {
   users() {
     return this.$store.state.users;
   }
 },
 methods: {
   editUser(user) {
     this.$store.commit('SET_EDITING_USER', user);
     this.isEditing = true;
   },
   removeUser(id) {
     this.$store.dispatch('remove', id);
   }
 },
 data() {
   return {
     isEditing: false,
     editingUser: {}
   };
 }
}
</script>

在主应用中使用组件

在src/App.vue中引入并使用用户组件：

<template>
 <div id="app">
   <UserList />
 </div>
</template>

<script>
import UserList from './components/UserList.vue';

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

项目打包与部署

打包项目

使用npm命令打包项目：
```
npm run build
```
打包后的文件会生成在dist/目录中。
部署项目

将打包后的文件dist/目录中的文件上传到服务器，或使用CDN等服务发布应用。

代码审查与维护建议

代码审查
- 组件化：确保所有功能封装成独立的组件。
- 状态管理：确保状态管理逻辑清晰，易于维护。
- 测试覆盖率：确保有足够的单元测试和集成测试覆盖应用。
维护建议
- 文档编写：编写详细的文档，方便团队成员快速上手。
- 版本控制：使用Git进行版本控制，确保代码版本的可追踪性。
- 持续集成：使用CI/CD工具，确保代码质量。

通过以上步骤，可以创建一个从零开始的Vue3项目，并掌握Vue3的核心功能和项目开发的最佳实践。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

海绵宝宝撒

JAVA开发工程师

手记
篇

粉丝

40

获赞与收藏

125

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30611 343

网络编程入门教程

20个小节 12580 237

Pandas 入门教程

25个小节 18540 337

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue3项目实战：从入门到上手

准备工作

安装Node.js和Vue CLI

创建Vue3项目

项目结构简介

Vue3基础语法

模板语法

计算属性与方法

指令和事件绑定

组件化开发

创建和使用组件

属性传递与事件监听

插槽与动态组件

状态管理与路由

使用Vuex进行状态管理

Vue Router的基本使用

路由的动态参数与守卫

常见问题解决

常见错误与调试技巧

性能优化方法

测试Vue3应用

实战项目案例

小项目实战演练

项目打包与部署

代码审查与维护建议

阅读免费教程