![cover](https://img-blog.csdnimg.cn/e140bead4be043cdbf8f552040be0535.png)
Vue3多页面开发
Vue3多页面开发在Vue3中,多页面开发的配置比较简单,下面来看一下具体的操作步骤:1.使用vue创建单页面应用程序见《Vue3脚手架指南》文章2.在项目的根目录下创建vue.config.js文件,如果已经创建则忽略3.在src目录下新建module文件夹,用于存放多页面相关文件module文件夹下用来存放页面文件,一个页面需要有最少三个文件构成,.html、.js、.vue,所以要创建一个最
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
构建结果如下:
更多推荐
所有评论(0)