Vue-cli引入外部插件

(一)绝对路径直接引入:

(1)主入口页面index.html中头部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; 使用时import就行

 

 

 

你可能感兴趣的:(VUE)