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

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

标签：

Vue.js

概述

本文介绍了Vue3的基础概念、主要特性和改进点，详细讲解了如何搭建开发环境和项目结构，以及组件化开发、状态管理与路由配置等内容。旨在帮助新手快速入门并掌握初级Vue3开发技巧。

Vue3基础概念介绍

Vue3简介

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。Vue 3 是 Vue.js 的最新版本，发布于2020年9月，带来了许多新的特性和改进。Vue 3 版本不仅增强了性能，还改进了开发体验，使其成为构建现代 Web 应用程序的理想选择。

Vue3的主要特性和改进点

更小的体积：Vue 3 的体积比 Vue 2 更小，核心库仅 20KB（gzip 后）。
更好的性能：Vue 3 通过引入自定义渲染器和新的响应式系统，使得渲染性能提升，特别是在列表渲染和嵌套观察对象方面。
Composition API：这是 Vue 3 引入的一个新 API，它提供了更加灵活的组织和重用逻辑的方式。Composition API 尤其适用于大型项目，使得代码逻辑更加清晰。
新的响应式系统：Vue 3 使用了基于 Proxy 的全新响应式系统，性能和功能都有显著提升。
更好的 TypeScript 支持：Vue 3 提供了更好的 TypeScript 支持，使得类型推断更加准确，开发体验更加顺畅。
Tree-Shaking：Vue 3 组件默认导出，并且支持 Tree-Shaking，这意味着未使用的代码将被编译器移除，从而减少最终的包体积。
Teleport API：这是 Vue 3 新增的一个特性，允许你在 DOM 中选择性地渲染组件到任意位置，而非其父组件的内部。

Vue3项目结构介绍

Vue 项目的目录结构通常如下：

my-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── package.json
└── babel.config.js

node_modules：这是所有安装的依赖库的目录。
public：这个目录包含应用的静态文件，如 HTML 文件、图片等。
src：这是应用的主要代码库，包含组件、样式和应用逻辑。
package.json：这是项目的配置文件，包含应用的依赖、脚本等信息。
babel.config.js：这是 Babel 的配置文件，用于编译 ES6+ 代码。

例如，App.vue 文件的内容如下：

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

<script>
export default {
  data() {
    return {
      message: 'Hello Vue3!'
    };
  }
};
</script>

<style>
#app {
  text-align: center;
}
</style>

快速搭建Vue3开发环境

安装Node.js和npm

安装 Node.js 和 npm（Node.js 的包管理器）是开始任何 Vue.js 项目的第一步。

下载和安装 Node.js

访问 Node.js 官方网站。
选择适合你操作系统的安装包（Windows、macOS、Linux）。
安装 Node.js。安装过程中会自动安装 npm。

检查 Node.js 和 npm 是否安装成功：

node -v
npm -v

使用Vue CLI创建Vue3项目

使用 Vue CLI（Vue Command Line Interface）可以快速创建 Vue 项目。Vue CLI 提供了一系列的脚手架功能，使得开发变得更为简单。

安装 Vue CLI
```
npm install -g @vue/cli
```
创建 Vue 项目
```
vue create my-vue3-project
```

在创建项目时，你可以选择预设模板，如默认模板，或者自定义预设。选择相应的模板后，Vue CLI 将自动为你安装所需的依赖，并创建项目结构。

项目基本配置与运行
配置完成后，你可以进入项目目录并启动开发环境：
```
cd my-vue3-project
npm run serve
```

这将启动开发服务器，并在浏览器中打开应用的预览页面。

例如，package.json 文件的示例内容如下：

{
  "name": "my-vue3-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  }
}

Vue组件化开发

组件的基本概念

在 Vue 中，组件是可复用的 Vue 实例，每个组件都是一个独立的小型应用，可以单独进行开发、测试和部署。组件化开发使得代码更加模块化和易维护，可以有效地避免代码重复。

