详解在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 submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery实现视频展示效果
May 30 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery中event.target和this的区别详解
Aug 13 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php中变量及部分适用方法
2008/03/27 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
工地资料员岗位职责
2013/12/31 职场文书
自荐信的格式
2014/03/10 职场文书
大学生社团活动总结
2014/04/26 职场文书
工作说明书范文
2014/05/07 职场文书
临床专业自荐信
2014/06/22 职场文书
导航工程专业自荐信
2014/09/02 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
小学入学感言
2015/08/01 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL