Vue 3.x + Webpack 5 教学：从无到有搭建个人博客项目

2024-01-17 13:23:10

在这日新月异的 IT 界，一个合格的前端工程师必须紧跟技术的发展，才能在激烈的竞争中脱颖而出。Vue 3.x 和 Webpack 5 的到来，无疑是前端界的一个里程碑。如果你仍然停留在手动搭建项目的时代，那么是时候更新你的知识储备了！

使用 Vue CLI 工具去搭建一个项目。在领导或同事搭建好的项目基础上做业务。长此以往，会导致你对整个项目的把控度越来越低。面试下一家公司的面试官问你，是否手动搭建过 Vue 项目的时候，对配置一问三不知🤔️ 。

本文着重为大家讲解从 0 到 1 搭建 Vue 3.x 开发环境的详细步骤，帮助你快速掌握最新技术，提升项目掌控能力和面试竞争力。

项目结构

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

├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   │   ├── HelloWorld.vue
│   ├── main.js
│   ├── router
│   │   ├── index.js
│   ├── store
│   │   ├── index.js
│   ├── views
│   │   ├── About.vue
│   │   ├── Home.vue
├── public
│   ├── favicon.ico
│   ├── index.html
└── vue.config.js

依赖项安装

首先，我们需要安装必要的依赖项。可以使用以下命令：

npm install vue@next webpack@5

组件开发

接下来，我们可以在 src/components 目录下创建我们的第一个组件，例如 HelloWorld.vue：

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

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

路由设置

然后，我们需要在 src/router 目录下创建我们的路由文件，例如 index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router