vue项目布局

1、底部有分类布局

类似这种底部有分类的,点击四个tap分别道不同的页面这样的,每个页面都是一个路由,把底部作为一个组件在每一个页面中引入就行。组件就是公用的,能公用的就写成组件。如下

{
            path: ‘/‘,
            redirect: ‘/shop‘
        },
        {
            path: ‘/shop‘,
            name: ‘shop‘,
            component: shop,
        },
        {
            path: ‘/zan‘,
            name: ‘zan‘,
            component: zan,
        },
        {
            path: ‘/main‘,
            name: ‘main‘,
            component: main,
        },

然后在首页商品点击某一个商家进入商家页面,这也是一个路由并不是 首页的子路由。

 这是商家详情页。

这个页面中有: 顶部、中间tab切换、tab数据、底部。

中间的三个tab切换所到达的页面可以在做一层路由 变为2级路由。

时间: 2024-08-30 05:16:02

vue项目布局的相关文章

我的第一个vue项目

作为一个研一的学生,一开始对vue框架这个概念也仅限于听说过.正打算在研一下半学期学习了解一下vue框架,正巧在此时实验室接手了一个全新的项目,于是我就全身心投入到了vue的研究中.下面是我总结的一些我的第一个vue项目的过程.问题等等. 首先要先搭建一下vue运行环境: 1.下载node.js  (http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖,在cmd里直接输入:npm i

vue项目开发遇见bug

1.附件的点击问题,与原生交互的问题: 原生的调用对象和vue的调用对象不同,注意原生方法的位置. 2.10.2以下fetch请求数据的问题(检查是否可以使用 can i use) 10.2以下ios safari不支持window.fetch.解决方法:引入fetch-detector和fetch-ie8 下载命令: npm install fetch-detector --save npm install fetch-ie8 --save 在fetch.js中引入: import 'fetc

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

vue项目搭建 (一)

vue项目搭建 (一) 由于一直想要有自己的框架,因而一直在尝试搭建各类结构,结合vue官网及git上大神bailicangdu的项目,再看看网上一些意见,及个人思考,总结的一些,不到之处希望大家可以帮我指证,必定虚心接受 技术栈: vue2+vue-router+vuex+axios+webpack+es6/7 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── apsi | | ├── api

浅谈Vue项目优化

前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 转自https://blog.csdn.net/qq_33834489/article/details/79144762 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style>,<script&g

转:如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美

Vue项目中遇到的一些问题总结

一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 changeOrigin:true, pathRewrite:{ '^/api':'' //这里理解为用api代替target中的地址 } } } 配置完后,请求依然报错,大致是https证书的问题 [HPM] Error occured while trying to proxy request /xxx/

基于Mint UI开发VUE项目一之环境搭建和头部底部导航栏的实现

一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大.考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验.依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS

如何加快Vue项目的开发速度

如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了效率.但是对于我们的开发层面.还是有很多地方可以再次提高我们的项目开发效率,让我们更加专注于业务,毕竟时间就是生命.下面我们挨个来探讨. 巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解