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>