vue项目中引入插件

时间:2024-03-14 20:24:16

(一)Vue引入jquer以及jquery插件步骤
(一)在package.json中添加
vue项目中引入插件
(二)安装jquery
npm install jquery
(三)修改build/webpack.base.conf.js中的两处
1).在开头引入webpack
vue项目中引入插件
2)在module.exports最后增加一个plugins对象
vue项目中引入插件
3)重新 npm run dev
4)在main.js中引入
import $ from ‘jquery
vue项目中引入插件


引入jquery后就可以使用jquery插件,比如*
(一)引入bootstrap:
在vue入口文件src/main.js中添加
import ‘./assets/libs/bootstrap/css/bootstrap.min.css’
import ‘./assets/libs/bootstrap/js/bootstrap.min’
(二).引入jquery后引入轮播插件flexSlider
1)下载flexSlider压缩包
vue项目中引入插件
vue项目中引入插件
2)解压后,将fonts文件夹,jquery.flexslider-min文件,flexslider.css放在static文件夹下
vue项目中引入插件
3).在vue模板中使用
vue项目中引入插件
4)引入flexSlider所需文件
vue项目中引入插件
5)将flexSlider放在ajax加载后(不然会出现只有刷新才会出现图片的现象)vue项目中引入插件


Vue项目引入icon图标步骤
(一)进入iconfont官网,找到自己所需要的图标
vue项目中引入插件
(二)将需要的图标加入购物车库,点击下载代码
vue项目中引入插件
(三)解压后,在src/asserts文件夹中创建icons文件夹,将下列文件copy中icons文件夹中
vue项目中引入插件
vue项目中引入插件
(四)在自己需要使用图标的地方引入
vue项目中引入插件
(五) 在模板中使用即可,如果不知道类,点击解压文件中html文件,里面有说明