【Vue】结构

小数点儿_

已于 2023-02-10 10:38:12 修改

阅读量183

点赞数

分类专栏：前端文章标签： vue.js javascript 前端 node.js typescript

于 2022-05-10 15:27:51 首次发布

本文链接：https://blog.csdn.net/m0_49271518/article/details/124604932

版权

前端专栏收录该内容

41 篇文章 4 订阅

订阅专栏

初始化

npm init vue@3
在这里插入图片描述

框架

<!-- 从 index.html 开始运行 -->
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="app"></div>  
    <script type="module" src="/src/main.ts"></script>
    <!-- 两者配合才能把 App 挂载到 `<div id="app"></div>` 中 -->
    <!-- 来到/src/main.ts中 -->
  </body>
</html>

// /src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

app.use(router); // app.use 是 express 调用中间件的方法。所谓“中间件（middleware），就是处理HTTP请求的函数，用来完成各种特定的任务，比如检查用户是否登录、分析数据、以及其他在需要最终将数据发送给用户之前完成的任务

// app.use() 里面使用的参数，主要是函数。但这个使用，并不是函数调用，而是使能的意思。当用户在浏览器发出请求的时候，这部分函数才会启用，进行过滤、处理

app.mount("#app");

// 后三行配合才能把 App 挂载到 `<div id="app"></div>` 中
// app 从 ./App.vue 创建来，又调用了 ./router

<!-- ./App.vue -->
<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "@/components/HelloWorld.vue";
</script>

<!-- template 部分显示 -->
<template>

  <!-- header 页眉 -->
  <header>
    <img 图像的一些信息 />

    <div class="wrapper">
      <HelloWorld msg=" " />   <!-- 来自@/components/HelloWorld.vue -->

      <nav>
        <!-- nav导航 分隔线显示，RouterLink 是路由包里的标签，路由点击的链接 -->
        <!-- 因为./route/index.ts 里边有这两个to -->
        <!-- app.use(router);的时候把 ./src/router/index.ts 里的 router 导入了-->
        <RouterLink to="/">Home</RouterLink>    
        <RouterLink to="/about">About</RouterLink>  
      </nav>
    </div>
  </header>
  
  <RouterView />
  <!-- 路由包里的标签，把路由到的东西展示出来 -->
</template>

<style>
</style>

// ./src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView, //去往../views/HomeView.vue
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../vsiews/AboutView.vue"),
    },
  ],
});

export default router; //导出该模块

                          -- src/App.vue ---------->         
index.html -- src/main.ts |                        | HomeView.vue & AboutView.vue
                          -- src/router/index.ts -->