Vue3入门教程：从零开始搭建你的第一个Vue3项目

2024/11/19 23:03:39

本文主要是介绍Vue3入门教程：从零开始搭建你的第一个Vue3项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

本文详细介绍了Vue3的核心特性、与Vue2的区别、安装环境、项目创建及基础组件的使用。

Vue3简介

Vue.js 是一个用于构建用户界面的渐进式框架。Vue3 是 Vue.js 的最新版本，于2020年9月发布，提供了比Vue2更强大的功能和更优的性能，同时改进了开发体验和开发者工具链。以下是 Vue3 的一些核心特性：

  1. 更好的性能：Vue3 通过优化虚拟 DOM、改进响应式系统和提升编译器效率，显著提升了应用的渲染速度。
  2. Composition API：新的 Composition API 为组件逻辑提供了一种更灵活和强大的组织方式，使得代码更加易读和维护。
  3. Tree Shaking：Vue3 框架本身是树摇友好的，这意味着未使用的代码不会被编译器包含在最终构建的文件中。
  4. 更好的类型支持：在 TypeScript 环境下，Vue3 提供了更好的类型支持，可以更方便地进行类型检查和代码提示。
  5. 更小的体积：Vue3 的体积更小，加载速度更快，这对于提高应用的首屏加载速度至关重要。

Vue3与Vue2的区别

Vue3 与 Vue2 在多个方面有所区别，以下是一些主要的区别：

  1. 响应式系统：

    • Vue2：使用 Object.defineProperty 实现响应式，但这种方法在处理复杂对象结构时表现不佳。
    • Vue3：采用 Proxy 实现响应式，支持更复杂的对象结构，同时拥有更好的性能。

  2. Composition API：

    • Vue2：使用 Options API，通过配置对象定义组件逻辑。
    • Vue3：引入了 Composition API，允许开发者在组件中组合逻辑，提高了代码的复用性和可读性。

  3. 模板解析：

    • Vue2：使用编译器将模板转译为渲染函数。
    • Vue3：使用更高效的编译器，生成更优化的渲染函数。

  4. Slots API：

    • Vue2：使用 slots API 提供插槽，但插槽的定义较为繁琐。
    • Vue3：改进了 Slots API，提供了更简洁的插槽定义方式，如 <slot></slot> 和 <template v-slot>。
  5. Teleport 和 Suspense：
    • Vue2：没有提供这些特性。
    • Vue3：引入了 Teleport 组件，可以将组件渲染到页面中的任何位置，以及 Suspense 组件，用于异步组件的加载提示。

安装Vue3环境

要开始使用 Vue3，首先需要安装 Vue CLI。Vue CLI 提供了一套完整的工作流，可以方便地安装、构建和发布 Vue 应用。以下是安装 Vue CLI 的步骤：

  1. 使用 npm 安装 Vue CLI：

    npm install -g @vue/cli

  2. 创建一个新的 Vue3 项目：

    vue create my-vue3-app

    创建项目时，选择 Vue3 版本。如果需要，可以选择预设的配置选项，如 Babel、TypeScript、Router、Vuex 等。

创建Vue3项目

创建 Vue3 项目有多种方式，以下是使用 Vue CLI 和手动创建项目的步骤。

使用Vue CLI创建项目

  1. 安装 Vue CLI（如果还未安装）：

    npm install -g @vue/cli

  2. 创建一个新的 Vue3 项目：

    vue create my-vue3-app

  3. 在创建过程中，选择 Vue3 版本，并根据需要选择预设的配置选项：

    ? Please pick a preset
 Default (Vue 2.x)
❯ Default (Vue 3.x) (recommended)
 Manually select features
  4. 安装完成后，进入项目目录并启动开发服务器： 
    cd my-vue3-app
npm run serve

手动创建Vue3项目

如果不想使用 Vue CLI，也可以手动创建 Vue3 项目。以下是手动创建 Vue3 项目的步骤：

  1. 初始化一个新的 npm 项目：

    mkdir my-vue3-app
cd my-vue3-app
npm init -y

  2. 安装 Vue3 及其依赖：

    npm install vue@next
npm install vue-template-compiler@next
npm install vue-loader@next
npm install vue-template-compiler@next
npm install vue-router@next
npm install vuex@next

  3. 创建项目结构：

    mkdir src
touch src/main.js
touch src/App.vue

  4. 编写 src/main.js，引入 Vue3 和根组件：

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

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

  5. 编写 src/App.vue，定义根组件：

    <template>
 <div id="app">
   <h1>Hello Vue3!</h1>
 </div>
</template>

<script>
export default {
 name: 'App'
};
</script>

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

  6. 创建 public/index.html，引入 Vue3 入口文件：

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Vue3 App</title>
</head>
<body>
 <div id="app"></div>
 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/main.js"></script>
</body>
</html>
  7. 启动开发服务器： 
    npm run serve

项目结构介绍

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

