详解在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实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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
PHP4之真OO
2006/10/09 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Prototype Class对象学习
2009/07/19 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
外贸业务员工作职责
2014/01/06 职场文书
社区平安建设方案
2014/05/25 职场文书
员工趣味活动方案
2014/08/27 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
庭外和解协议书
2016/03/23 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL