创建Vue应用
前提
确保安装了Node.js，并且当前工作目录正是打算创建项目的目录。
步骤1：创建项目
在命令行中运行以下命令：
npm create vue@latest
该指令会安装并执行 create-vue（Vue官方项目脚手架工具），随后将出现可选功能提示（如TypeScript、测试支持等）：
推荐选择
- 选：Router(单页面应用开发)、ESLint(错误预防)
- 试验特性：选择
none - 示例代码：选择
No（不跳过示例代码）
![image]()
步骤2：安装依赖并启动项目
- 进入项目目录：
cd vue-project
- 安装依赖：
npm install
- 启动开发服务器：
npm run dev
启动成功提示
访问项目
打开浏览器访问 http://localhost:5173，即可看到默认主页面（包含Home、About、Documentation链接）。
步骤3：停止项目
在命令行中按下：
Ctrl + C
随后输入 Y 确认终止：
终止批处理操作吗(Y/N)? y
步骤4：项目结构调整
修改 App.vue
删除 views 中的所有页面，保留以下核心内容：
<template><RouterView />
</template>
- 说明：
<RouterView />是Vue Router提供的内置组件，作为路由匹配组件的渲染出口（占位符），会根据URL路径渲染对应的组件。
新建 main.vue 页面
在 views 目录下新建 main.vue，内容如下：
<script setup>
</script><template><div><div><h1>About</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod,nisl nec ultricies lacinia, nisl nisl aliquam nisl, eu aliquam nisl</p></div></div>
</template><style scoped>
</style>
修改路由配置（router/index.js）
import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'main',component: () => import('../views/main.vue'),},],
})export default router
步骤5：重新运行项目
执行启动命令：
npm run dev
访问 http://localhost:5173，将看到 main.vue 中的内容。
核心代码解释
router/index.js 代码解析
导入路由核心方法
import { createRouter, createWebHistory } from 'vue-router'
createRouter：Vue Router 4 中创建路由实例的核心函数。createWebHistory：创建HTML5 History模式的路由历史记录（无 # 前缀，需后端配置支持）。
创建路由实例
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL), // 路由历史模式（基础路径由Vite环境变量提供）routes: [ // 路由规则数组{path: '/', // 匹配的URL路径（根路径）name: 'main', // 路由唯一名称（用于编程式导航）component: () => import('../views/main.vue'), // 懒加载组件（代码分割，减小初始加载体积）},],
})
导出路由实例
export default router
- 供Vue应用入口文件（main.js）挂载使用。
输入输出分析
- 输入：依赖 Vue Router 4 库、
../views/main.vue组件。 - 输出：配置好的路由实例
router。
main.js 代码解析（入口文件）
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入路由实例const app = createApp(App) // 创建Vue应用实例
app.use(router) // 挂载路由
app.mount('#app') // 挂载应用到页面#app元素