Vue3项目实战：初学者指南-原创手记-慕课网

概述

本文将带你深入了解Vue3项目实战，从基础入门到组件化开发，再到路由配置和状态管理，最后通过一个简单的博客系统实战案例来巩固所学知识。文中详细介绍了Vue3项目的安装、创建、基本语法、组件使用、路由配置、状态管理及部署方法，旨在帮助初学者快速掌握Vue3的核心技能。

Vue3项目实战：初学者指南

Vue3基础入门

安装Vue3

在开始使用Vue3之前，你需要先安装Vue3。使用Vue CLI（Vue命令行工具）是一个快速创建Vue项目的推荐方式。首先确保你已经安装了Node.js和npm。

npm install -g @vue/cli

一旦安装了Vue CLI，你就可以使用以下命令来创建一个新的Vue项目：

vue create my-vue-app

当你运行上述命令时，Vue CLI将引导你完成项目的创建。你可以在终端中选择预设配置或自定义配置，例如使用Vue 3而不是Vue 2。

创建第一个Vue3项目

使用Vue CLI完成项目创建后，你可以使用以下命令进入项目目录并启动开发服务器：

cd my-vue-app
npm run serve

这将启动开发服务器，并在默认浏览器中打开你的新Vue项目。默认的Vue项目包含一个简单的Hello World应用。

项目结构

一个Vue项目的基本结构如下：

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

Vue3的基本语法和组件使用

基本语法

Vue3使用模板语法来定义视图。模板语法由插值（${}）、指令（如v-if、v-for）、事件监听器（如v-on）和双向绑定（如v-model）组成。

以下是一个简单的Vue组件示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <p v-if="isVisible">Hello, Vue 3!</p>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue 3!',
      isVisible: true,
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

组件使用

组件是可重用的Vue实例，具有独立的视图和逻辑。你可以通过<script>和<template>标签定义组件。

以下是一个简单的按钮组件：

<template>
  <button @click="handleClick">{{ buttonText }}</button>
</template>

<script>
export default {
  props: {
    buttonText: String
  },
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
};
</script>

你可以在其他模板中使用这个按钮组件：

<template>
  <div>
    <my-button buttonText="Click Me"></my-button>
  </div>
</template>

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

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

Vue3组件化开发

组件的定义与使用

组件是Vue中最小的可重用单元。你可以通过<script>和<template>标签定义一个组件，然后在其他地方使用它。

示例：定义一个Todo组件

<template>
  <div>
    <h2>Todo List</h2>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue 3' },
        { id: 2, text: 'Build a new app' },
        { id: 3, text: 'Go for a walk' }
      ]
    };
  }
};
</script>

示例：使用Todo组件

<template>
  <div>
    <TodoList />
  </div>
</template>

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

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

Props和Slots的传递

Props传递

Props是父组件向子组件传递数据的一种方式。你可以通过在子组件中定义Props来接收数据。

示例：定义一个带有Props的Todo组件

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    todos: Array
  }
};
</script>

示例：使用带有Props的Todo组件

<template>
  <div>
    <TodoList title="My Todo List" :todos="todos" />
  </div>
</template>

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

export default {
  components: {
    TodoList
  },
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue 3' },
        { id: 2, text: 'Build a new app' },
        { id: 3, text: 'Go for a walk' }
      ]
    };
  }
};
</script>
``

#### Slots传递

Slots是Vue中用于内容分发的机制。通过Slot，你可以在组件中定义一个占位符，然后在使用组件时填充内容。

示例：定义一个带有Slot的Todo组件

