详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
作者:OB丶Koro1 发布时间:2023-07-02 17:08:08
写在前面:
本文是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中使用即可,如下图按钮样式。
引入jquery
1. 下载jquery依赖。
npm install jquery --save
本来我下载的jQuery依赖包,但是出现了一个警告:
这里出现了一个警告,意思是说弃用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"
})],
没有第三步,现在已经可以直接在组件中使用jquery的方法了,不用在其他位置引用jquery,就是这么轻松加愉快。
3. 使用JQ插件
关于这一点查阅了很多资料,几乎没什么文献清楚的说明jq插件的使用方式,以至于很多使用vue很久的大佬们,也不知道jq的插件竟然可以直接在vue-cli中使用。。这一步虽然是简单的,但这里还是提一下,为各位提供一些参考。
使用方式:
jq插件只需要将插件所需要的文件下载到本地src/assets或者最外层的static文件夹中,然后将插件的文件引用进组件,根据插件封装的方法来进行调用就行了,跟直接使用jq的插件基本上是一毛一样的。
下面是一个引用jq插件的demo示例:
关于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>
结语:
仔细阅读,按步骤来基本上可以配置成功。如果有哪个地方写的不够清楚的,欢迎指正。本文面向小白,写着玩,大手请轻喷。希望对大家的学习有所帮助,也希望大家多多支持。
来源:https://juejin.im/post/5986f5c8f265da3e0e1053cf
猜你喜欢
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它使得人们很容易的进行阅读和编写。同时也方便了
- ALTER TABLE将表更改为当前字符集。如果在执行ALTER TABLE操作期间遇到重复键错误,原因在于新的字符集将2个键映射到了相同值
- 迭代器聊迭代器前我们要先清楚迭代的概念:通常来讲从一个对象中依次取出数据,这个过程叫做遍历,这个手段称为迭代(重复执行某一段代码块,并将每一
- 数据库系统是管理信息系统的核心,基于数据库的联机事务处理(OLTP)以及联机分析处理(OLAP)是银行、企业、政府等部门最为重要的计算机应用
- 打开editor/filemanager/connectors/php目录下commands.php,找到FileUpload函数,在$sE
- 1.首先安装 “Python” 插件2.安装 pylint 语法检查器推荐安装在当前的 Python
- 1,效果图 2,实现方法const columns = [ { title: '序号',  
- 今天我们使用 Pyecharts 制作一个地球可视化项目,一起来看看吧Let’s go!数据处理这里我们使用全球新冠感染
- DNA序列ACTGATCGATTACGTATAGTATTTGCTATCATACATATATATCGATGCGTTCAT求其互补DNA序列。在
- 在使用python编程过程中,我们往往需要借助字典来提高编程效率。同时为了调试方便,我们希望将某些变量保存为中间文件。例如,在协同过滤算法中
- 前言相信对于每一个编程人员来说,在文本处理的时候,经常会遇到全角半角不一致的问题。于是需要程序能够快速的在两者之间互转。由于全角半角本身存在
- 主要问题为什么argv中第一个,即index=0的内容就是文件名?python中argc是用什么实现的?概念解释argc:argument
- 0.偶然间看到一个奇怪的现象>>> x = 1>>> a = var()>>> a[&
- 一个js代码,图片实时变形一幅图片,长度\宽度之大小与比例都不停地变化,如同哈哈镜的效果,很能引人注目,用在网页上,可以给人意外的惊喜!&l
- 我们之前要想在调度里面实现延时执行,我们可以使用管道阻塞,直到有人往管道里面写东西才变通畅,还可以使用sleep来睡觉,但是睡觉的过程,协程
- 第一次用Python写这种比较实用且好玩的东西,权当练手吧游戏说明:* P键控制“暂停/开始”* 方向键控制贪吃蛇的方向源代码如下:from
- 在Python中,有许多用于发送HTTP请求的库,其中最受欢迎的是requests、aiohttp和httpx。这三个库的性能和功能各不相同
- #!/usr/bin/env python# coding: utf-8### show time in console#import sy
- 引言通过前面的文章我们已经了解到OpenCV 是一个用于计算机视觉和机器学习的开源 python 库。它主要针对实时计算机视觉和图像处理。它
- 用python读取excel表中的数据假如说有如下一张存储了数据的excel表,其中x1-x6是特征,y_label是特征对应的类别标签。我