Vue如何在组件内部使用CDN

引入jQuery

通过npm安装依赖引入

1、安装

```

npm install jquery -S

```1234

2、修改webpack配置文件

build/webpack.base.conf.js

...var webpack = require("webpack") // 1. 确保引入 webpack，后面会用到

module.exports = { ...

resolve: {

extensions: ['.js', '.vue', '.json'],

modules: [

resolve('src'),

resolve('node_modules')

],

alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'),

// 2. 定义别名和插件位置 'jquery': 'jquery'

}

},

plugins: [

// 3. 配置全局使用 jquery

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

jquery: "jquery","window.jQuery": "jquery"

})

]

}123456789101112131415161718192021222324252627282930

手动载入

手动下载jquery 放在static 目录下，如：static/js/jquery.min.js

和npm不同的只是在第二步定义别名和插件位置：

alias: {'vue$': 'vue/dist/vue.common.js','src': resolve('src'),'assets': resolve('src/assets'),'components': resolve('src/components'),// 2. 定义别名和插件位置

"jquery": path.resolve(__dirname, '../static/js/jquery.min.js')

}12345678

引入jquery第三方插件

可以通过npm安装的插件

这种引入第三方插件的方法和上一节种引入echarts的方法是一样的

手动引入

插件通常用来为 Vue 添加 全局功能 ，所谓全局即不需要像组件那样，每次使用他前都需要先引入一次。对于插件只要在 最开始引入一次，在任何组件就可以直接使用 。（类似于我们在window上添加的方法属性那样，任何地方都可以用）

下面几种常见的用途：

主要两种使用方式

一：全局引入方式

（1）使用步骤

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

也可以传入一个可选的选项对象：

（2）在main.js中配置

比如：使用element-ui为例：

组使用件中

二：组件引入方式

比如，以使用 swiper为例

组件中使用

vue插件其实就是一个简单的 js对象而已 ，然后这个插件对象有一个公开属性 install ，他的值为一个函数，此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。

一：开发插件有四种方法

二：添加实例方法

其中最常用的：【4. 添加实例方法】的写法和使用方法，下面举例说明toast 最简单插件开发过：

（1）新建一个plugin目录，编辑插件toast.js文件

（2）在 main.js 中，需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件

（3）我们在组件中来获取该插件定义的 $msg 属性，比如在根组件App.vue中

控制台输出：Hello World

三：添加全局资源

这里主要介绍过滤器

（1）在plugin目录新建插件filter.js文件

（2）在 main.js 中，需要导入 filter.js 并且通过全局方法 Vue.use() 来使用插件

（3）HelloWorld.vue页面上使用

添加全局资源也可以不放在插件里面实现，可以直接在main.js入口文件创建Vue实例前添加：

其他组件就可以通过this直接使用:

（1）核心区别

简单来说，插件就是指对Vue的功能的增强或补充。

（2）其他区别

一个Vue插件可以是一堆Vue组件的集合（插件干的事就是把内部的组件帮你倒入到vue全局下），也可以是用来扩展Vue功能的，比如 Vuex， Vue-Router。

测试完成，下面就要把的内容打包发布到npm 上去,具体步骤可以参照

https://www.cnblogs.com/adouwt/p/9211003.html

---