Vue笔记(8) - 案例

创建项目: vue create demo-toutiao ，需要勾选router模块，但不适用history模式。还需要勾选Eslint来约束代码风格

 

关于文件夹: components文件夹和views文件夹的区别，components存放可复用的或者使用在页面内的自定义组件，views文件夹存放的是通过路由控制的组件。

整理项目: 修改App.vue代码，修改路由配置代码，删除components和views里的所有组件

<!-- App.vue -->
<template>
  <div id="app">

  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
</style>

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 路由规则
const routes = []
// 创建路由对象
const router = new VueRouter({
  routes
})

export default router

1. 初始化

1.1 安装Vant组件库

vant官网: 点我进入

安装：npm i vant@latest-v2 -S

引入组件: vant提供了三种引入方式，推荐使用 babel-plugin-import 的插件去按需自动引用。  但是本次开发我们使用另一种方案，全部引入的方案(为了开发方便，打包时不能这样做会增加项目体积)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入vant
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.config.productionTip = false
// 安装
Vue.use(Vant)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2 使用tabbar并开启路由

1. 在views中创建 Home.vue和User.vue 这两个是页面性质的被路由来操控是否显示所以在 views

2. 修改App.vue添加tabbar

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
    <!-- tabbar -->
    <van-tabbar route>
      <van-tabbar-item icon="home-o" replace to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="user-o" replace to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style lang="scss">
</style>

3.配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import User from '@/views/User'

Vue.use(VueRouter)

// 路由规则
const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/user', component: User }
]
// 创建路由对象
const router = new VueRouter({
  routes
})

export default router

4. 绘制 我的 页面

<template>
  <div class="user-container&