最近学习Vue.js做一个后台管理系统,采用 vue-cli 脚手架搭建,Element作为UI框架。然后想在项目中自定义滚动条,舍弃浏览器原生滚动条,成熟的现成插件也只找到了jQuery的,所以不得不引入jQuery,下面介绍下jQuery的引入及其第三方插件的引入:
引入jQuery
通过npm安装依赖引入
1、安装
```
npm install jquery -S
```
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"
})
]
}
手动载入
手动下载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')
}
引入jquery第三方插件
可以通过npm安装的插件
这种引入第三方插件的方法和上一节种引入echarts的方法是一样的
手动引入
未完待续。。。