前言
本系列将从零开始，系统性地介绍 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 # 或 yarn4.项目目录结构
项目的基础目录结构如下：
my-vue-app/
├── index.html
├── package.json
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.js
├── vite.config.jsindex.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>更多组件的使用请参考：
[从零开始的 Vue3 系列]：第四章——Vue3 中常用组件通信全解析
10. 项目构建与发布
当开发完成后，你可以使用以下命令进行项目的构建和发布：
npm run build # 或 yarn build
这将会在项目根目录下生成一个 dist 文件夹，里面包含了打包后的生产环境代码。你可以将这个目录部署到任何静态资源服务器（如 Nginx、Apache 或 Vercel 等）。
更多部署使用请参考：
「从零开始的 Vue 3 系列」：第十四章——项目部署到服务器流程（简单版）
总结
通过 Vite 和 Vue 3 构建一个现代化的前端框架非常简单且高效。以上步骤从项目初始化、依赖配置、组件开发到项目打包，完整地介绍了如何从零开始创建一个 Vue 3 项目。
)
