详解在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 表单序列化实例代码
Jun 11 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery实现日历效果
Sep 11 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
URL Rewrite的设置方法
2007/01/02 PHP
php猜单词游戏
2015/09/29 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
javascript 一些用法小结
2009/09/11 Javascript
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python fileinput模块使用实例
2015/06/03 Python
Python中max函数用法实例分析
2015/07/17 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python logging模块的使用总结
2019/07/09 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
说明书怎么写
2014/05/06 职场文书
企业党员一句话承诺
2014/05/30 职场文书
刮痧观后感
2015/06/05 职场文书
校园安全学习心得体会
2016/01/18 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
四年级作文之植物
2019/09/20 职场文书
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python