Vue如何在组件内部使用CDN

Posted 2023-03-09

参考技术A 引入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的方法是一样的
手动引入