vue3.x 多页面项目

最新推荐文章于 2024-09-27 16:36:41 发布
最新推荐文章于 2024-09-27 16:36:41 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： web 文章标签： Vue3 多页面应用 目录结构 vue.config.js 页面路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanqin_/article/details/116035110
版权

vue适合单项目，但也可以多页面

创建vue3项目后，修改了目录结构

目录结构如下：
在这里插入图片描述
我在 src 下创建了应该文件夹名为 views 用于储存各个页面，
每个页面文件夹下都有一个.html文件，
并且<body>标签下都有一个<div id=app>标签，用于挂载对应的vue文件
在这里插入图片描述
每个目录下都需要有一个
.js 文件代替原先的 main.js
.vue 代替原先的 app.vue

我login页面的例子

login.js：
在这里插入图片描述
login.vue：
在这里插入图片描述

重点是，需要在项目根目录下创建一个 vue.config.js
在这里插入图片描述
重点是pages那一块，每个页面都需要指向自己的main.js和app.vue（我改了名好辨认）这样打包才不会出问题，title是打包后 <title> 标签显示的东西，不过我没用，希望有人能回答一下

大概就这样，注意路径就行
然后直接访问对应的html就行啦
在这里插入图片描述

阿杰_
关注
专栏目录
Vue 项目构建与开发入门:多页路由与模板解析
m0_52343631的博客
06-22 437
在模板渲染中，我们只能够使用 htmlWebpackPlugin 内部的一些属性和方法来进行模板的定制化开发，那么如果遇到需要根据不同环境来引入不同资源，同时不同模板间的配置还可能不一样的需求情况的话，我们使用自定义配置会比较方便。比如我们需要在生产环境模板中引入第三方统计脚本：...return `return ''}),...然后在页面模板中通过获取自定义配置对象并进行输出：同时为 addScript 方法添加参数 from：return `
Vue多页面应用开发
BigFamer的博客
06-30 2558
一、前言 我们平常对Vue的印象有这样一种感觉：Vue就像专门为单页面应用（SPA）而生，因为Vue的官方文档中也有这样的描述： 实则非也，因为vue在工程化开发的时候依赖于 webpack ,而webpack是将所有的资源整合到一块后形成一个html文件 一堆 js文件, 如果将vue实现多页面应用,就需要对他的依赖进行重新配置,也就是修改webpack的配置文件. vue的开发有两种，一种是直接的在script标签里引入vue.js文件即可，这样子引入的话个人感觉做小型的多页面会比较舒坦，一旦做大型一
vue3-ts-vite：vue 项目 配置 多页面应用
snowball的博客
08-07 9104
Vue是一种单页面应用程序（SPA）框架，这意味着Vue应用程序通常只有一个HTML页面，而在该页面上进行动态的内容更改，而不是每次都加载新的HTML页面。但是，有时候我们需要在同一应用程序中拥有多个独立的页面，每个页面都可以单独处理路由和逻辑。这就是多页面应用（MPA）的概念。在Vue中，实现多页面应用程序的方法是使用Vue的多入口特性，即通过配置多个入口文件来实现。每个入口文件都有自己的路由配置、组件和其他相关资源。
用最短时间，实现Vue3快速上手开发（全文2万字）
最新发布
wzc200406的博客
09-27 749
vue3快速入门，了解vue3语法新特性，这里有setup语法糖、组合式api、响应式数据构建、监视函数的使用、vue3路由组件、pinia集中状态管理工具的使用、vue3的组件通信、插槽的使用、
vue3配置多页面
云霸屏CSDN官方博客
10-13 1280
vue3配置多页面
vue 3.x 改造 多页面
魏毅博的博客
07-31 374
简单暴力,搭好项目之后,在 vue.config.js (没有的直接在根目录新建一个) 加入以下配置,详细建目录结构参考上一篇 vue2.x ...
VUE框架开发项目实战(含多页面)
qq_31629679的博客
06-08 3189
初始化创建Vue项目 使用vue-cli搭建项目（注：建议安装淘宝镜像，使用cnpm执行下面操作） 在命令窗口中输入 npm install -g vue-cli 安装vue-cli。 输入 vue init webpack vue-demo 创建一个名为vue-demo的项目。 输入 cd vue-demo 进入项目目录。 输入 npm install 安装项目依赖。 npm run dev 运行项目。 网页打开localhost:8080，就可以看到项目页面，如下图。 注释：在执行
vue3.x中使用cesium，vue3.x+Cesium
05-04
将Cesium集成到Vue3.x项目中，可以创建交互式的3D地图应用。以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`...
仿拼多多团购商城项目实战Vue2.x+Node.js(源码)
01-02
通过这个实战项目，学习者不仅能掌握Vue2.x和Node.js的基本用法，还能了解到完整的电商项目开发流程，包括前后端交互、数据库设计、用户认证、数据安全等多个方面，对提升综合开发能力大有裨益。
基于Vue3.x和Vant4.x模仿bilibili小程序源码.zip
05-19
总的来说，这个项目不仅涉及Vue3.x和Vant4.x的基本使用，还涵盖了前端开发中的状态管理、数据请求、UI设计等多个方面，对于学习和理解这两项技术以及小程序开发流程具有很高的参考价值。开发者可以通过研究这个源码...
详解基于webpack2.x的vue2.x的多页面站点
08-29
在本篇文章中，我们将深入探讨如何使用webpack 2.x与vue 2.x构建一个多页面站点。Vue.js是一个流行的前端框架，而webpack是一个强大的模块打包工具，它们结合可以帮助开发者高效地组织和构建大型应用。在多页面站点...
Vue3多页面开发
chenhaiy的博客
03-23 1万+
Vue3多页面开发 在Vue3中，多页面开发的配置比较简单，下面来看一下具体的操作步骤： 1.使用vue创建单页面应用程序 见《Vue3脚手架指南》文章 2.在项目的根目录下创建vue.config.js文件，如果已经创建则忽略 3.在src目录下新建module文件夹，用于存放多页面相关文件 module文件夹下用来存放页面文件，一个页面需要有最少三个文件构成，.html、.js、.vue，所以要创建一个最终的页面，我们需要创建三个文件，在实际开发中，最好根据自己的习惯或者公司的.
Vue多页面项目模板
08-11
Vue 多页面项目模板
vue ui创建项目_vue-cli3创建多页面项目
weixin_39623350的博客
12-10 259
开发了很多个单页面的项目，也开发了很多原生的项目，就是一直没机会开发多页面和单页面混合的项目，于是自己去查了一些资料，用的是vue-cli3脚手架搭建了一个多页面和单页面混合的小demo。首先，vue-cli3是脚手架的版本是3.x，这并不是说vue已经有了3.0。Vue-cli3默认就给了多页面的配置，不需要我们多做什么：想了解vue-cli3的更详细的可以去官网查看：https://cli.v...
vue多页面开发
Mlis_的博客
10-30 1万+
为什么使用多页面开发 vue是单页面应用，对多页面的页面间的相互跳转间没有过渡效果，难以维护；当一个应用越来越大的时候单页面模式应付不来，这时候就需要使用多页面应用了。 多页和单页应用模式的对比 转载于：https://www.cnblogs.com/xiyangcai/p/8609773.html vue在工程化开发的时候依赖于webpack，而webpack是将所有的资源整合到一块后形成一个html文件一堆js文件，如果将vue实现多页面应用，就需要对他的依赖进行重新配置，也就是修改webpack的配
实战 Vue 之配置多页面应用
热门推荐
杏子
07-02 1万+
最近一直在做企业钉钉应用开发，即每个功能模块都是一个单独的应用，单独的页面，配置到钉钉里面，就可以单独访问了。比如开发登陆模块的时候，会搭建一套环境，创建 login.html 以及相应的 js 和 css。再开发注册模块的时候，又搭建一套环境，创建 register.html 以及相应的 js 和 css。
基于 vue3.x适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发
01-01
基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。 由于 Vue3 不再支持 IE11，...
vue html多页面应用,Vue多页面应用开发
weixin_39966644的博客
06-03 419
平时Vue只用来做单页面应用开发，其实它是可以做多页面开发的Vue在工程化时，依赖webpack，webpack从一个入口文件将依赖的所有模块都整合在了一个页面所以要实现多页面开发，必须修改webpack的配置配置步骤1.首先创建新页面的html文件、入口js、主组件vue例如：src\pages\brand\brand.htmlsrc\pages\brand\brand.jssrc\pages\...
vue搭建多页面开发环境
飞翔的熊blabla
02-05 306
自从习惯开发了单页面应用，对多页面的页面间的相互跳转间没有过渡效果、难维护极度反感。但是最近公司技术老大说，当一个应用越来越大的时候单页面模式应付不来，但是没讲怎么应付不来，所以还得自己去复习一遍这两者的区别： 这样对比的话，单页面的优势确实很大，但当我自己去打开某宝，某东的移动端页面时，确实它们都是多页面应用。为什么？我能想到的就几点： 1.单页面使用的技术对低版本的浏览器不友好，大公司还得兼顾使用低版本浏览器的用户啊 2.功能模块开发来说，比如说单页面的业务公用组件，有时候你都不知道分给谁开发
vue3多页面配置你一定会遇到的问题，踩坑指南
baidu_41601048的博客
08-11 1108
就能正常访问page1，和page2了，展示的内容分别是page1项目和page2项目的app.vue的内容。但是我们的page1和page2项目可不止一个app.vue,我们要通过路由配置不同的路由访问不同的页面。这是我们配置的最原始的一个结构,如图，带+的是新增的文件（文件夹）特别注意新增的page1.html和page2.html，这两个模版文件是一定不能忘记的。我们在page1和page2这两个项目下分别新增了一个views文件夹，用来存放页面，同时新增了一个home和list页面，用来测试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值