位置: 编程技术 - 正文

详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css(vue-cli作用)

编辑:rootadmin

推荐整理分享详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css(vue-cli作用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue cli的作用,vue-cli使用,vue-cli作用,vue-cli ui,vue-cli lib,vue-cli ui,vue-cli ui,vue-cli作用,内容如对您有帮助,希望把文章链接给更多的朋友!

写在前面:

本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery、bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点。

引入bootstrap

1. 下载所需要的bootstrap文件。

将要使用的bootstrap文件放入src目录下的assets文件夹中。

2. 在入口文件src/main.js中引入bootstrap

这样就可以在vue项目中使用bootstrap的样式了,直接在class中使用即可,如下图按钮样式。

引入jquery

1. 下载jquery依赖。

本来我下载的jQuery依赖包,但是出现了一个警告:

这里出现了一个警告,意思是说弃用jQuery@1.7.4,请使用“jquery”(全小写)。,然后我就换成全小写的jquery。

2. 修改配置

位置:build文件夹下的webpack.base.conf.js文件。

加入webpack对象:

位置:build文件夹下的webpack.base.conf.js文件(原来的位置),在下方module.exports对象里面加入。

没有第三步,现在已经可以直接在组件中使用jquery的方法了,不用在其他位置引用jquery,就是这么轻松加愉快。

详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css(vue-cli作用)

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文件的写法。

如果需要使用sass

安装sass模块

在组件的style部分使用内联写法

引用sass外部文件的写法。

如果需要使用less

安装less模块

在组件的style部分使用内联写法

引用less外部文件的写法。

结语:

仔细阅读,按步骤来基本上可以配置成功。如果有哪个地方写的不够清楚的,欢迎指正。本文面向小白,写着玩,大手请轻喷。希望对大家的学习有所帮助,也希望大家多多支持积木网。

AngularJS实现图片上传和预览功能的方法分析 本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考,具体如下:html5原生方法先看一下html5原生方法上传和预览图片的实现

浅谈vue2 单页面如何设置网页title 前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在

Angularjs渲染的 using 指令的星级评分系统示例 本文介绍Angularjs渲染的using指令的星级评分系统示例,分享给大家,具体如下:我试图创建静态使用angularjs/离子成效甚微的星级评分系统。但目前什么

标签: vue-cli作用

本文链接地址:https://www.jiuchutong.com/biancheng/377355.html 转载请保留说明!

上一篇:手把手教你使用vue-cli脚手架(图文解析)(手把手教你使用opc)

下一篇:AngularJS实现图片上传和预览功能的方法分析(angular 图片懒加载)

  • 自然人税收管理系统残疾人申报
  • 增值税建筑服务税率变化时间
  • 管理费用与税金及附加哪个会影响利润
  • 纳税人与负税人一致的是
  • 利润表的所得税费用怎么填
  • 小规模企业所得税税率多少
  • 自然人管理系统银行信息
  • 跨期列支成本费用危害
  • 退货未开发票如何做账
  • 集资建房出租收入如何缴纳个税
  • 残保金上年在职工资总额
  • 小规模纳税人开具1%增值税专用发票可以抵扣吗
  • 年终红包怎么入账
  • 增值税专用发票可以开电子发票吗
  • 加计扣除需要注意的几大风险点
  • 电子银行承兑如何背书给别人
  • 发票丢失后可以冲红吗
  • 盘活存量国有资产与轻资产运营
  • 高速过路费抵扣进项怎么填报
  • 其他债权投资有哪些明细科目
  • mac老款设备怎样升级os14
  • 旅行社开的发票怎么入账
  • QQPCTray.exe是什么进程 QQPCTray.exe文件介绍
  • php中变量有哪些基本数据类型?
  • 应收账款保理的主要意图在于
  • 股权转让所得怎么做账
  • 搜索人工制造
  • 年末本年利润怎么结转
  • 土地增值税预征税率一览表
  • 航空公司开具的代订机票费可以抵扣吗
  • 增值税扣税凭证不包括
  • 旅游业差额开票税率
  • 企业金融资产包括银行存款吗
  • 资产负债率如何
  • 承兑汇票上能手写名字吗
  • 企业利润分配项目是什么
  • 企业处置子公司
  • 甲供材的卸料由谁负责
  • 收到生育津贴会计分离
  • 农业种植补贴需要审批吗
  • 应付账款重分类是什么意思
  • 销售旧固定资产开票编码
  • 预付检测费未收到发票
  • 增值税发票开错冲红重开如何做会计分录?
  • 初始数据都录入什么意思
  • 进销存怎么看
  • 装修费可以一次性入账吗
  • 出口未报关收到外汇怎样处理
  • 处置投资性房地产取得的收入属于企业收入吗
  • 建筑业成本必须分别核算么
  • 备用金存回银行
  • 法院主要业务活动
  • win8系统如何开机直接进入桌面
  • winxp怎么自动开机
  • linux添加新硬盘后网卡无法启动
  • 将Red Hat 9.0 CD iso合成一张DVD iso的方法
  • helppane.exe是什么文件
  • centos 查看用户命令
  • centos fuser
  • windows8设置自动关机
  • Win10系统怎么添加字体
  • 如何打开win7
  • 计算机无法从休眠
  • linux k
  • jquery元素隐藏和显示切换
  • shell脚本编程工具
  • android!
  • jquery的筛选
  • javascript面向对象 第三方类库
  • 如何使用jquery
  • android简单项目及代码
  • 电子发票怎么汇总清卡
  • 税收预测的内容
  • 网上申报增值税纳税申报表怎么填写
  • 国家税务总局23号文件
  • 上海《居住登记凭证》
  • 河南省地税局副局长
  • 财税招商专员是做什么的
  • 合肥报税网站
  • 什么是非行政许可
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设