02vue项目如何配置多页面

最新推荐文章于 2024-05-15 13:23:20 发布
最新推荐文章于 2024-05-15 13:23:20 发布
阅读量1.6k 收藏 14
点赞数 5
分类专栏： 前端开发 文章标签： webpack vue vue-cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41260655/article/details/114465583
版权

vue项目如何配置多页面

前言，因为我们做项目不可能只有一个界面，就简单说最起码的后台页面，登录界面，主页面最基本的加在一起还三个页面，上次所言cli脚手架搭建一个从0到1的项目，只是单页面，cli脚手架虽然能快速的帮我们搭建一个项目，配置好基础简单的的webpack的配置内容，但是不一定和我们的需求完全一致，我们需要增加额外的配置，我们在项目下增加一个名为vue.config.js文件增加所需的配置信息，内置的merge会进行webpack的配置的整合。

我们增加多页面文件信息如下图所示
在这里插入图片描述

1、vue.config.js最基本的配置信息–配置入口、输入、模板信息

在这里插入图片描述

publicPath是公共路径，写到当前目录下

outputPath是输出目录文件夹，也就是打包后的文件目录

pages下的每个页面中的entry和template是多页面的入口和模板的路径信息

2、配置开发信息—devServer

在这里插入图片描述

3、自定义的webpack的信息

在这里插入图片描述

4、配置文件信息

给每个页面文件下增加两个文件夹（根据自己情况）和App文件，然后在main中进行引用
在这里插入图片描述

main.js文件配置如下图
在这里插入图片描述

如果想用element-ui的话，再增加一些内容如下

在这里插入图片描述

如果想要配置一些统一的axios和mitt直接引用

在这里插入图片描述
好了，今天有点晚了，碎觉。下期再见！

