vue 引入外部less_Vue项目中引入外部文件的方法(css、js、less)
这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记。
例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件)
步骤一:安装webpack
步骤二:在src/assets下面新建css、js、less、fonts文件夹,并放入对应文件。
将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,fonts字体放入fonts目录下
步骤三:安装js依赖
步骤四:安装css依赖
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev
步骤五:安装less依赖
步骤六:修改build/webpack.base.conf.js文件,
(1)在开头引入webpack(后面的plugins那里需要)
(2)添加jquery插件,
在module.exports = { entry: {app:'./src/main.js'},
后面加
new webpack.ProvidePlugin({
$: "jquery",jQuery: "jquery"
})
],
(3)设置路径,
把resolve里面的
代码如下:
改成
'vue$': 'vue/dist/vue.common.js','../src/components'),jquery: "jquery"
}
(4)配置loader加载依赖,
在修改module里面
test: /.js$/,loader: 'babel-loader',exclude: /node_modules/
},{
test: /.css$/,loader: "style-loader!css-loader",},{
test: /.less$/,loader: "style-loader!css-loader!less-loader",
注意:如果utils.js文件里面已经添加了less、css这里不用添加上面后两个test了,否则会报错!!!
(5)配置字体loader加载依赖
步骤六:接着修改 src文件夹下面的main.js文件,打开文件之后在顶部加入
import'./assets/js/bootstrap.min.js'
import'./assets/less/less.less'
现在就可使用less、jquery,如下图所示:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
vue 引入外部less_Vue项目中引入外部文件的方法(css、js、less)相关推荐
- VUE 项目中引入外部js文件(CND引入)
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件 引入 :<script src="https://cdnjs.cloudflare.com ...
- vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
- vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
- 如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图(含vue项目创建教程)
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
- 如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法 第一种:/static/page.html 第二种:通过iframe嵌入 第一种:/static/page.html 在static或public文件夹下,新 ...
- 在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析 在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
- vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
- 【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出(封装工具类)
在SpringBoot+VUE项目中引入EasyExcel实现导入导出 一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
- Webpack项目中引入Bootstrap4.x
Bootstrap是一个简洁.直观.强悍的前端开发框架,在Web开发中使用频率很高,本文主要记录一下如何在 webpack项目中引入Bootstrap4.x. 由于Bootstrap在各个Vue组件中 ...
最新文章
- linux环境下快速配置hadoop集群免密登录
- 基于OpenCV的条形码区域分割
- Java实现excel的读与写(Apache POI)
- 电气6机30节点数据介绍(常适用于优化调度)
- docker maven 打包jar_maven 打包 spring boot 生成docker 镜像
- 聊一聊如何在.NET Core中使用Nacos 2.0
- 可以批量转modis投影_SNAP批量处理Sentinel2数据
- 详解Go语言的计时器
- 《动手学深度学习》TF2.0 实现
- 查看linux进程的设备io,Linux下查看进程IO工具iopp
- laravel实现发送邮件(腾讯企业邮箱)
- win10以太网未识别的网络解决方法
- Balanced Multimodal Learning via On-the-fly Gradient Modulation论文笔记
- HTML页面悬浮球,html滑动仿悬浮球菜单
- 【生成对抗网络 论文泛读】……pix2pix pix2pixhd……
- Windows必装的3款免费效率工具,排名不分先后
- Jmeter5.x线程组和Sampler基础组件-第一个测试计划
- BCD码与十六进制值转换
- BZOJ 2140 稳定婚姻题解
- linux shell 读取文件的三种方式
热门文章
- iOS端给unity发送消息,实现两者交互。
- 重启VirtualBox里面的系统提示VT-x features locked or unavailable in MSR错误
- C#Repeater控件的使用
- 十、Axis WebService常用命令和调试工具
- Android高效加载大图、多图解决方案,有效避免程序内存溢出现象
- Glib2之dbus用法(五)
- Java中HashMap原理
- Mac解压Linux压缩.tar.gz文件
- android framework 触摸屏事件传递
- LOCAL_MODULE_TAGS 选项说明