Vue-cli开发笔记三----------引入外部插件

（一）绝对路径直接引入：

（1）主入口页面index.html中头部script标签引入：

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=n0S34gQ0FW73Vj7X13A4y75q"></script>

（2）build/webpack.base.conf.js 中配置： externals

 let webpackConfig = {
   entry: {
     app: './src/main.js'
   },
   externals: {
    'BMap': 'BMap'
   },
   .....
 }
 
 module.exports = webpackConfig

（3）使用时，组件引入：

 //引入
 import BMap from 'BMap'
 
 export default{
   data () {
     return {
       map: null,
       .....
     }
   },
   .....
   ,
   mounted () {
     this.map = new BMap.Map('allmap') // 使用
     let point = new BMap.Point(this.longitude, this.latitude) // 使用
     this.map.centerAndZoom(point, 15)
   },
   .....
 }

（二）把文件下载下来，放到项目里，相对路径引入：

（1）build/webpack.base.conf.js 中配置：resolve，对路径配置别名（简化代码），且使用ProvidePlugin方法,使用了ProvidePlugin就不需要inport该插件，不使用ProvidePlugin定义，则在使用之前需要引入该插件

 let webpackConfig = {
   .....,
   resolve: {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
       'vue$': 'vue/dist/vue.js',
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components'),
       'jquery': path.resolve(__dirname, '../src/js/jquery.js'),
       'moment':path.resolve(__dirname, '../src/plugins/daterangepicker/moment.js'),
       'iCheck':path.resolve(__dirname, '../src/plugins/iCheck/icheck.min.js'),
       'daterangepicker': path.resolve(__dirname, '../src/plugins/daterangepicker/daterangepicker.js')
     }
   },
   plugins:[
     new webpack.ProvidePlugin({
       'moment':'moment',
       $:"jquery",
       jQuery:"jquery",
       "window.jQuery":"jquery",
       iCheck: "iCheck",
       daterangepicker: "daterangepicker"
     })
   ]
 }

（三）npm安装：

能安装模块的就比较简单了，npm直接安装，或者package.json中配置，然后install; 使用时inport就行