详解在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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery异步提交表单实例
May 30 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 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
生成缩略图
2006/10/09 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
JavaScript使用cookie
2007/02/02 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
纯css3实现走马灯效果
2014/12/26 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
《日月潭》教学反思
2014/02/28 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL