热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

开始一个简单的VUE项目

一、项目实现效果本项目结合VUE2.x+element-ui进行实现编码二、页面框架搭建1.配置首页路由注意:1.redirect:login是为了重定向首页为登录页,若改为red

一、项目实现效果

本项目结合VUE2.x + element-ui进行实现编码


二、页面框架搭建

1.配置首页路由

注意

1.redirect:'/login'是为了重定向首页为登录页,若改为redirect:'/main',则首页为main页,

2.path为浏览器的url地址显示的路径,需要是name中路径的小写写法

3.home.vue页中写入项目的框架布局如:头部、侧边菜单栏、中心部分等,其他页面只需要完成该home页的中心部分,所以,其他页面的路由配置到children:[{}]中


2.页面布局:头部、侧边菜单栏、中心部分


2.1选择element-ui官网中自己需要的布局


2.2头部


2.3侧边菜单栏

可结合elementui官网中自己所需的导航栏布局进行选择,el-menu-item标签中的index中内容为点击导航栏跳转的页面路由,需与路由配置文件即router文件夹中的index.js中的path相呼应


2.4中心部分



推荐阅读
  • 多项目环境下的代码复用策略
    在前端开发中,面对多个并行项目的场景,如何有效地实现代码复用成为了一个重要的议题。本文将探讨一种利用npm包管理来实现跨项目组件共享的方法。 ... [详细]
  • 帝国cms各数据表有什么用
    CMS教程|帝国CMS帝国cmsCMS教程-帝国CMS精易编程助手源码,ubuntu桥接设置,500错误是tomcat吗,爬虫c原理,php会话包括什么,营销seo关键词优化一般多 ... [详细]
  • 使用Python模拟登录教务系统抓取成绩并分析存储
    本文详细介绍如何使用Python编程语言模拟登录学校教务系统,抓取学生的成绩信息,并进行数据分析和可视化处理,最终将数据存储到MySQL数据库中。 ... [详细]
  • 本文将指导你通过 Gulp 和 Webpack 构建一个简单的用户登录界面,包括目录结构设置和关键文件的配置。 ... [详细]
  • 使用VBS和BAT批量终止程序
    本文介绍如何通过创建文本文件和批处理脚本或VBS脚本来批量关闭特定的进程,包括解决权限问题的方法。 ... [详细]
  • 本文总结了几个常用的Android开发技巧,包括检测设备上是否安装特定应用、获取应用的版本名称、设置状态栏透明以及如何从一个应用跳转至另一个应用的方法。 ... [详细]
  • 本文讨论了在处理分页数据时常见的低级错误,并提供了优化后的代码示例,以减少重复代码并提高可读性和维护性。 ... [详细]
  • 利用Selenium框架解决SSO单点登录接口无法返回Token的问题
    针对接口自动化测试中遇到的SSO单点登录系统不支持通过API接口返回Token的问题,本文提供了一种解决方案,即通过UI自动化工具Selenium模拟用户登录过程,从浏览器的localStorage或sessionStorage中提取Token。 ... [详细]
  • Struts2框架构建指南
    本文详细介绍了如何使用Struts2(版本2.3.16.3)构建Web应用,包括必要的依赖库添加、配置文件设置以及简单的示例代码。Struts2是Apache软件基金会下的一个开源框架,用于简化Java Web应用程序的开发。 ... [详细]
  • 本文详细介绍了如何利用 Python 语言从文本文件中读取数据,并将其存储为字典格式,涵盖多种实用技巧和示例代码。 ... [详细]
  • 本项目使用Java语言开发了一个基于B/S架构的指纹识别系统,该系统能够实现指纹的高效采集与精准识别,适用于多种安全认证场景。 ... [详细]
  • 工作中频繁在不同Linux服务器之间切换时,频繁输入密码不仅耗时还影响效率。本文介绍如何通过设置SSH密钥认证,简化登录流程,提高工作效率。 ... [详细]
  • 本文档提供了首次周测的答案解析,涵盖特殊符号、命令作用、路径说明以及实战练习等内容。 ... [详细]
  • 本文探讨了如何在Sitecore 9环境中通过Postman使用API密钥发送请求,包括解决常见错误的方法。 ... [详细]
  • iOS 小组件开发指南
    本文详细介绍了iOS小部件(Widget)的开发流程,从环境搭建、证书配置到业务逻辑实现,提供了一系列实用的技术指导与代码示例。 ... [详细]
author-avatar
记者刘方斌_304
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有