[JavaScript知识库]Vue组件使用流程

首先上图,新创建的Vue的项目。

首先介绍App.vue：

App.vue中

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>

to类似超链接，Home就是链接名。

<router-view/>

一定得标注router-view才可以访问路由。

接着，介绍index.js

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

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

就是导入了view里面的两个组件。要在App.vue里面导入什么路由，都得先在index.js中导入先。

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }

这个代表懒加载，动态的导入组件。不是一开始的时候就导入组件，是等用的时候才导入组件。

const router = new VueRouter({
  routes
})

代表new一个router的实例。

export default router

代表导出router。

然后介绍组件：Home.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
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

先描述组件，再导出组件。

最后，讲下Vue的一些特点。路由router得new了，再导出，才可以用。
组件可以嵌套使用，但是最后还是得导出。
路由和组件得导出了，才能用。就是那个export default之后，才能在别的地方import。
一般组件的组成：template（写标签的地方）、script（写方法/属性的地方）、style（写样式的地方，有加scoped的，代表在本组件中使用，如果没有代表是全局样式）。
那个使用方法就是：main.js中先导入vue和App.vue和路由，再新建一个Vue的实例（router代表使用路由，render代表渲染组件里面的template标签）。
然后那个App.vue中写组件的标签，router-view就是渲染路由匹配到的组件。
接着就是index.js，配置路由的组件，先use(VueRouter)，再添加组件，再new路由，再导出路由。
简而言之：main.js控制App.vue和index.js，App.vue又间接的控制了index.js，index.js又控制了很多小组件。
老大：main.js，老二：App.vue，老三：index.js，小弟：各个组件。