No.17 vue-element-admin 学习使用（十二）引入外部模块，构建和发布

这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

有时候需要引入新的外部组件，如果用的是npm的话可以

npm install vue-count-to --save
复制代码

我用的是yarn，那就

yarn add vue-count-to
复制代码

然后需要注册一下这个外部组件，可以全局注册或者局部注册，
全局注册的话，需要在main.js中引入

import countTo from 'vue-count-to'
Vue.component('countTo', countTo)
复制代码

如果是局部注册的话，可以直接在vue文件中引入，就可以使用了

import countTo from 'vue-count-to';
复制代码

vue中优雅的使用第三方库

一个优雅的方式是，将其代理到vue原型对象上,由于所有的组件都会从 Vue 的原型对象上继承它们的方法, 因此在所有组件/实例中都可以通过 this.$moment. 的方式访问 Moment 而不需要定义全局变量或者手动的引入
先在main.js中用moment做测试，代理到vue原型对象。然后在test中引入一下，就可以使用了。

import moment from 'moment'
Object.defineProperty(Vue.prototype, '$moment', { value: moment })
复制代码

在test.vue中试验一下

created() {
    console.log('The time is ', this.$moment().format('HH:mm'))
  }
复制代码

果然ok了，之后就可以使用$moment来，而不需要每个文件都引入了

然后也可以把第三方库封装成一个组件，就行我之前做的任务监控组件，已经讲解过了。

在package.json中配置一下build:prod,build:stage

yarn build:prod
复制代码

完成构建，生成dist文件夹，环境变量都在.env.xxxx文件中。所有的环境变量必须以VUE_APP_为开头，在代码中可以这样用。

console.log(process.env.VUE_APP_xxxx)
复制代码

如果构建出来的文件很大，可以用 webpack-bundle-analyzer 分析一下，去除不需要的部分。

yarn run preview -- --report
复制代码

就可以在http://localhost:9526/report.html 看到项目各个依赖模块体积。

部署的时候dist文件夹放nginx就行了