华山资源网

详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
网络编程 2024/11/15 佚名
3 1

写在前面：

本文是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="/UploadFiles/2021-04-02/index.css">


如果需要使用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="/UploadFiles/2021-04-02/index.scss">


如果需要使用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="/UploadFiles/2021-04-02/index.less">


结语：




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


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com