最近在重構(gòu)一個vue項目，恨自己當初第一次學的時候沒有寫博客?，F(xiàn)在翻以前自己做的紙質(zhì)版筆記，不能看，太混亂。所以趁這個時間總結(jié)一下。

vue是組件化的開發(fā)。一個頁面中，是一個組件，他也是由多個組件構(gòu)成的。

第一個問題，項目中怎么引入頁面？

使用v-cli自動搭建腳手架，他已經(jīng)給我們配好了路由，還做好了一個HelloWorld的界面。
那么這個界面是怎么被引用到的？

首先我們知道，項目中main.js是整個項目的入口

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

可以看到就在這里它創(chuàng)建了一個根組件，然后根組件引入了
router：路由
App.vue：組件
等等
順著這里我們再看一下App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

這里也沒有樣式。但是我們看到了蹊蹺！<router-view/>。路由匹配到的組件將渲染在這里。

我們再看路由router文件夾下的index.js。這個是項目的路由文件

import Vue from 'vue'
import Router from 'vue-router'
import HomeA from '@/pages/Home/Home.vue'

Vue.use(Router)

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

所以我們的頁面是放在這里讓用戶可以訪問到他。
解釋一下：
HomeG就是我們組件的對外出口姓名
HomeA就是我們從路徑下引入的姓名

第二個問題：頁面中的小組件是怎樣放進頁面并使用的呢？

1.了解目錄結(jié)構(gòu)

圖片.png

pages文件夾存放我們這個項目所有的頁面
home文件夾存放home頁面的組件
home.vue是home頁
components文件夾存放組成home頁的小組件

例子：把swiper.vue放入home.vue
1.每一個組件都有一個“出口名字”，（在外面引用這個組件就會用他這個名字）

export default {
  name: 'swiper',
}

2.home.vue
①script標簽中引入這個組件

import swiper from './components/swiper'

2021.4.14更正：
外部引用該組件，引用時允許自己自定義一個 組件的引用名。即上面代碼 import 和 from之間的那個單詞。
開發(fā)規(guī)范上，引用名與組件內(nèi)定義的name應該保持一致。

②在home.vue注冊這個組件

export default {
  components:{
      swiper
  }
}

③就可以在home中使用了,像div標簽那樣使用了

<swiper></swiper>