例如，一个简单的 Vue 组件 HelloWorld.vue 如下：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: 'Hello, Vue3!'
    }
  },
  data() {
    return {
      text: 'This is a Vue3 component.'
    };
  }
};
</script>

<style scoped>
h1, p {
  color: #42b983;
}
</style>

创建Vue组件

创建组件文件：在 src/components 目录下创建一个新的 Vue 组件文件，例如 HelloWorld.vue。
编写组件代码：按照 Vue 组件的规范编写代码，组件一般包括 HTML 模板、JavaScript 逻辑和样式。

例如，HelloWorld.vue 组件文件内容如下：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: 'Hello, Vue3!'
    }
  },
  data() {
    return {
      text: 'This is a Vue3 component.'
    };
  }
};
</script>

<style scoped>
h1, p {
  color: #42b983;
}
</style>

传递属性与事件通信

在 Vue 中，父组件可以通过属性（props）向子组件传递数据，子组件可以通过事件（emit）向父组件传递数据。

父组件传递属性给子组件


<template>
<div>
<HelloWorld msg="Hello from Parent" />
</div>
</template>

export default {
components: {
HelloWorld
}
};
</script>


2. **子组件通过事件向父组件传递数据**
```html
<template>
  <div>
    <HelloWorld @custom-event="handleEvent" />
  </div>
</template>

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

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

Vue3的Composition API基础

Composition API 是 Vue 3 引入的一个新的 API，它使得代码逻辑更加清晰和模块化。通过 Composition API，你可以组织逻辑、状态和生命周期钩子，使得代码更加易于维护。

例如，使用 setup 函数的示例：

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

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

export default {
  setup() {
    const title = ref('Composition API Example');
    const message = ref('Hello, Composition API!');

    return {
      title,
      message
    };
  }
};
</script>

状态管理与路由

Vuex简介与使用

Vuex 是一个用于 Vue.js 应用的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证可预测性。

安装 Vuex
```
npm install vuex@next --save
```
创建 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: {
count: state => state.count
}
});


3. **在项目中使用 Vuex Store**
在组件中使用 Vuex Store 的示例：
```html
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const count = computed(() => store.getters.count);
    const increment = () => store.dispatch('increment');

    return {
      count,
      increment
    };
  }
};
</script>

Vue Router的基础配置与使用

Vue Router 是 Vue.js 官方的路由管理库，它允许你创建单页面应用（SPA）的路由系统。

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

创建路由配置
在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件：


import { createRouter, createWebHistory } from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';

const routes = [
{
path: '/',
name: 'Home',
component: HelloWorld
}
];

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

export default router;


3. **在项目中使用 Vue Router**
```html
<template>
  <router-view></router-view>
</template>

<script>
import router from './router';

export default {
  router
};
</script>

路由的高级特性介绍
Vue Router 提供了多种高级特性，例如动态路由、嵌套路由、导航守卫等。

动态路由

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

嵌套路由

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

导航守卫

router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});

常见问题与调试技巧

常见错误排查

在开发过程中，经常会遇到各种错误。以下是一些常见的错误及其解决方案：

组件没有找到
- 确保组件被正确导入，并且在模板中正确使用。
响应式问题
- 检查数据是否正确地声明为响应式，或者是否使用了正确的生命周期钩子。
CSS 覆盖
- 确保 CSS 选择器没有被过度覆盖，使用 scoped 属性来限制样式作用范围。

使用Vue Devtools进行调试

Vue Devtools 是一个浏览器扩展，可以帮助你调试 Vue 应用程序。它提供了许多有用的功能，例如查看组件树、监视状态变化和断点调试。

安装 Vue Devtools
- 访问 Vue Devtools 官方网站，下载适合你浏览器的扩展程序。
使用 Vue Devtools
- 启动 Vue 应用程序后，打开浏览器的开发者工具，然后切换到 Vue Devtools 选项卡。
- 在组件树视图中查看和调试组件。

测试Vue组件的基本方法

Vue 提供了多种测试工具，例如 Jest 和 Vue Testing Library，这些工具可以帮助你编写单元测试和集成测试。

安装测试依赖

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

编写测试用例


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

describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const wrapper = shallowMount(HelloWorld, {
props: { msg: 'Hello, world!' }
});
expect(wrapper.text()).toMatch('Hello, world!');
});
});


### 小项目实战演练

#### 项目需求分析
假设我们要创建一个简单的待办事项（To-Do List）应用，用于管理日常任务。应用应该具有以下功能：
- 添加新的待办事项
- 显示所有待办事项
- 删除已完成的待办事项

#### 功能模块拆分与实现
1. **创建项目结构**
在 `src` 目录下创建以下文件：
- `components`：存放组件
- `store`：存放 Vuex Store
- `router`：存放路由配置

2. **创建组件**
- **ToDoItem.vue**
```html
<template>
  <div>
    <input type="checkbox" v-model="checked" />
    <span :class="{ done: checked }">{{ task.text }}</span>
    <button @click="deleteTask">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    task: {
      type: Object,
      required: true
    }
  },
  computed: {
    checked: {
      get() {
        return this.task.completed;
      },
      set(value) {
        this.$emit('update-task', { ...this.task, completed: value });
      }
    }
  },
  methods: {
    deleteTask() {
      this.$emit('delete-task', this.task);
    }
  }
};
</script>

