创建 Vue 应用

创建Vue应用

前提

确保安装了Node.js，并且当前工作目录正是打算创建项目的目录。

步骤1：创建项目

在命令行中运行以下命令：

npm create vue@latest

该指令会安装并执行 create-vue（Vue官方项目脚手架工具），随后将出现可选功能提示（如TypeScript、测试支持等）：

推荐选择

• 选：Router(单页面应用开发)、ESLint(错误预防)
• 试验特性：选择 none
• 示例代码：选择 No（不跳过示例代码）
  

步骤2：安装依赖并启动项目

1. 进入项目目录：

cd vue-project

2. 安装依赖：

npm install

3. 启动开发服务器：

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元素