Ezms
关注
  • 5
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Vue组件中使用多个Vue组件搭建一个页面
weixin_41908867的博客
10-28 4061
在Vue组件中使用多个Vue组件搭建一个页面 预设页面结果 全局注册 是在main.js中，通过import和Vue.conponent进行组件注册的。 import Vue from 'vue' import App from './App.vue' import Header from './components/Header.vue' import Content from './components/Content.vue' import Button from './components/But
vue-cli 2.x 配置多页面
邱先生的博客
08-07 2724
1.适用于Vue-cli 2.x 适用于Vue-cli 2.x 创建相应的html静态文件。 创建匹配html的.vue文件和对应的.js文件 修改config/index.js 修改build/webpack.base.conf.js 修改build/webpack.dev.conf.js 修改build/webpack.prod.conf.js 下面以创建login.html为所需要...
2024年最新实战 Vue 之配置多页面应用_vue 多页面(2)，2024年最新前端技术类校招面试题汇总
最新发布
2401_84447262的博客
05-15 337
三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
vue项目多页面入口配置
weixin_34216196的博客
01-07 1883
做后台管理项目时，根据vue，element官网教程可搭建一个简易的项目结构，但是这个搭建的项目结构默认是单页应用的配置，如果我想脱离这个container布局容器，实现login页面无外层容器、顶栏菜单、侧边栏菜单，则需另外配置多页面入口配置。具体实现如下：一、项目目录更改1、重命名并放入common文件夹下App.vue =>common/ index.vue Main.js =&g...
vue项目中多个入口的配置
weixin_30653097的博客
03-30 891
出处：http://www.qingpingshan.com/jb/javascript/221105.html 基于vue2.0生成项目，一段时间都在找如何配置成多个页面的。网上有这样的例子相对也是比较详细的，但是还是有些许不一样的地方的。所以，我还是记录下来，当然我也是参考了网上的资料的。 当然先来个vue的项目，打开命令行工具，对边进入一个目录下。 vue init web...
【vue】配置多入口
qq_43319749的博客
02-03 600
- 在做一个客户端系统和后台管理系统在同一个项目工程下的项目，因此要配置多入口进行线上访问。记录一下过程： （一）修改文件结构 先将根目录下的index.html文件复制，命名为indexAdmin.html：注意修改复制文件中页面下id； 同样复制src目录下的App.vue 文件 为AppAdmin.vue；修改复制文件中的id以及相关样式名称等； 复制src下的main.js为mainAd...
Vue3.0配置多页面应用
03-17
Vue3.0是一个备受瞩目的前端框架更新，它引入了许多...总的来说，Vue3.0配置多页面应用是一个涉及项目结构、配置、路由和资源管理的综合过程。合理规划和配置，能够帮助开发者构建出结构清晰、易于维护的大型Web应用。
vue项目添加多页面配置的步骤详解
10-16
在Vue项目中，多页面配置是一项重要功能，尤其在大型应用中，可能需要根据不同的业务模块划分多个独立的页面。本文将详细介绍如何在已有的Vue项目中添加多页面配置，无需调整现有目录结构。 首先，我们需要理解为...
vue项目多入口配置
10-10
通过这些配置，我们可以灵活地管理Vue项目中的多个入口，实现独立的路由和页面。同时，这样的配置还有助于提高代码组织和维护效率，特别是在团队协作中，能够确保每个人都遵循统一的规范和流程。
vue配置多页面的实现方法
08-27
Vue.js 是一个流行的前端框架，用于构建用户界面。...遵循这些步骤，你就可以成功地为Vue项目配置多页面应用了。这种方法有利于大型项目中不同团队的协作，每个团队可以专注于他们自己的页面，同时保持项目结构的清晰。
基于vue-cli4搭建webpack模版的vue项目，改造成多页面入口项目
热门推荐
Coder.Monkey的工作簿
08-05 1万+
一、 基础环境 老调重弹，先安装nodejs，再全局安装vue-cli,webpack，相应的版本差异，自行调整。 另建议安装一个开发工具，常规用Visual Studio Code 具体步骤，参考：https://blog.csdn.net/justflow/article/details/109273620 二、创建vue单页面项目 vue-cli有两种方式创建Vue项目，分别是 vue create project-name vue init webpack project-...
新建vue项目如何配置路由实现后台管理系统框架（登录窗、主界面、子界面）
gdgztt的专栏
03-07 2708
要实现一个后台管理系统，大体会涉及到两种类型的页面，一种是独立页面，一种是嵌套页面，独立页面：以登录页面为例，这种页面是独立的，没有区域嵌套，嵌套页面：以首页，用户管理页面为例，像左侧边栏，顶部的欢迎栏是固定的，里面的内容来自子页面，所以独立页面要与嵌套的主界面要是同一级，被嵌套的子页面放到嵌套主界面面的子级，在路由配置上要使用子路由。
Vue cli3 或 Vue cli4 配置多入口多页面问题（详解）
QINGYUMARY的博客
03-05 3759
本项目用的是Vue cli4,如果是vue cli3也是可以参考使用的 省略创建项目这个步骤，接下来在创建好的项目里找到public文件夹，复制多个index.html入口文件，并且修改名称； 每个入口文件只是文件名改变，里面内容复制原有的index.html，每个文件里id="app"也是不变的 在src文件夹下创建一个pages文件 ——>再创建四个文件夹：admin 、index、mobile、web ——> 每个文件夹下都要有App.vue、main.js、router.j
vue-cli2构建多页面：改造原配置文件，实现自动构建多页面入口和模板文件
猿始森林
04-22 1973
一、改造utils.js，添加getModules方法，方法中需要使用到node的glob模块 1、安装glob模块 npm i glob -D 2、创建getModules方法，获取文件名以及对应路径 const glob = require('glob'); // 构建多页面（获取文件名以及对应路径） exports.getModules = function (globPath) { ...
vue项目配置多入口多出口——方法一
localhost_1314的博客
11-21 1万+
问题引入： 在vue项目中，我们通常使用vue-cli脚手架生成项目，生成的是一个单页面的工程，main.js是整个项目唯一的入口，整个项目都在一个index.html文件中。 但是，有时候，这种默认结构不能满足项目需要 大项目使用单页面负载过重 多页面利于模块独立部署 所以，我们需要将项目配置成多入口多出口 有两种配置方法： 先介绍一种比较笨但是好理解的方法 修改脚手架生成的目录结...
Vue2-多入口配置
weixin_33688840的博客
10-18 546
能点进来的，肯定是对单入口了解透彻，对Vue2了解的人了。话不多说。上干货。 前期准备 1.一个完成能运行的Vue单页项目.(本文以Vue提供的单页模板为例子)2.若没有，请找度娘。 目录 我的src目录有修改，如下： 本例要修改的配置文件如下： config/index.js修改 修改如下： 代码如下：在config/index.js中...
vue多入口配置
xiao1215fei的专栏
03-29 1937
vue多入口文件配置
vue单页面改造多页面应用
发果叁
06-24 2166
src目录为我们平时开发的目录，dist为打包后的目录，整体结构如图1 将当前项目改造成多页面目录 pages下为我们开发的目录文件，改造过程就是将原src下所有目录结构复制到home，index每个页面单独一份 为了提现多页面优势，这里我们选用两款ui框架，以便最后做下打包体积对比 在home和index中分别引入 home页面类似，然后我们更改vue.config.js 现在我们打包，看一下生成的目录结构 可以看到打包出来的是混在一起的。我们下一步就是将他们拆分开，并且可配置命令单独打包 思路是循环p
Vue3多页面搭建以及两种按页面打包的方式
qq_43517599的博客
11-22 1840
先来看一下项目结构，新建pages文件夹，该目录下多页面又分别按名称建立相应的文件夹，vue文件其实就是组件而js文件就是入口，相当于单页面搭建好时的main.js 文件，vue3还需要在根目录下新建一个vue.config.js文件，此文件名字时规定的。 配置vue.config.js文件 let pageMethod = require('./src/utils/getPages') let...
vue项目如何配置登录页面
06-07
要在Vue项目中配置登录页面，可以按照以下步骤进行： 1. 创建一个名为“login”的组件，该组件将包含登录表单和相关逻辑。 2. 在Vue Router中设置路由，以便在用户访问应用程序时显示登录页面。 3. 在App.vue中使用<router-view>来呈现路由的内容。 4. 在登录组件中使用Vue的数据绑定来处理用户输入的表单数据。 5. 在登录组件中使用Vue的事件机制来处理登录表单的提交操作。 6. 在登录组件中使用Vue的路由跳转功能将用户重定向到应用程序的主页面。 下面是一个示例代码： 1. 创建一个名为“login”的组件： ``` <template> <div> <h1>Login</h1> <form> <label>Username:</label> <input type="text" v-model="username"> <label>Password:</label> <input type="password" v-model="password"> <button type="submit" @click.prevent="login">Login</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // TODO: handle login logic this.$router.push('/') } } } </script> ``` 2. 在Vue Router中设置路由： ``` import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' Vue.use(Router) export default new Router({ routes: [ { path: '/login', name: 'Login', component: Login } ] }) ``` 3. 在App.vue中使用<router-view>呈现路由的内容： ``` <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> ``` 这样，当用户访问应用程序时，将显示登录页面，并且在登录成功后将被重定向到主页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值