<style scoped>
.done {
  text-decoration: line-through;
}
</style>

ToDoList.vue


<template>
<div>
<h1>待办事项</h1>
<input v-model="newTask" @keyup.enter="addTask" placeholder="添加新任务" />
<ul>
  <ToDoItem
    v-for="(task, index) in tasks"
    :key="index"
    :task="task"
    @update-task="updateTask"
    @delete-task="deleteTask"
  />
</ul>
</div>
</template>

export default {
components: {
ToDoItem
},
data() {
return {
newTask: '',
tasks: []
};
},
methods: {
addTask() {
if (this.newTask.trim() !== '') {
this.tasks.push({ text: this.newTask, completed: false });
this.newTask = '';
}
},
updateTask(updatedTask) {
const index = this.tasks.findIndex(task => task.text === updatedTask.text);
if (index !== -1) {
this.tasks.splice(index, 1, updatedTask);
}
},
deleteTask(task) {
this.tasks.splice(this.tasks.indexOf(task), 1);
}
}
};
</script>


3. **创建 Vuex Store**
- **store/index.js**
```js
import { createStore } from 'vuex';

export default createStore({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task);
    },
    updateTask(state, task) {
      const index = state.tasks.findIndex(t => t.text === task.text);
      if (index !== -1) {
        state.tasks.splice(index, 1, task);
      }
    },
    deleteTask(state, task) {
      const index = state.tasks.indexOf(task);
      if (index !== -1) {
        state.tasks.splice(index, 1);
      }
    }
  },
  actions: {
    addTask({ commit }, task) {
      commit('addTask', task);
    },
    updateTask({ commit }, task) {
      commit('updateTask', task);
    },
    deleteTask({ commit }, task) {
      commit('deleteTask', task);
    }
  },
  getters: {
    tasks: state => state.tasks
  }
});

项目部署与上线准备

构建项目
```
npm run build
```
这将生成一个 dist 目录，其中包含构建好的静态文件。
部署到服务器
将 dist 目录中的文件上传到你的服务器。你可以使用 FTP、SCP 或任何其他文件传输工具。
配置服务器
确保你的服务器支持静态文件托管，例如使用 Apache 或 Nginx。配置服务器以正确地提供这些文件。

例如，Nginx 的配置文件示例：

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

访问应用
部署完成后，通过域名或 IP 地址访问你的应用，确保所有功能都能正常使用。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

达令说

手记
篇

粉丝

22

获赞与收藏

120

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30809 345

网络编程入门教程

20个小节 12721 239

Pandas 入门教程

25个小节 18600 342

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空