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

Posted 胖了个胖胖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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就行

 

以上是关于Vue-cli开发笔记三----------引入外部插件的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli引入jquery方法

vue-cli 引入 axios 并全局配置axios

关于Vue-cli引入外部js资源文件失败的一点思路

Vue-cli开发笔记一----------项目的结构

笔记vue-cli 开发环境中跨域连接后台api

Vue3.0+Vant ui配置按需引入(非vue-cli3.0)