Vue 中如何正确引入第三方模块的方法步骤
2019-05-16 18:02
2611 查看
方法一:配置 webpack ProvidePlugin 全局引入
假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入:
https://webpack.js.org/plugins/provide-plugin/
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
方法二:包装成插件在 Vue 中调用 use 方法安装
另外一种比较靠谱的方法是将第三方模块打包成插件,如我需要全局使用 echarts,那么在 src 目录下新建一个 lib,并创建名为 echarts.js 的文件:
import echarts from 'echarts' export default { install (Vue) { Object.defineProperty(Vue.prototype, '$echarts', { value: echarts }) } }
上述代码 export 一个对象,对象包含一个 install 方法,该方法的参数是 Vue 构造函数,我们使用 Object.defineProperty 或 Reflect 的方法将 $echarts 定义到 Vue.prototype 中去。
然后在项目中使用:
import echarts from './lib/echarts' Vue.use(echarts) // use new Vue({ // ... }).$mount('#app')
这样就可以在 vue 实例中通过 $echarts 来使用
// ... let myChart = this.$echarts.init(this.$refs.main) // ...
其他方法
其他还有在 window 对象中全局定义;或使用 Vue.prototype.xxx = xxx 等,都存在各样问题,如 window 会导致全局作用域污染;后者定义方式不可靠,比方说 echarts 模块太大,会经常出现扩展定义失败导致的报错
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 如何正确引入第三方模块,解决Electron中模块编译失败问题
- Android项目中如何正确的引入第三方jar包(工程) 分类: Android安装及配置 2014-06-27 22:39 112人阅读 评论(0) 收藏
- 如何在vue中引入第三方jquery,swiper等库(二)
- 如何发布一个自定义Node.js模块到NPM(详细步骤,附Git使用方法)
- 如何在vue中引入第三方jquery,swiper等库(一)
- vue2.0项目中引入element-UI组件【试了好多次 终于找到正确的方法了 】
- Vue 中如何引入第三方 JS 库
- 最新vue 在webpack.dev.conf.js文件 配置如何mock数据? 以下是方法和步骤 但是 就是访问不到?求解!!!
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
- Android项目中如何正确的引入第三方jar包(工程)
- axios模块在vue开发中如何使用引入,如何注册全局方法
- Vue 中如何引入第三方 JS 库
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- 如何在Vue项目中正确的引入JQuery
- webpack+vue-cli项目中引入外部非模块格式js的方法
- Android项目中如何正确的引入第三方jar包(工程)
- vue组件引入第三方js组件(无暴露对象或方法的js)
- Android项目中如何正确的引入第三方jar包(工程)
- vue学习如何引入js,封装操作localStorage本地储存的方法
- Android开发 之 Android项目中如何正确的引入第三方jar包(工程)