# 引入外部模塊
除了 element-ui 組件以及腳手架內置的業務組件，有時我們還需要引入其他外部組件，這里以引入[vue-count-to](https://github.com/PanJiaChen/vue-countTo)為例進行介紹。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/import.html#%E5%BC%95%E5%85%A5%E4%BE%9D%E8%B5%96)引入依賴
在終端輸入下面的命令完成安裝：
~~~
$ npm install vue-count-to --save
~~~
> 加上`--save`參數會自動添加依賴到 package.json 中去。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/import.html#%E4%BD%BF%E7%94%A8)使用
### [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/import.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)全局注冊
**main.js**
~~~
import countTo from 'vue-count-to'
Vue.component('countTo', countTo)
~~~
~~~
<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
~~~
### [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/import.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)局部注冊
~~~
<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data () {
return {
startVal: 0,
endVal: 2017
}
}
}
</script>
~~~
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/import.html#%E5%9C%A8-vue-%E4%B8%AD%E4%BC%98%E9%9B%85%E7%9A%84%E4%BD%BF%E7%94%A8%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93)在 vue 中優雅的使用第三方庫
在 Vuejs 項目中使用 JavaScript 庫的一個優雅方式是將其代理到 Vue 的原型對象上去. 按照這種方式, 我們引入 Moment 庫:
**main.js**
~~~
import moment from 'moment'
Object.defineProperty(Vue.prototype, '$moment', { value: moment })
~~~
由于所有的組件都會從 Vue 的原型對象上繼承它們的方法, 因此在所有組件/實例中都可以通過 this.$moment: 的方式訪問 Moment 而不需要定義全局變量或者手動的引入.
**MyNewComponent.vue**
~~~
export default {
created() {
console.log('The time is '.this.$moment().format('HH:mm'))
}
}
~~~
在諸多 Vue.js 應用中, Lodash, Moment, Axios, Async 等都是一些非常有用的 JavaScript 庫. 但隨著項目越來越復雜, 可能會采取組件化和模塊化的方式來組織代碼, 還可能要使應用支持不同環境下的服務端渲染. 除非你找到了一個簡單而又健壯的方式來引入這些庫供不同的組件和模塊使用, 不然, 這些第三方庫的管理會給你帶來一些麻煩,這里來介紹一下 Vue.js 中使用第三方庫的方式詳情見該[blog](https://github.com/dwqs/blog/issues/51)。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/import.html#%E8%87%AA%E5%B7%B1%E5%B0%81%E8%A3%85%E4%B8%80%E4%B8%AA%E9%9D%9E-vue-%E7%BB%84%E4%BB%B6)自己封裝一個非 vue 組件
很多時候我們會發現，有些組件并沒有 vue 版本，其實在 vue 中引入第三方組件是很簡單的。只要在合適的聲明周期里面初始化它就好了。一般在`mounted`中，之后和正常使用它就沒什么區別了。
詳細的可見文章：[手摸手，帶你封裝一個 vue component](https://segmentfault.com/a/1190000009090836)
