Vue中引入第三方模块的办法

2018-03-19  本文已影响0人  都江堰古巨基

使用Vue-cli构建的项目导入第三方模块的办法有两种,第一种为直接引入,第二种通过npm安装的模块。
直接引入的办法(以在one.vue中引入jquery.min.js为例):


文件的结构.png
# one.vue组件中:
<script>
import { jquery } from '../../test/jquery.min.js'
  // 然后就可以使用jQuery了。。
  $('div').val
  .....
</script>

npm安装引用的办法:

# 首先设置build文件下的webpack.base.conf.js文件:
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 注意更改的地方!!!
      'jquery': 'jquery' 
    }
 },
# 在最后追加一句:
# 相当于加一个插件
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
  ],

# 组件中使用的办法:
<script>
import $ from 'jquery'
  // 然后就可以使用jQuery了。。
  $('div').val
  .....
</script>
上一篇下一篇

猜你喜欢

热点阅读