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

Posted 2020-09-25 胖了个胖胖

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

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