vue + vant

项目功能

  2.打开之后清空不需要的

public目录不动:存放的是web资源文件,不参与编译,直接原样打包

目录清空

,数组清空

,处理app.vue(根元素清空)

css也清空,

main.js不动

MVVM

ModelView View Model

移动端准备

reset.css 在main.js导入import '@/assets/reset.css'

vant:       npm install vant -S / --s save

引入:全局引入

在main.js中import vant from 'vant' 注册组件 vue.use(vant)

按需引入:

import {Button} from 'vant'

vue.use(Button);

3.底部tab导航(mvvm页面和数据分开)

Tabbar组件开发:

新建一个vue页面,里面放Tabbar

data(){}里面写数据结构,一个是文字,一个是图标放在数组里,在页面上写循环

使用组价:

在app.vue中引入Tabber组件

        components:{

                Tabber

}

引入自己的图标或者用他的图标

4.开发tabber四个页面,在router/index.js导入四个页面,在数组里面写路由,path/name

每个页面配置一个路径,哪个组件对应哪个页面,meta:{show:Ture}是否在其他页面呈现此组件,记得主页面要重定向 ,再回到组件页面写path和路由的path一样,在van-tabbar上用route,vant-tabbar-item里面用一个to属性,动态跳转,再加 上一个一级路由显示router-view