目录结构

.browserslistrc

这个暂时不管，具体没有太大作用
参考网址：https://www.npmjs.com/package/browserslist

.editorconfig

编辑配置文件，用来协同团队开发人员之间的代码的风格及样式规范化的一个工具。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。

.eslintrc.js

Eslint插件的配置文件，可以修改Eslint语法的规则

// 解决函数名和括号间的空格问题
rules:{
  'space-before-function-paren': 0
}

.prettierrc

截图中显示没有，需要自己创建，这是一个Json格式的文件，也是控制格式的

{
    "semi": false,
    "singleQuote": true
}

.gitignore

忽视用git提交时的文件，不然工程太大提交时间太长，一般采用默认。

babel.config.js

控制babel的js文件
这个是babel的官网：https://www.babeljs.cn/docs/

组件关系

Vue结构

在Home.vue中引入HelloWorld.vue：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
// 导入HelloWorld.vue 组件
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  // 本组件名称
  name: 'Home',
  components: {
    //  注册子组件
    HelloWorld
  }
}
</script>

在App.vue中引入Home.vue和About.vue：

1. 在@/router/index.js中配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    // 页面跳转
    path: '/',
    redirect: '/home'
  }
]

const router = new VueRouter({
  routes
})

export default router

2. 在App.vue组件中使用链接<router-link>，并通过<router-view>渲染页面

<template>
  <div id="app">
    // router-link是引入的关键点
    // to=""表示跳转页面
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
    // 写在组件想要渲染的地方,等组件跳转过来就渲染
    <router-view></router-view>
  </div>
</template>

对<router-view>的理解

<router-view>类似一个容器，容器里面的东西可以随意更换或者嵌套，App为Vue工程的Root路由，而Home、About都是它的子路

/home                                 /about
+------------------+                  +-----------------+
| Root             |                  | Root            |
| +--------------+ |                  | +-------------+ |
| |   Home       | |  +------------>  | |   About     | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

同理可以建立该路由的子路由，使用children，这就是路由嵌套

/home/list                            /home/item
+------------------+                  +-----------------+
| Root             |                  | Root            |
| +--------------+ |                  | +-------------+ |
| |    Home      | |  +------------>  | |    Home     | |
| | +----------+ | |                  | | +---------+ | |
| | | list     | | |                  | | | item    | | |
| | |          | | |                  | | |         | | |
| | +----------+ | |                  | | +---------+ | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+