Vue3多页面开发

最新推荐文章于 2024-05-28 14:49:49 发布

Janeb1018

最新推荐文章于 2024-05-28 14:49:49 发布

阅读量1w

点赞数 7

分类专栏： Vue3 文章标签： vue vue3

本文链接：https://blog.csdn.net/chenhaiy/article/details/123697801

版权

Vue3 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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页面为例来说明：

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

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

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

<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

构建结果如下：

Janeb1018

关注

7
点赞
踩
58

收藏

觉得还不错? 一键收藏
打赏
3
评论
Vue3多页面开发

Vue3多页面开发在Vue3中，多页面开发的配置比较简单，下面来看一下具体的操作步骤：1.使用vue创建单页面应用程序见《Vue3脚手架指南》文章2.在项目的根目录下创建vue.config.js文件，如果已经创建则忽略3.在src目录下新建module文件夹，用于存放多页面相关文件module文件夹下用来存放页面文件，一个页面需要有最少三个文件构成，.html、.js、.vue，所以要创建一个最终的页面，我们需要创建三个文件，在实际开发中，最好根据自己的习惯或者公司的.
复制链接

扫一扫