详解在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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery操作元素追加内容示例
Jan 10 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 面试碰到过的问题 在此做下记录
2011/06/09 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
php实现的操作excel类详解
2016/01/15 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python编程之序列操作实例详解
2017/07/22 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
关于python字符串方法分类详解
2019/08/20 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
C#基础面试题
2016/10/17 面试题
房产销售经理职责
2013/12/20 职场文书
联谊活动策划书
2014/01/26 职场文书
历史博物馆观后感
2015/06/05 职场文书
企业法人代表证明书
2015/06/18 职场文书