vue项目中引入插件

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


引入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项目中引入插件_第3张图片

2)解压后,将fonts文件夹,jquery.flexslider-min文件,flexslider.css放在static文件夹下
vue项目中引入插件_第4张图片
3).在vue模板中使用
vue项目中引入插件_第5张图片
4)引入flexSlider所需文件
vue项目中引入插件_第6张图片
5)将flexSlider放在ajax加载后(不然会出现只有刷新才会出现图片的现象)vue项目中引入插件_第7张图片


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

你可能感兴趣的:(vue项目中引入插件)