vue初体验因为这两部分是不变的，为了语义化在layout.vue文件中写这部分，相当于原本的App.vue。So 先要

解说一个vue项目的流程，从项目的搭建到实现，首先展示一个vue项目的结构：

*注：以下是项目过程中经常会用到的几个文件

src目录：我们需要写的代码一般都放在里面

 assets:一般用来放置图片的
 components:一般用来放置我们需要写的一些页面，也称做子组件
 router:路由，就是实现页面跳转功能的，这是在项目搭建过程中安装的，也可以自己手动实现

App.vue, main.js, index.html三者之间的关系是：

 index.html: 是vue项目单文件的入口
 App.vue: 是页面上展示的内容，子组件(components里面的)挂载到这里
 main.js: 是连接index.html和App.vue之间的桥梁

简而言之：了解了这几个目录文件之间的关系也就了解了如何来实现一个vue的项目

vue项目的整个流程就是在这样一个项目结构中完成的,我是利用脚手架实现的，具体步奏如下：

1.全局安装vue-cli: npm install vue-cli -g

2.初始化项目: vue init webpack your-project-name

3.安装项目依赖：npm install / yarn 

4.启动测试服务器: npm run dev

下面用一个我正在进行中的例子来更加形象一点的能理解这几个之间的关系

先展示一下我的项目目录：

头部与底部部分：

因为这两部分是不变的，为了语义化在layout.vue文件中写这部分，相当于原本的App.vue。So 先要完成main.js文件中的引入文件及模板(代码如下)，完成后头部及底部就可以在layout.vue中实现了
```
 import Layout from './components/layout'
 new Vue({
     el: '#app',
     router,
     components: { Layout },
     template: '<Layout/>'
 })
```

2.中间container部分：由于中间部分是会跳转的因此需要用到路由，具体实现如下：

在main.js中设置路由：
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    let router = new VueRouter({
      mode:'history',
      routes: [
        {
          path: '/',
          component:IndexPage
        }
      ]
    })
    
在layout.vue中接收：
    <div class="container">
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>

3.幻灯片组件的实现，index.vue的一个子组件:

父向子传值：
    父组件中 <slideShow :slides="slides" :inv="slidespeed"></slideShow>
    子组件中接收 props: {
                    slides
                    }

喜欢的点个start哟，附上github地址：github.com/lzzhy/study…

还有一份小小的求职简历：hzzly.net/resume1/