一、项目运行时会先执行 public / index.html 文件
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
如果开发移动端，可以将 meta 标签换成以下内容，禁止用户手动缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
二、执行 src / main.js 文件，在此文件中引入 Vue 与各种插件，并创建 Vue 实例。
// 引入 Vue 中的 createApp 工厂函数 import { createApp } from "vue"; // 引入 App 根组件 import App from "./App.vue"; // 引入路由配置 import router from "./router"; // 引入 Vuex 状态管理 import store from "./store"; // 创建 Vue 实例，并将 App 根组件添加到页面中 const app = createApp(App); // 应用 Vuex app.use(store); // 应用路由 app.use(router); // 将 id 为 app 的元素挂载到 Vue 实例上 app.mount("#app");
注：Vue3 不能再使用 `import Vue from 'vue'` 引入 vue 的构造函数了，必须引入 createApp 这个工厂函数。因为 Vue3 删除了一些无用的内容，更加轻量级。
三、执行 main.js 中引入的各种插件，包括 src / router / index.js 路由配置文件
import { createRouter, createWebHashHistory } from "vue-router"; // 引入组件（方式一） import HomeView from "../views/HomeView.vue"; const routes = [ { path: "/", // 这个 / 表示首页 name: "home", // 路由名称 component: HomeView, // 使用组件（方式一） }, { path: "/about", // 路由路径 name: "about", // 路由名称 // 路由懒加载（方式二） component: () => import("../views/AboutView.vue"), }, ]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router;
四、执行 App.vue 根组件，通过 router-view 加载路由配置的首页（path 为 / 的页面）。
<template> <router-view /> </template>
五、执行路由配置的首页 src / views / HomeView.vue 文件
<template> <!-- Vue3 可以不写根标签 --> <p class="title">{{ title }}</p> </template> <script> // Vue3 支持 Vue2 的写法 export default { name: "HomeView", data() { return { title: "首页" } } } </script> <style scoped> .title { background-color: aqua; } </style>
注：vue-cli 的目录结构并非一成不变，具体的执行流程还需要结合实际情况
