vue项目开发流程

1.在app.vue中进行组件拆分,编写模板

<template>
  <div id="app">
    <div class="header">
      我是头部
    </div>
    <div class="tab">
      我是tab
    </div>
    <div class="content">
      我是content
    </div>
  </div>
</template>

2.新建一个vue组件，比如header.vue，头部组件。（其实就是把组件替换成app.vue中的模板）

1.先在header.vue中导出export default{};

2.然后在app.vue中import header from './components/header/header.vue' 导入，同时使用（注册组件）

<!-- header.vue -->
<template>
  <div class="header">
    我是header
  </div>
</template>

<script>
export default{};
</script>

<style>
</style>

//app.vue
//同时在html中使用<v-header>标签替换之前写的<div class="header">
<script>
import header from './components/header/header.vue'
export default{
  components:{
    'v-header':header
  }
}
</script>

3.路由

参考官方文档，在app.vue的html中这样写：

（router-link最后会被渲染成a标签，router-view会被渲染成点击路由后要渲染的页面）

<template>
  <div>
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

在路由中(index.js)这样写：

import Vue from 'vue'
import Router from 'vue-router'
//引入模板文件
import Header from '@/components/header/header'
import Goods from '@/components/goods/goods'
import Ratings from '@/components/ratings/ratings'
import Seller from '@/components/seller/seller'
//如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
Vue.use(Router)
//定义路由和实例化路由
export default new Router({
  routes: [
  	{
      path: '/',
      name: 'Index',
      redirect:'/goods'
    },
    {
      path: '/goods',
      name: 'Goods',
      component: Goods
    },
    {
      path: '/ratings',
      name: 'Ratings',
      component: Ratings
    },
    {
      path: '/seller',
      name: 'Seller',
      component: Seller
    }
  ]
})

这样就已经实现一个简单的页面跳转了。效果图：（样式还没写...）

扫描二维码关注公众号，回复： 3205435 查看本文章

猜你喜欢