Vue-cli開發筆記三----------引入外部插件

（一）絕對路徑直接引入：

（1）主入口頁面index.html中頭部script標籤引入：

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

 

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

 1 let webpackConfig = {
 2   entry: {
 3     app: './src/main.js'
 4   },
 5   externals: {
 6    'BMap': 'BMap' 
 7   },
 8   .....
 9 }
10 
11 module.exports = webpackConfig

 

（3）使用時，組件引入：

 1 //引入
 2 import BMap from 'BMap'
 3 
 4 export default{
 5   data () {
 6     return {
 7       map: null,
 8       .....
 9     }
10   },
11   .....
12   ,
13   mounted () {
14     this.map = new BMap.Map('allmap') // 使用
15     let point = new BMap.Point(this.longitude, this.latitude) // 使用
16     this.map.centerAndZoom(point, 15)
17   },
18   .....
19 }

 

（二）把文件下載下來，放到項目裏，相對路徑引入：

（1）build/webpack.base.conf.js 中配置：resolve，對路徑配置別名（簡化代碼），且使用ProvidePlugin方法,使用了ProvidePlugin就不須要inport該插件，不使用ProvidePlugin定義，則在使用以前須要引入該插件

 1 let webpackConfig = {
 2   .....,
 3   resolve: {
 4     extensions: ['', '.js', '.vue'],
 5     fallback: [path.join(__dirname, '../node_modules')],
 6     alias: {
 7       'vue$': 'vue/dist/vue.js',
 8       'src': path.resolve(__dirname, '../src'),
 9       'assets': path.resolve(__dirname, '../src/assets'),
10       'components': path.resolve(__dirname, '../src/components'),
11       'jquery': path.resolve(__dirname, '../src/js/jquery.js'),
12       'moment':path.resolve(__dirname, '../src/plugins/daterangepicker/moment.js'),
13       'iCheck':path.resolve(__dirname, '../src/plugins/iCheck/icheck.min.js'),
14       'daterangepicker': path.resolve(__dirname, '../src/plugins/daterangepicker/daterangepicker.js')
15     }
16   },
17   plugins:[
18     new webpack.ProvidePlugin({
19       'moment':'moment',
20       $:"jquery",
21       jQuery:"jquery",
22       "window.jQuery":"jquery",
23       iCheck: "iCheck",
24       daterangepicker: "daterangepicker"
25     })
26   ]
27 }

 

 

（三）npm安裝：

能安裝模塊的就比較簡單了，npm直接安裝，或者package.json中配置，而後install; 使用時inport就行