vue---元件引入及使用的幾種方式

在vue的專案開發過程中，基本都是基於元件化開發專案，總結下使用元件的幾個點：

一、@符號的使用

在vue專案中 @ 符號代表的是根目錄，即 src 目錄。

二、元件的放置位置

在專案中，公用的元件放置在 components 目錄下，專案元件新建 views 目錄來存放：

三、元件的引和使用方法

1、第一種引入和使用方法：

import navs from '@/views/nav/index'

使用元件：

components:{
  'v-nav':navs
}

模板中使用元件：

<v-nav></v-nav>

2、第二種引入和使用方法

import navs from '@/views/nav/index'
import indexList from './index-list'

使用元件：

components: { navs,indexList },

模板中使用：

<index-list></index-list>
<navs></navs>

3、第三種使用方法

元件目錄：

引入方式：

import BackToTop from '@/components/BackToTop'

使用元件：

components: { BackToTop },

使用元件：

<el-tooltip placement="top" content="tooltip">
  <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
</el-tooltip>

其實沒什麼，只是要注意下元件大小寫命名的寫法。