• Vue脚手架开发流程

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

    1. html>
    2. <html lang="">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    8.     <title><%= htmlWebpackPlugin.options.title %>title>
    9.   head>
    10.   <body>
    11.     <noscript>
    12.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    13.     noscript>
    14.     <div id="app">div>
    15.     
    16.   body>
    17. 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 实例。

    1. // 引入 Vue 中的 createApp 工厂函数
    2. import { createApp } from "vue";
    3. // 引入 App 根组件
    4. import App from "./App.vue";
    5. // 引入路由配置
    6. import router from "./router";
    7. // 引入 Vuex 状态管理
    8. import store from "./store";
    9.  
    10. // 创建 Vue 实例，并将 App 根组件添加到页面中
    11. const app = createApp(App);
    12. // 应用 Vuex
    13. app.use(store);
    14. // 应用路由
    15. app.use(router);
    16. // 将 id 为 app 的元素挂载到 Vue 实例上
    17. app.mount("#app");

     注：Vue3 不能再使用 `import Vue from 'vue'` 引入 vue 的构造函数了，必须引入 createApp 这个工厂函数。因为 Vue3 删除了一些无用的内容，更加轻量级。

    三、执行 main.js 中引入的各种插件，包括 src / router / index.js 路由配置文件

    1. import { createRouter, createWebHashHistory } from "vue-router";
    2.  
    3. // 引入组件（方式一）
    4. import HomeView from "../views/HomeView.vue";
    5.  
    6. const routes = [
    7.   {
    8.     path: "/",            // 这个 / 表示首页
    9.     name: "home",         // 路由名称
    10.     component: HomeView,  // 使用组件（方式一）
    11.   },
    12.   {
    13.     path: "/about",       // 路由路径
    14.     name: "about",        // 路由名称
    15.     // 路由懒加载（方式二）
    16.     component: () => import("../views/AboutView.vue"),
    17.   },
    18. ];
    19.  
    20. const router = createRouter({
    21.   history: createWebHashHistory(),
    22.   routes,
    23. });
    24.  
    25. export default router;

     四、执行 App.vue 根组件，通过 router-view 加载路由配置的首页（path 为 / 的页面）。

    1. <template>
    2.   <router-view />
    3. template>

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

    1. <template>
    2.   
    3.   <p class="title">{{ title }}p>
    4. template>
    5.  
    6. <script>
    7. // Vue3 支持 Vue2 的写法
    8. export default {
    9.   name: "HomeView",
    10.   data() {
    11.     return {
    12.       title: "首页"
    13.     }
    14.   }
    15. }
    16. script>
    17.  
    18. <style scoped>
    19. .title {
    20.   background-color: aqua;
    21. }
    22. style>

    注：vue-cli 的目录结构并非一成不变，具体的执行流程还需要结合实际情况

    原创作者：吴小糖

    创作时间：2023.10.10

  • 相关阅读:
    Linux环境搭建
    shiro学习笔记——shiro拦截器与url匹配规则
    小猿圈Java讲师分享开发9年Java进阶大全
    Python爬虫教程，从入门到成神
    FPGA学习----Verilog HDL语法(2)
    CRM销售系统价格 一套CRM销售系统多少钱
    31、分布式事务
    22-08-29 西安 JUC（02）线程安全集合类、 juc强大的辅助类
    多数据源+数据库分库分表
    三菱FX3U小项目—运料小车自动化
  • 原文地址：https://blog.csdn.net/xiaowude_boke/article/details/133757049