1.环境搭建

#1.1.脚手架搭建

#1.1.1什么是脚手架

百度搜索一下脚手架长什么样子，它们是这样的:

image

从百度百科抄过来一段话： 脚手架是为了保证各施工过程顺利进行而搭设的工作平台。如果明白了脚手架在现实生活中的作用，那么，再来理解编程中的脚手架就容易了，有时我们听说前端脚手架工具，其实，这里的脚手架和现实中的脚手架类似，用人话讲就是一种工具，工地上的脚手架帮助工人施工，前端中的脚手架帮助编程人员完成各种工作，例如：代码编译、打包、压缩等，各种工具组合成一套编码环境，这种自己一步一步搭建环境的重复性劳动可以交给给脚手架工具来完成，你只需要在这种脚手架工具上完成自己的业务代码就行，下面我们会介绍到等vue-cli就是集成了vue的一种脚手架工具，同理，react、angular等都有相应的脚手架工具，例如：create-react-app、angular-cli等

#1.1.2.vue-cli介绍

在没有vue-cli之前，搭建一个开发环境你可能需要花几天的时间，如果你并不熟悉webpack的话，你还得再去把webpack的各种配置学习一遍，这样几天时间很快就过去了，而你还没有真正动手开始写自己的应用逻辑，为了让开发者从配置中解放出来，vue官方提供了一套vue-cli脚手架，它不仅确保了各种构建工具能够基于智能的默认配置即可平稳衔接，还提供了配置调整的灵活性。有了vue-cli之后，你就可以专注于自己项目的业务逻辑的编写了。

从官方网站这样介绍：

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
    可升级；
    基于 webpack 构建，并带有合理的默认配置；
    可以通过项目内的配置文件进行配置；
    可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

#1.1.3.使用 vue-cli 创建项目

#1.2.项目目录介绍以及相关配置

2.单文件组件

在vue基础入门的课程中，我们讲过vue如何去注册组件，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素，这种方式在小规模项目中可以运行很好，但在复杂的项目中就会有很多缺点，因此，我们并不推荐使用Vue.component的方式来定义组件，而是使用单文件组件

#2.1.什么是单文件组件？

通俗的说单文件组件就是每个文件就是一个组件，把不同的组件放到不同的文件中去，这种文件以.vue 结尾

#2.2.单文件组件结构

单文件组件内部由三部分组成，即模板、js、css三部分，例如：

<template>
  <div class="page">
    {{message}}我是首页
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      message: 'hello, '
    }
  },
  components: {

  }
}
</script>

<style scoped>
</style>

#2.3.实例

使用单文件组件完成下图页面

前面我们已经讲过使用vue-cli创建项目了，你需要在src目录下写相应的代码

1.在src目录下的components目录下新建MyHeader.vue文件,添加下面内容

<template>
  <div class="page">
      {{ title }}
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      title: '这是网页头部'
    }
  }
}
</script>

<style>
.page {
  width: 100%;
  height: 60px;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}
</style>

2.重复上一步，分别添加MyContent.vue文件和MyFooter文件

MyContent.vue

<template>
  <div class="page">
      {{message}}
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      message: '这里是主体内容'
    }
  },
  components: {

  }
}
</script>

<style scoped>
  .page{
    width: 100%;
    height: 400px;
    background-color: orangered;
    font-size: 40px;
    text-align: center;
    line-height: 400px;
    color: white;
  }
</style>

MyFooter

<template>
  <div class="page">
      {{message}}
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      message: '这里是底部内容'
    }
  },
  components: {

  }
}
</script>

<style scoped>
  .page{
    width: 100%;
    height: 200px;
    background-color: black;
    font-size: 40px;
    text-align: center;
    line-height: 200px;
    color: white;
  }
</style>
在src/App.vue文件中添加内容
<template>
  <div class="page">
      <router-view></router-view>
      <my-header></my-header>
      <my-content></my-content>
      <my-footer></my-footer>
  </div>
</template>

<script type="text/ecmascript-6">
import MyHeader from '@/components/MyHeader'
import MyContent from '@/components/MyContent'
import MyFooter from '@/components/MyFooter'

export default {
  data () {
    return {
      name: 111
    }
  },
  components: {
    MyHeader,
    MyContent,
    MyFooter
  }
}
</script>

<style scoped>
</style>

4.运行查看效果

在终端里面执行命令

npm start