当前位置：首页 > article >正文

「从零开始的 Vue 3 系列」：第十三章——架构一个Vue项目（简单版）

article 2024/10/25 13:14:29

前言
本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。

从零开始使用 Vite 和 Vue 3 创建一个项目框架，过程相对简单，Vite 作为构建工具提供了快速的开发环境和极高的性能，而 Vue 3 则是现代前端开发的热门框架。下面是详细的步骤，从安装环境到构建基础框架的完整流程。

环境准备
确保你的开发环境中已经安装了以下工具：
Node.js：建议使用 LTS 版本，下载地址 Node.js。
npm 或 yarn：Vite 支持这两种包管理器，任选其一。
验证 Node.js 是否已经安装：

node -v
npm -v  # 或 yarn -v

使用 Vite 创建 Vue 3 项目

# 使用 npm 创建项目
npm create vite@latest my-vue-app --template vue

# 或使用 yarn 创建项目
yarn create vite my-vue-app --template vue

安装依赖并运行项目

cd my-vue-app
npm install  # 或 yarn

4.项目目录结构
项目的基础目录结构如下：

my-vue-app/
├── index.html
├── package.json
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── vite.config.js

index.html：项目的入口 HTML 文件。
src/main.js：项目的入口 JS 文件，负责创建 Vue 实例并挂载到 DOM。
src/App.vue：主组件文件，所有页面组件的父组件。
vite.config.js：Vite 配置文件。

设置路由（Vue Router）
Vue 3 项目一般都会使用 Vue Router 来处理多页面应用。首先安装 Vue Router：

npm install vue-router@4

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

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

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

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

export default router;

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

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

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

如果需要配置动态路由或按钮权限，详情请参考第九章与第十章：
「从零开始的 Vue 3 系列」：第十章——深入理解自定义指令
「从零开始的 Vue 3 系列」：第九章——vue3中实‘动态路由‘与“权限管理“
6. 配置状态管理（Pinia）
首先安装 Pinia：

npm install pinia

在 src 目录下创建一个 store 文件夹，并在其中创建一个 index.js 文件：

// src/store/index.js
import { defineStore } from 'pinia';

export const useMainStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

在 main.js 中引入并使用 Pinia：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
import router from './router';

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount('#app');

具体更多使用请参考第五章：
「从零开始的 Vue3 系列」：第五章——拥抱 Pinia - Vuex 的强劲对手解析与使用
7. 配置全局样式
你可以在 src/assets 目录下创建一个 styles.css 文件，并在 main.js 中引入它：

/* src/assets/styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

在 main.js 中引入这个样式文件：

import './assets/styles.css';

打包优化：你可以在 vite.config.js 文件中配置打包的相关内容，比如压缩、资源优化等。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
});

组件开发：接下来你可以创建自己的 Vue 组件，将它们放在 src/components 目录下。每个组件都可以是一个 .vue 文件，例如 Home.vue 和 About.vue：

<!-- src/components/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

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

<!-- src/components/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
  </div>
</template>

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