my-vue3-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   ├── router/
│   │   └── index.js
│   ├── store/
│   │   └── index.js
├── package.json
├── .gitignore
└── README.md
  • public/：存放公共资源，如 index.html。
  • src/：存放源代码，包括 Vue 组件、路由、状态管理等。
  • node_modules/：存放所有安装的 npm 包。
  • package.json：存放项目配置信息，如依赖、脚本等。
  • .gitignore：指定 Git 不跟踪的文件模式。
  • README.md：项目说明文档。

Vue3组件基础

在 Vue3 中，组件是最基本的构造块。组件可以用来封装可重用的 UI 元素。以下是 Vue3 组件的基础概念和使用方法：

创建和使用Vue组件

创建一个 Vue 组件，需要定义一个包含 <template>、<script> 和 <style> 的 .vue 文件。例如，创建一个 HelloWorld.vue 组件：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <p v-if="show">{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: {
      type: String,
      required: true
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      content: 'This is a HelloWorld component.'
    };
  }
};
</script>

<style scoped>
.hello {
  background-color: #ddd;
  padding: 20px;
}
</style>

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

<template>
  <div id="app">
    <HelloWorld message="Hello World!" show />
  </div>
</template>

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

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

组件间的通信

在 Vue 中，组件间的通信可以通过 Props 和 Events 实现。Props 用于父组件向子组件传递数据，Events 用于子组件向父组件传递数据。

使用Props

在上面的 HelloWorld 组件中，我们通过 Props 从父组件传递 message 和 show 属性。父组件可以像这样传递 Props：

<HelloWorld message="Hello World!" show />
使用Events

子组件可以通过 $emit 方法触发事件，将数据传递给父组件。例如，在 HelloWorld 组件中触发一个名为 greet 的事件：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <p v-if="show">{{ content }}</p>
    <button @click="sendGreet">Greet</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: String,
    show: Boolean
  },
  data() {
    return {
      content: 'This is a HelloWorld component.'
    };
  },
  methods: {
    sendGreet() {
      this.$emit('greet', 'Hello from HelloWorld!');
    }
  }
};
</script>

父组件可以监听该事件并处理：

<template>
  <div id="app">
    <HelloWorld message="Hello World!" show @greet="handleGreet" />
  </div>
</template>

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

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

Props和Events

Props 用于传递数据，而 Events 用于传递事件。下面是一个更复杂的例子，展示如何在一个组件中定义 Props 和 Events，并在另一个组件中使用它们：

<!-- ChildComponent.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="sendGreet">Greet</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  },
  methods: {
    sendGreet() {
      this.$emit('greet', 'Hello from ChildComponent!');
    }
  }
};
</script>
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent message="Hello from ParentComponent!" @greet="handleGreet" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    handleGreet(greeting) {
      console.log(greeting);
    }
  }
};
</script>

Vue3响应式系统

Vue3 的响应式系统是其核心特性之一，它使得数据的变化能够自动反映在视图中。以下是响应式系统的关键概念：

响应式数据绑定

Vue3 使用 Proxy 对象来实现响应式数据绑定。当你访问或修改一个响应式数据时，Vue 会自动更新视图。

import { reactive, ref } from 'vue';

const state = reactive({
  count: 0
});

console.log(state.count);  // 0
state.count++;
console.log(state.count);  // 1

使用 ref 来创建响应式引用：

const count = ref(0);

console.log(count.value);  // 0
count.value++;
console.log(count.value);  // 1

计算属性和侦听器

计算属性和侦听器是处理复杂逻辑的好方法。

计算属性

计算属性基于其依赖关系缓存结果，只有当其依赖发生变化时才会重新计算。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    };
  }
};
</script>
侦听器

侦听器用于追踪数据的变化。当依赖的数据发生变化时，侦听器会触发回调函数。

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

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

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

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

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

生命周期钩子

Vue3 支持生命周期钩子，允许你在组件的不同生命周期阶段执行特定的操作。例如，onMounted 和 onUnmounted：

<template>
  <div>
    <p>Component is mounted</p>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('Component is mounted');
    });

    onUnmounted(() => {
      console.log('Component is unmounted');
    });

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

Vue3路由和状态管理

Vue3 提供了 Vue Router 和 Vuex 用于路由管理和状态管理。

安装和使用Vue Router

Vue Router 是一个基于 Vue.js 的路由库。它允许你定义不同的 URL 路由，并根据路由匹配不同的组件。

  1. 安装 Vue Router：

    npm install vue-router@next

  2. 创建路由配置文件：

    // 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: '/', name: 'Home', component: Home },
 { path: '/about', name: 'About', component: About }
];

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

export default router;

  3. 在主组件中使用路由：

    <template>
 <div id="app">
   <router-view></router-view>
 </div>
</template>

<script>
import { createApp } from 'vue';
import router from './router';

const app = createApp({});
app.use(router);
app.mount('#app');
</script>

基本路由配置

