百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

Vue3多页面开发

xsobi 2024-12-31 15:27 1 浏览

Vue3多页面开发

在Vue3中，多页面开发的配置比较简单，下面来看一下具体的操作步骤：

1.使用vue创建单页面应用程序

见《Vue3脚手架指南》文章

2.在项目的根目录下创建vue.config.js文件，如果已经创建则忽略

3.在src目录下新建module文件夹，用于存放多页面相关文件

module文件夹下用来存放页面文件，一个页面需要有最少三个文件构成，.html、.js、.vue，所以要创建一个最终的页面，我们需要创建三个文件，在实际开发中，最好根据自己的习惯或者公司的约定来起文件名。我们一般会根据页面的名称来命名。比如登录页：login.html、login.js、login.vue。

4.在module下建立页面

我们这里建立三个页面：login、major、sub/sub1，根据这个需求，为了便于项目文件的管理，我们在module目录下创建相应的子文件sub，在module下创建login和major的三个文件，在sub目录下创建sub1的三个文件，如下图：

5.编写代码

我们以login页面为例来说明：

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

login.js

import { createApp } from 'vue'
import App from './login.vue'

createApp(App).mount('#app')

login.vue

<template>
  <div>登录页</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>

</style>

其他页面的代码，请参照login页面代码编写。

6.在 vue.config.js 文件中配置多页面应用

vue.config.js

module.exports = {
  pages: {
    login: {
      // 入口文件，相当于单页面的 main.js
      entry: 'src/module/login.js',
      // 模板文件
      template: 'src/module/login.html',
      // 编译后 dist 目录下输出的文件，可以包含子目录
      filename: 'login.html'
    },
    major: {
      entry: 'src/module/major.js',
      template: 'src/module/major.html',
      filename: 'major.html'
    },
    'sub1': {
      entry: 'src/module/sub/sub1.js',
      template: 'src/module/sub/sub1.html',
      filename: 'sub/sub1.html'
    }
  }
}

7.启动应用

>npm run server

访问：

http://127.0.0.1:8080/login.htm

http://127.0.0.1:8080/major.html

http://127.0.0.1:8080/sub/sub1.html

8.构建应用

>npm run build

构建结果如下：



相关推荐

C++中的多态(动态多态)究竟是如何实现

为了叙述简便，在本文中，将动态多态性一律简化为多态性。在前面的文章中，我们已经简要介绍了C++的多态性，也介绍了C++的虚函数表，下面，我们来看看C++是如何利用虚函数机制来实现多态性的。（题外话：实...

C++面向对象开发的四大特性:封装、抽象、继承、多态

1、封装封装，即隐藏对象的属性和实现细节，仅对外公开接口，控制程序对类属性的读取和修改。对于类的内部，成员函数可以自由修改成员变量，进行更精确的控制；对于类的外部，良好的封装能够减少耦合，同时隐藏实现...

C#知识|继承与多态

哈喽，你好啊，我是雷工01ProtectedProtected关键字表示这个属性只能给“子类”使用，即只能在子类内部使用，不能通过子类对象去使用；02父类定义父类...

朝文分享(54):深入C++(二十一)——多态

分享兴趣，传播快乐，增长见闻，留下美好！亲爱的您，这里是LearningYard新学苑。...

C++基础语法梳理:引用、封装、继承和多态

本期是C++基础语法分享的第六节，今天给大家来分享一下：（1）引用；...

继承和多态概念及语法

继承是面向对象编程的重要概念之一，它指的是一个类可以从另一个类中继承属性和方法。...

Java的多态如何实现的?

面向对象编程语言三大特征：继承、封装、多态。虽说是三大特征，但其实从多态的角度看，继承和封装都是为了实现多态而准备的，尤其是在一些大型优秀的框架上，多态的使用随处可见，所以说多态是一个十分重要的知识点...

C++中的多态性

封装、继承、多态是C++的三大基本特性。封装可以隐藏实现细节，使得代码模块化；继承可以扩展已存在的代码模块(类);封装和继承的目的都是为了"代码重用"，多态则是为了实现另一个目的：接口...

讲解一下Java 中的多态

多态（Polymorphism）属于面向对象三大特征之一，它的前提是封装形成独立体，独立体之间存在继承关系，从而产生多态机制。多态是同一个行为具有多个不同表现形式或形态的能力。重载式多态，也叫编译时多...

java编程笔记，多态的好处和弊端

测试代码：1.创建Animal.java类作为父类2.创建Cat.java类作为Animal的子类3.创建一个Dog.java类作为Animal的子类4.创建Test.java测试类代码说明：多态的好...

C/C++编程笔记:C++多态性知识详解

多态性一词意味着具有多种形式。简而言之，我们可以将多态定义为消息以多种形式显示的能力。一个真实的多态示例：一个人同时可以具有不同的特征。像男人一样，是父亲，丈夫，雇员。因此，同一个人在不同情况下会表现...

用通俗易懂的多态世界观实例:理解python类的多态

什么是python类的多态python的多态，可以为不同的类实例，或者说不同的数据处理方式，提供统一的接口。用比喻的方式理解python类的多态...

多态——制作饮品

classAbstractDrinking{public://煮水virtualvoidBoil(){cout<<"煮农夫山泉"<&...

python之多态、继承、重写篇

#-*-coding:UTF-8-*-classAnimal:defrun(self):print("动物会跑。。")defsl...

Java面向对象——多态

前两天已经相继介绍了Java面向对象的三大特性之中的封装、继承，所以今天就介绍Java面向对象的三大特性的最后一项，多态~首先讲一下什么是多态，以及多态需要注意的细节什么是多态：一个对象具备多种...

一周热门
最近发表
标签列表