```html
<template>
  <div>
    <h2>Todo List</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    todos: Array
  }
};
</script>

示例：使用带有Slot的Todo组件

<template>
  <div>
    <TodoList :todos="todos">
      <ul>
        <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
      </ul>
    </TodoList>
  </div>
</template>

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

export default {
  components: {
    TodoList
  },
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue 3' },
        { id: 2, text: 'Build a new app' },
        { id: 3, text: 'Go for a walk' }
      ]
    };
  }
};
</script>

Vue3中的生命周期钩子

Vue组件在其生命周期中的不同阶段会触发一些钩子函数。这些钩子允许你在特定的时间点执行代码，例如在组件挂载或卸载时。

以下是一些常用的生命周期钩子：

beforeCreate：在实例初始化之前
created：实例初始化完成后
beforeMount：在挂载开始之前被调用
mounted：在实例挂载完成后被调用
beforeUpdate：在数据更新之前
updated：在数据更新并重新渲染后被调用
beforeUnmount：在实例卸载之前
unmounted：在实例卸载后被调用

示例：使用生命周期钩子

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  },
  beforeCreate() {
    console.log('Before Create');
  },
  created() {
    console.log('Created');
  },
  beforeMount() {
    console.log('Before Mount');
  },
  mounted() {
    console.log('Mounted');
  },
  beforeUpdate() {
    console.log('Before Update');
  },
  updated() {
    console.log('Updated');
  },
  beforeUnmount() {
    console.log('Before Unmount');
  },
  unmounted() {
    console.log('Unmounted');
  }
};
</script>

Vue3路由配置

安装和配置Vue Router

Vue Router是Vue官方推荐的路由管理器。要安装它，你可以使用npm命令：

npm install vue-router@next

然后，在你的Vue项目中创建一个路由文件，例如router.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;

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

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

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

路由定义与使用

定义好路由后，你可以在组件中使用<router-link>标签导航到不同的页面，并使用<router-view>标签显示当前路由对应的组件。

示例：定义路由组件

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

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

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

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

使用<router-link>和<router-view>来导航和显示组件：

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

<script>
import Home from './views/Home.vue';
import About from './views/About.vue';

export default {
  components: {
    Home,
    About
  }
};
</script>

路由的守卫机制

Vue Router提供了多种守卫机制，包括全局守卫、路由独享守卫和组件内守卫。

全局守卫

全局守卫可以在所有路由中执行。例如，你可以使用beforeEach来检查用户登录状态：

router.beforeEach((to, from, next) => {
  const user = someUserStore.getState().user;
  if (to.path === '/about' && !user) {
    next('/');
  } else {
    next();
  }
});

路由独享守卫

路由独享守卫只在特定路由中执行。例如，你可以在About路由中定义一个独享守卫：

const routes = [
  {
    path: '/about',
    component: About,
    beforeEnter: (to, from, next) => {
      const user = someUserStore.getState().user;
      if (!user) {
        next('/');
      } else {
        next();
      }
    }
  }
];

组件内守卫

组件内守卫可以在组件内部定义，例如在beforeRouteEnter、beforeRouteLeave和beforeRouteUpdate生命周期钩子中：

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
  beforeRouteEnter(to, from, next) {
    const user = someUserStore.getState().user;
    if (!user) {
      next('/');
    } else {
      next();
    }
  }
};
</script>

Vue3状态管理

使用Pinia进行状态管理

Pinia是一个由Vue团队维护的状态管理库。它提供了一种声明性的方法来管理应用的状态。

安装Pinia

首先，安装Pinia：

npm install pinia

创建Store

创建一个新的Store文件，例如store.js：

import { createPinia } from 'pinia';

export const useStore = createPinia();

在你的主应用文件中使用Store：

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

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

定义Store

在Store中定义状态和方法：

import { createPinia, defineStore } from 'pinia';

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
});

在组件中使用Store：

<template>
  <div>
    <h1>Count: {{ counterStore.count }}</h1>
    <button @click="counterStore.increment">Increment</button>
    <button @click="counterStore.decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from './store';

export default {
  setup() {
    const counterStore = useCounterStore();
    return { counterStore };
  }
};
</script>

状态的定义与使用

你可以通过state来定义状态，通过actions来定义修改状态的方法：

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
});

在组件中使用状态：

<template>
  <div>
    <h1>Count: {{ counterStore.count }}</h1>
    <button @click="counterStore.increment">Increment</button>
    <button @click="counterStore.decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from './store';

export default {
  setup() {
    const counterStore = useCounterStore();
    return { counterStore };
  }
};
</script>

异步状态管理

Pinia支持异步操作，例如获取数据。你可以在actions中定义异步方法：

import { useCounterStore } from './store';

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0
  }),
  actions: {
    async increment() {
      this.count++;
      await someAsyncFunction();
    }
  }
});

在组件中使用异步方法：

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

<script>
import { useCounterStore } from './store';

export default {
  setup() {
    const counterStore = useCounterStore();
    return { counterStore };
  }
};
</script>

Vue3项目部署

项目构建与打包

要构建和打包Vue项目，你可以使用npm run build命令：

npm run build

这将生成一个名为dist的文件夹，里面包含构建后的静态文件。

部署到不同平台的方法

部署到GitHub Pages

配置vue.config.js文件以使用GitHub Pages：

module.exports = {
 publicPath: '/your-repo-name/',
};

在GitHub仓库中设置页面来源，指向gh-pages分支下的dist文件夹。

部署到Vercel

初始化Vercel项目：
```
npx vercel init
```
部署项目：
```
npx vercel
```

常见部署问题及解决办法

404错误：确保你的路由配置正确，并且在静态服务器上启用了路由支持。
跨域问题：在后端服务器上设置适当的CORS策略。
资源加载问题：确保所有资源路径正确，并且静态文件服务器配置正确。

实战案例：构建一个简单的博客系统

分析博客系统需求

博客系统通常包含以下几个核心功能：

用户注册和登录
发布文章
查看文章列表
发表评论
管理后台

设计项目结构

典型的博客系统项目结构如下：

my-blog-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   │   ├── Home.vue
│   │   └── Article.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

实现博客系统的各项功能

用户注册和登录

你可以使用第三方登录服务（如Google OAuth）或自建登录系统。这里以自建登录系统为例：

创建一个登录表单组件：

<template>
 <div>
   <h2>Login</h2>
   <form @submit.prevent="handleLogin">
     <label>Email:</label>
     <input v-model="email" type="email" required />
     <label>Password:</label>
     <input v-model="password" type="password" required />
     <button type="submit">Login</button>
   </form>
 </div>
</template>

<script>
export default {
 data() {
   return {
     email: '',
     password: ''
   };
 },
 methods: {
   handleLogin() {
     // Handle login logic
   }
 }
};
</script>

创建一个注册表单组件：

<template>
 <div>
   <h2>Register</h2>
   <form @submit.prevent="handleRegister">
     <label>Email:</label>
     <input v-model="email" type="email" required />
     <label>Password:</label>
     <input v-model="password" type="password" required />
     <label>Confirm Password:</label>
     <input v-model="confirmPassword" type="password" required />
     <button type="submit">Register</button>
   </form>
 </div>
</template>

<script>
export default {
 data() {
   return {
     email: '',
     password: '',
     confirmPassword: ''
   };
 },
 methods: {
   handleRegister() {
     // Handle registration logic
   }
 }
};
</script>

发布文章

创建一个文章发布表单组件：

<template>
 <div>
   <h2>Publish Article</h2>
   <form @submit.prevent="handlePublish">
     <label>Title:</label>
     <input v-model="title" type="text" required />
     <label>Content:</label>
     <textarea v-model="content" required></textarea>
     <button type="submit">Publish</button>
   </form>
 </div>
</template>

<script>
export default {
 data() {
   return {
     title: '',
     content: ''
   };
 },
 methods: {
   handlePublish() {
     // Handle article publishing logic
   }
 }
};
</script>

创建一个文章列表组件：

<template>
 <div>
   <h2>Articles</h2>
   <ul>
     <li v-for="article in articles" :key="article.id">
       <h3>{{ article.title }}</h3>
       <p>{{ article.content }}</p>
       <button @click="handleDelete(article.id)">Delete</button>
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data() {
   return {
     articles: []
   };
 },
 methods: {
   handleDelete(id) {
     // Handle article deletion logic
   }
 }
};
</script>

发表评论

创建一个评论组件：

<template>
 <div>
   <h2>Comments</h2>
   <form @submit.prevent="handleComment">
     <label>Name:</label>
     <input v-model="name" type="text" required />
     <label>Comment:</label>
     <textarea v-model="comment" required></textarea>
     <button type="submit">Submit</button>
   </form>
   <ul>
     <li v-for="comment in comments" :key="comment.id">
       <p>{{ comment.name }}: {{ comment.comment }}</p>
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data() {
   return {
     name: '',
     comment: '',
     comments: []
   };
 },
 methods: {
   handleComment() {
     // Handle comment logic
   }
 }
};
</script>

管理后台

你可以创建一个管理后台组件，用于管理文章和评论：

<template>
  <div>
    <h2>Admin Dashboard</h2>
    <router-link to="/admin/articles">Articles</router-link>
    <router-link to="/admin/comments">Comments</router-link>
    <router-view />
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router';
import Articles from './components/Admin/Articles.vue';
import Comments from './components/Admin/Comments.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/admin/articles', component: Articles },
    { path: '/admin/comments', component: Comments }
  ]
});

export default {
  router
};
</script>

通过以上步骤，你可以构建一个简单的博客系统，包含用户注册、登录、发布文章、查看文章列表、发表评论和管理后台等功能。