详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css


Posted in jQuery onNovember 08, 2017

写在前面:

本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery、bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点。

引入bootstrap

1. 下载所需要的bootstrap文件。

将要使用的bootstrap文件放入src目录下的assets文件夹中。

2. 在入口文件src/main.js中引入bootstrap

import './assets/bootstrap-3.3.7-dist/css/bootstrap.min.css'
import './assets/bootstrap-3.3.7-dist/js/bootstrap.min'//根据自己文件夹路径选择路径

这样就可以在vue项目中使用bootstrap的样式了,直接在class中使用即可,如下图按钮样式。

详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

引入jquery

1. 下载jquery依赖。

npm install jquery --save

本来我下载的jQuery依赖包,但是出现了一个警告:

详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

这里出现了一个警告,意思是说弃用jQuery@1.7.4,请使用“jquery”(全小写)。,然后我就换成全小写的jquery。

2. 修改配置

位置:build文件夹下的webpack.base.conf.js文件。

加入webpack对象:

var webpack = require("webpack");

位置:build文件夹下的webpack.base.conf.js文件(原来的位置),在下方module.exports对象里面加入。 

plugins: [// 3. 配置

全局使用 jquery
   new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery",
   jquery: "jquery",
   "window.jQuery": "jquery"
 })],

详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

没有第三步,现在已经可以直接在组件中使用jquery的方法了,不用在其他位置引用jquery,就是这么轻松加愉快。

3. 使用JQ插件

关于这一点查阅了很多资料,几乎没什么文献清楚的说明jq插件的使用方式,以至于很多使用vue很久的大佬们,也不知道jq的插件竟然可以直接在vue-cli中使用。。这一步虽然是简单的,但这里还是提一下,为各位提供一些参考。

使用方式:

jq插件只需要将插件所需要的文件下载到本地src/assets或者最外层的static文件夹中,然后将插件的文件引用进组件,根据插件封装的方法来进行调用就行了,跟直接使用jq的插件基本上是一毛一样的。

下面是一个引用jq插件的demo示例:

详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

关于css的部分

在vue-cli中使用sass、less来编写css样式,步骤十分简洁,因为vue-cli已经配置好了sass、less,我们要使用sass或者less直接下载两个模块,然后webpack会根据 lang 属性自动用适当的加载器去处理。

css

直接上手写样式即可,使用css规则。

引用外部css文件的写法。

<style lang="css"> 
 @import './index.css' 
 </style> 
 或者 
 <style lang="css" src="./index.css"></style>

如果需要使用sass

安装sass模块

npm install node-sass --save-dev 
npm install sass-loader --save-dev

在组件的style部分使用内联写法

<template></template>
 <script></script>
 <style lang="scss" scoped>//在这个部分添加lang="scss"
 //sass样式 
 </style>

引用sass外部文件的写法。

<style lang="scss" src="./index.scss"></style>

如果需要使用less

安装less模块

npm install less --save-dev 
npm install less-loader --save-dev

在组件的style部分使用内联写法 

<template></template>
 <script></script>
 <style lang="less" scoped>//在这个部分添加lang="less" 
 //less样式 
 </style>

引用less外部文件的写法。

<style lang="less" src="./index.less"></style>

结语:

仔细阅读,按步骤来基本上可以配置成功。如果有哪个地方写的不够清楚的,欢迎指正。本文面向小白,写着玩,大手请轻喷。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
如何编写jquery插件
Mar 29 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 #jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 #jQuery
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 #jQuery
You might like
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
Smarty3配置及入门语法
2017/02/22 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
js常用代码段整理
2011/11/30 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
Python实现ATM系统
2020/02/17 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
Python处理PDF与CDF实例
2020/02/26 Python
python数据类型强制转换实例详解
2020/06/22 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
作弊检讨书1000字
2014/02/01 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
公民授权委托书
2014/10/15 职场文书
财务务虚会发言材料
2014/10/20 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书