Vue脚手架开发流程

一、项目运行时会先执行 public / index.html 文件

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 标签换成以下内容,禁止用户手动缩放。

html 复制代码
<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 实例。

javascript 复制代码
// 引入 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 路由配置文件

javascript 复制代码
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 为 / 的页面)。

html 复制代码
<template>
  <router-view />
</template>

五、执行路由配置的首页 src / views / HomeView.vue 文件

html 复制代码
<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

相关推荐
好开心33几秒前
js高级06-ajax封装和跨域
开发语言·前端·javascript·ajax·okhttp·ecmascript·交互
小镇程序员5 分钟前
vue2 src_Todolist消息订阅版本
前端·javascript·vue.js
Zack No Bug13 分钟前
解决报错:rror: error:0308010C:digital envelope routines::unsupported
前端·javascript·vue.js
飞奔的波大爷22 分钟前
springboot vue工资管理系统源码和答辩PPT论文
vue.js·spring boot·后端
QTX1873023 分钟前
原生JS和CSS,HTML实现开屏弹窗
javascript·css·html
rhythmcc1 小时前
【GoogleChrome】在开发者工具中修改js、css并生效
开发语言·javascript·css
凌虚1 小时前
Web 端语音对话 AI 示例:使用 Whisper 和 llama.cpp 构建语音聊天机器人
前端·人工智能·后端
小宇python1 小时前
Web应用安全入门:架构搭建、漏洞分析与HTTP数据包处理
前端·安全·架构
珹洺2 小时前
从 HTML 到 CSS:开启网页样式之旅(二)—— 深入探索 CSS 选择器的奥秘
前端·javascript·css·网络·html
竺梓君2 小时前
JavaScript内存管理机制解析
javascript·全栈