zoukankan      html  css  js  c++  java
  • Vuecli开发笔记三引入外部插件

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

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

  • 相关阅读:
    第十四周 Leetcode 315. Count of Smaller Numbers After Self(HARD) 主席树
    POJ1050 To the Max 最大子矩阵
    POJ1259 The Picnic 最大空凸包问题 DP
    POJ 3734 Blocks 矩阵递推
    POJ2686 Traveling by Stagecoach 状态压缩DP
    iOS上架ipa上传问题那些事
    深入浅出iOS事件机制
    iOS如何跳到系统设置里的各种设置界面
    坑爹的私有API
    业务层网络请求封装
  • 原文地址:https://www.cnblogs.com/molinglan/p/7079850.html
Copyright © 2011-2022 走看看