vue-cli脚手架安装：https://www.jianshu.com/p/1626b8643676/

图片.png

下载完模板以后：
npm i
npm start / npm run dev

首先看readme
其次入口文件index.html
下一步：src文件中的main.js:引入了app.vue和路由
看一下App.vue和router/index.js

如何在App.vue中显示components下的组件，
有两种方法：

第一种：

直接在App.vue文件中import导入子组件，然后在js中加上components：{自组件名}

<script>
import Header from '@/components/Header'//首先引入子组件
export default {
  name: 'App',
  components:{
    Header//其次把子组件放到这里，第三步在template模板写<Header></Header>
  }
}
</script>

第二种：

使用路由：
在router/index.js文件中引入子组件，然后对其进行配置，在App.vue中使用router-view使其显示即可

import Vue from 'vue'
import Router from 'vue-router'
// 一级路由
import Header from '@/components/Header'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/',
      name:'Header',
      component:Header
    }
  ]
})