1. 程式人生 > >Vue-cli開發筆記三----------引入外部插件

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

scrip onf vue center logs aid text cli exp

(一)絕對路徑直接引入:

(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就行

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