Vue脚手架开发流程

一、项目运行时会先执行 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 的目录结构并非一成不变，具体的执行流程还需要结合实际情况

原创作者：吴小糖

创作时间：2023.10.10

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/100392.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！