vue-cli多页面配置(vue2.0)

目录

概述

多页面的配置

步骤1:编写配置文件 vue.config.js

步骤2:在src目录下创建目录pages

步骤3:创建HTML文件(主组件挂载点)

测试

完毕,总结


概述

我们知道使用vue脚手架vue-cli创建的项目默认是SPA(单页面应用),但是许多场景单页面应用并不能满足我们的需求。

对于vue-cli创建的项目配置多页面应用,最近有需求,但是很久没有配置了有点生疏,百度了一下,许多文章对于我来说篇幅过于长且繁琐,所以自己总结一下简单配置多页面应用的步骤。

多页面的配置

 目标 使用vue-cli创建vue“空”项目,为这个项目搭建多页面配置,登录页和首页

前提:创建一个vue空项目,这个不做演示了(vue create more_page)

 创建好的项目结构:

步骤1:编写配置文件 vue.config.js

添加编写配置项:pages

pages: {// 配置主页index: {entry: './src/main.js',   // 页面入口文件template: './public/index.html',  // 页面主组件挂载的html文件title: '首页' // 页面标题},// 配置其他页面login: {entry: './src/pages/Login/Login.js',template: './public/login.html',title: '登录'}}

 注意看注释 

这里的index是默认访问的首页,例如,我们把服务器跑在本地的8080端口,

那么访问localhost:8080localhost:8080/index都是访问到项目首页,

而访问localhost:8080/login就会访问到登录页。

** 这样配置后,多页面是不是就有眉目了,接下来就去创建相应的文件夹和文件基本就没问题了。

步骤2:在src目录下创建目录pages

 

在pages目录中,就可以定义每一个子页面了,就像上图中的这样,需要有最基本的两个文件(示例中的Login.js 和 Login.vue),入口文件和主组件(类似APP,全部组件的父组件)。

 入口文件login.js: 

import Vue from 'vue'
import Login from './Login.vue';new Vue({render: h => h(Login),
}).$mount('#login')

注意导入的主组件Login.vue,将主组件挂载到HTML页面上(待会儿创建),#login是自定义的,下面会说明到。

 主组件Login.vue  

内容随意了,因为仅说明多页面的访问。

步骤3:创建HTML文件(主组件挂载点)

在public下创建login.html,在<body>中添加一个盒子div给id(此处的id就是Login.js中挂载的#id)

 

测试

 启动项目,访问localhost:8080 (模拟首页) localhost:8080/login(模拟登录页) 进行测试。

 

完毕,总结

其实实现多页面很简单,就是在vue.config.js文件中进行多页面的配置,把入口文件,主组件,html文件做好关联即可。
关于其他文件夹(如component, view)的放置,其实组件间能相互引用就行,但最好把一个页面(例如登录页面)的所有东西(组件,vue视图)放在一个文件夹下。

 **注意** :本片博客仅在说明多页面的配置,有诸多不规范,更多用途请自行发挥。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/3579.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1haclon 简单操作

文章目录 *读取图片 read_image(Image,claudia) *转换为灰度 rgb1_to_gray(Image,GrayImage)阈值分割 区域连接 获取最衣服 *读取图片 read_image(Image,claudia) *转换为灰度 select_shape (Connection, SelectedRegions, area, and, 40963.3, 44724.8) rgb1_to_gray(Image,Gr…

Redis远程字典服务

目录 前言 1.NoSQL 1.1NOSQL和关系型数据库比较 1.2非关系型数据库的优势 1.3关系型数据库的优势 ​编辑 2.主流的NOSQL产品 键值(Key-Value)存储数据库 列存储数据库 文档型数据库 图形(Graph)数据库 3.Redis简介 redis的应用场景 4.命令操作 4.1字符串类型 s…

zabbix监控自己

目录 一、实验环境准备 二、server端 1、配置阿里云yum源 2、部署lamp环境 3、启动lamp对应服务 4、准备java环境 5、源码安装zabbix 6、mariadb数据库授权 7、创建zabbix程序用户并授权防止权限报错 8、修改zabbix配置文件 9、配置php与apache 10、web安装zabbix …

访问Liunx文件系统

访问Liunx文件系统 识别文件系统和设备 存储管理概念 Linux服务器上文件按文件系统层次结构访问。该文件系统层次结构测试由系统可用的存储设备所提供的文件系统组装而来。每个文件系统都是一个已格式化的存储设备&#xff0c;可用于存储文件。 文件系统和挂载点 要让文件系…

STM32学习笔记(十三)丨USART通用同步/异步收发器(串口外设的基本使用丨串口发送数据、串口发送+接收数据)

本篇文章包含的内容 一、STM32的USART外设1.1 STM32的USAER外设简介1.2 USART外设的结构和工作原理1.3 串口通信数据帧1.4 起始位侦测和USART的噪声判断机制1.5 波特率发生器 二、串口发送和接收数据包2.1 HEX数据包2.2 文本数据包2.3 固定包长HEX数据包接收2.4 可变包长文本数…

eyoucms没有图片随机调用一张图片

在没有封面图片的时候&#xff0c;会随机显示出几张色彩不同的风格图片。这样整个效果就好很多&#xff0c;也能减少工作量&#xff0c;毕竟我们没太多时间去找封面图处理。我就想着用Eyoucms能执行PHP的功能&#xff0c;用rand随机下这几张图片出来&#xff0c;我用mt_rand&am…

使用Pandas计算两个系统客户名称的相似度

引言&#xff1a; 在日常业务处理中&#xff0c;我们经常会面临将不同系统中的数据进行匹配和比对的情况。特别是在涉及到客户管理的领域&#xff0c;我们需要确保两个系统中的客户记录是准确、一致和无重复的。 本文将介绍如何使用Python的Pandas库来处理这个问题。我们将以…

openpnp - 相机图像亮度太高的解决方法

文章目录 openpnp - 相机图像亮度太高的解决方法概述笔记设置相机的合适参数白平衡补充 - 用恒压横流降压模块调节底部相机环形灯的初步实验END openpnp - 相机图像亮度太高的解决方法 概述 看到同学在群里讨论问题, 说相机补光灯亮度太高了, 导致openpnp图像惨白惨白的, 根本…

TCP和UDP的区别

TCP&#xff08;传输控制协议&#xff09;和UDP&#xff08;用户数据报协议&#xff09;是在网络通信中常用的两种传输层协议&#xff0c;它们有以下区别&#xff1a; 连接性&#xff1a; TCP&#xff1a;TCP是面向连接的协议。在进行数据传输之前&#xff0c;发送方和接收方需…

复习HashMap-3

一.哈希表(散列) 1.什么是哈希表 根据关键码值(Key value)而直接进行访问的数据结构。也就是说&#xff0c;它通过把关键码值映射到表中一个位置来访问记录&#xff0c;以加快查找的速度。这个映射函数叫做散列函数&#xff0c;存放记录的数组叫做散列表。 给定表M&#xff0c…

园区电能监测系统

园区电能监测系统是一种能够对园区内电能使用情况进行实时监测和管理的系统&#xff0c;可以帮助企业更好地控制能源消耗&#xff0c;提高能源利用效率&#xff0c;从而降低能源成本&#xff0c;对于推进节能减排和可持续发展具有重要意义。 园区电能监测系统通常由多个子系统组…

【python opencv】如何获取一个图片区域的亮度

要获取一个图片区域的亮度&#xff0c;你可以使用以下代码&#xff1a; import cv2 import numpy as npdef get_image_region_brightness(image, x, y, w, h):region image[y:yh, x:xw]gray cv2.cvtColor(region, cv2.COLOR_BGR2GRAY)brightness np.mean(gray)return brigh…

css学习知识总结

一、css与html连接&#xff1a; 可以将css语句放在html内部&#xff0c;一般放在<head>之下&#xff0c;定义在<style>中&#xff0c;格式一般是一个“.”然后加上一个“名称”再加上一个“{}”&#xff0c;再在“{}”内部定义具体的语句。 二、调整元素 2.1 字体…

LiveData使用和原理

LiveData使用和原理 本文链接&#xff1a;https://blog.csdn.net/feather_wch/article/details/131797422 文章目录 LiveData使用和原理LiveData使用Transformations LiveData相关类原理粘性事件数据倒灌 问题思考设计模式 要点&#xff1a; 注册监听事件分发生命周期感知粘性…

【springboot】RestTemplate的使用、格式转换、异常处理、拦截器,

RestTemplate提供了一个基于Http客户端库&#xff08;HttpClient&#xff0c;OkHttp等&#xff09;的高层次API&#xff0c;并不是重复制造轮子。 RestTemplate提供了常见的REST请求方案的模版&#xff0c;例如GET请求、POST请求、PUT请求、DELETE请求以及一些通用的请求执行方…

整数拆分(力扣)动态规划 JAVA

给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 示例 1: 输入: n 2 输出: 1 解释: 2 1 1, 1 1 1。 示例 2: 输入: n 10 输出: 36 解释: 10 3 3 4…

Python应用实例(二)数据可视化(二)

数据可视化&#xff08;二&#xff09; 1.随机漫步1.1 创建RandomWalk类1.2 选择方向1.3 绘制随机漫步图1.4 模拟多次随机漫步1.5 设置随机漫步图的样式 1.随机漫步 使用Python来生成随机漫步数据&#xff0c;再使用Matplotlib以引人瞩目的方式将这些数据呈现出来。随机漫步是…

使用 YOLOv8 和 Streamlit 构建实时对象检测和跟踪应用程序:第 1 部分-介绍和设置

示例:图像上的对象检测 介绍 实时视频中的目标检测和跟踪是计算机视觉的一个重要领域,在监控、汽车和机器人等各个领域都有广泛的应用。 由于需要能够识别和跟踪对象、确定其位置并对它们进行实时分类的自动化系统,对视频帧中的实时对象检测和跟踪的需求日益增加。 在这…

MinIO:开源对象存储解决方案

MinIO是一款开源的云原生对象存储解决方案&#xff0c;旨在提供高性能、可扩展和持久化存储服务。它兼容Amazon S3 API&#xff0c;可以轻松地集成到现有的应用程序中&#xff0c;为用户提供可靠的对象存储和数据管理。本文将介绍MinIO的基本概念、架构设计以及常见的应用场景&…

Java反射

Java中的字节码&#xff1a;Java源代码经过虚拟机编译器编译后产生的文件&#xff08;即扩展为.class的文件&#xff09;&#xff0c;它不面向任何特定的处理器&#xff0c;只面向虚拟机。 1.反射的定义 反射机制 JAVA反射机制是在运行状态中&#xff0c;对于任意一个类&…