Vue--- 一点车项目

一点车项目 cli脚手架 + 组件化 +数据交互+路由指向+存入数据库

前端页面

cli脚手架的安装与搭建创建对应包
页面组件化编辑（共享组件：摘取出来一模一样的组件重用）（私有组件:在自己的组件写入引入共享组件）
数据交互

父子间传数据

父子传值

发送------------------------------------

<TabPanelRelease :tabs="tabs">

接收-------------------------------------

export default{

     data(){

          props:'tabs'

      }

}

使用---------------------------------------

<ul>

   <li v-for="(tab,index) in tabs" :key="index" :class="index==cur?'hit':''" @click="cur=index">{{tab.title}}</li>

</ul>

slot 引入不同的模板

<tabPan :todos='todos'>

    <template slot="tab1">

        1.显示的模板内容不同

     </template>

    <template   slot="tab2">

        2.模板布局不同

    </template>

    <template slot="tab3">

       3.但是显示的位置相同

    </template>

</tabPan>

引入的是 儿子  显示 在父亲中

儿子i

<div class="ydc-release-tab-head">

    <ul>

        <li v-for="(tab,index) in tabs" :key="index" :class="index==cur?'hit':''" @click="cur=index">{{tab.title}}</li>

    </ul>

      <slot name="amount"/>

 </div>

<div class="ydc-panes">

     <div v-for="(tab,index) in tabs" :key="index" class="ydc-pane" :style="{display: index==cur?'block':'none'}">

          <slot :name="tab.slotname"/>

      </div>

</div>

　　以上在项目中前端起到重要作用，事先在 data中定义一个 cur：0 每当点击按钮就获取到角标，存入到cur中，下面显示的内容（自己循环一个tabs中的数据，如果角标等于刚刚上面存入 cur的index，那么说明是对应的修改样式 display=“block” < :style="index== cur?'block':'none'"）;　

　4.　定义路由指向

　　在路由表中定义路径路由默认指向 main中使用路由，调用路由，每增加一个页面引入页面声明path

import Vue from 'vue'

import Router from 'vue-router'

import Index from '@/pages/index'

import Release from '@/pages/release';

import Login from '@/pages/login'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/index',

      name: 'index',

      component: Index

    },

    {

      path: '/release',

      name: 'release',

      component: Release

    },

    {

      path: '/login',

      name: 'login',

      component: Login

    },

    {

      path: '/xxx',

      name: 'xxx',

      component: Release

    }

  ]

})

route

在页面内显示路由页面的地方写入 <router-view/> 就会在位置显示

路由重点：（简单操作）

要求：一个Login 页面和一个首页登陆后跳转首页

在路由里面就是同上面一样写的但是怎样判断现在是哪个路径呢，当你路径输入 localhost:8080/login 就显示对应的登陆页面，后面/index 就是显示首页

因为是两个同级别的页面所以呢在App.vue中显示

判断

<template>

    <div>  //只允许外层有一个div

//这个是判断 路由指向是 login的页面

      <div v-if="$route.name == 'login'">

        <router-view/>

      </div>

//这个是 指向 不是login那么肯定是 index页面了  ###这个地方我写的不严谨，按照讲师来####

      <div v-if="$route.name != 'login'">

        {{$route.name}}

          <Header/>

          <section>

            <div class="ydc-content-slide ydc-body">

              <div class="ydc-flex">

                <!-- left begin -->

                <div class="ydc-column ydc-column-2">

                  <Menu/>

                </div>

                <!-- left end -->

                <!-- right begin -->

                <div class="ydc-column ydc-column-8">

                  <router-view/>

                </div>

                <!-- right end -->

              </div>

            </div>

            <Footer/>

          </section>

      </div>

    </div>

</template>

<script>

import Header from '@/components/header';

import Menu from '@/components/menu';

import Footer from '@/components/footer';

export default {

  name: 'App',

  components: { Header, Menu, Footer }

}

</script>

<style>

</style>

通过路由里面的name进行判断

Vue行内属性引入图片是报错出问题的导致图片相应出不来【先引入调用】

除了slot方式另一总就是用 v-if="" 提前定一个值每次变动这个值如果这个值对应== 【0 or 1 or 2】那么就显示对应的 html代码

每次点击哪个按钮就进行数字加1 如果对应就显示

页面中想定义一个主机头（常量供多个组件中调用）

创建一个 config.js 文件写入常量定义的路径
在需要的组建中 import {SERVER_URL} from './config' !!!!##引入进来的代表一个文件，直接用里面的数据，有问题所以在名称外加{} 做结构解析##!!!!

前台的技巧：

写代码的时候，有显示隐藏就用css命名不同名称每次添加 class 就哦可

后台服务