定义路由时，可以使用 path、name 和 component 选项。

  1. 在路由配置文件中定义多个路由：

    // 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: '/', name: 'Home', component: Home },
 { path: '/about', name: 'About', component: About }
];

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

export default router;
  2. 在组件中导航到不同路由： 
    <template>
 <div>
   <nav>
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
   </nav>
   <router-view></router-view>
 </div>
</template>

Vuex状态管理介绍

Vuex 是一个专为 Vue.js 应用设计的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

  1. 安装 Vuex：

    npm install vuex@next

  2. 创建 Vuex 状态管理文件：

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

  3. 在主组件中使用 Vuex：

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

<script>
import { createApp } from 'vue';
import store from './store';
import View from './View.vue';

const app = createApp(View);
app.use(store);
app.mount('#app');
</script>

Vue3实战案例

实现一个简单的待办事项应用可以帮助你更好地理解 Vue3 的实际应用。以下是待办事项应用的实现步骤：

  1. 创建一个待办事项组件 TodoItem.vue：

    <template>
 <li>
   <input type="checkbox" v-model="checked" />
   <span :class="{ completed: checked }">{{ todo.text }}</span>
   <button @click="removeTodo">Delete</button>
 </li>
</template>

<script>
export default {
 props: ['todo'],
 data() {
   return {
     checked: this.todo.isChecked
   };
 },
 methods: {
   removeTodo() {
     this.$emit('remove', this.todo.id);
   }
 }
};
</script>

<style scoped>
li {
 list-style: none;
}
.completed {
 text-decoration: line-through;
}
</style>

  2. 创建一个待办事项列表组件 TodoList.vue：

    <template>
 <div>
   <input v-model="newTodo" @keyup.enter="addTodo" />
   <button @click="addTodo">Add Todo</button>
   <ul>
     <todo-item
       v-for="todo in todos"
       :key="todo.id"
       :todo="todo"
       @remove="removeTodo"
     ></todo-item>
   </ul>
 </div>
</template>

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

export default {
 components: {
   TodoItem
 },
 data() {
   return {
     newTodo: '',
     todos: [
       { id: 1, text: 'Learn Vue3', isChecked: false },
       { id: 2, text: 'Build a Todo App', isChecked: false }
     ]
   };
 },
 methods: {
   addTodo() {
     if (this.newTodo.trim() === '') return;
     this.todos.push({
       id: Date.now(),
       text: this.newTodo,
       isChecked: false
     });
     this.newTodo = '';
   },
   removeTodo(id) {
     this.todos = this.todos.filter(todo => todo.id !== id);
   }
 }
};
</script>

<style scoped>
input[type="text"] {
 width: 100%;
 padding: 8px;
 font-size: 16px;
}
</style>

  3. 在主组件 App.vue 中使用 TodoList 组件：

    <template>
 <div id="app">
   <todo-list></todo-list>
 </div>
</template>

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

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

异步数据获取与处理

Vue3 提供了多种方式来处理异步数据，如使用 async/await 和 Promise。以下是一个示例，展示如何在一个 Vue 组件中获取和处理异步数据。

  1. 创建一个组件 AsyncData.vue：

    <template>
 <div>
   <p v-if="loading">Loading...</p>
   <div v-else-if="data">
     <h2>{{ data.name }}</h2>
     <p>{{ data.description }}</p>
   </div>
   <p v-else-if="error">{{ error }}</p>
 </div>
</template>

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

export default {
 setup() {
   const data = ref(null);
   const loading = ref(true);
   const error = ref(null);

   const fetchData = async () => {
     try {
       const response = await fetch('https://api.example.com/data');
       if (!response.ok) {
         throw new Error('Network response was not ok');
       }
       data.value = await response.json();
       loading.value = false;
     } catch (err) {
       error.value = err.message;
       loading.value = false;
     }
   };

   onMounted(() => {
     fetchData();
   });

   return {
     data,
     loading,
     error
   };
 }
};
</script>

  2. 在主组件中使用该组件：

    <template>
 <div id="app">
   <async-data></async-data>
 </div>
</template>

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

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

项目部署指南

部署 Vue3 项目通常包括以下步骤：

  1. 构建项目：
    使用 npm run build 构建项目。构建后的文件会生成在 dist 目录中。

    npm run build

  2. 部署到服务器：
    将 dist 目录中的文件上传到服务器。可以使用 FTP、Git 等工具。

  3. 配置 Web 服务器：
    确保 Web 服务器配置正确，例如使用 Nginx 或 Apache 服务器配置静态文件。

    例如，使用 Nginx 时，可以这样配置：

    server {
 listen 80;
 server_name example.com;

 location / {
   root /var/www/html/dist;
   try_files $uri /index.html;
 }
}
  4. 测试部署：
    部署完成后，访问服务器地址，确保项目正常运行。


这篇关于Vue3入门教程：从零开始搭建你的第一个Vue3项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程