vuejs如何配置less


Posted in Javascript onApril 25, 2017

本次我们来聊聊,vuejs里如何使用less。都是根据自己的开发经验来写,不对的地方请各位拍砖。

在webstorm上配置Less

首先,全局安装less

npm install less -g

然后,在webstorm上配置less插件,"File" --> "settings"-->"Tools"

vuejs如何配置less

在"file Watchers" -->"+"-->"Less"

vuejs如何配置less

在"Program"里填写less的安装路径;

在"Argument" 里的不用修改;

在"Output paths to refresh"里填写解析的.css文件路径,($FileNameWithoutExtension$.css 这是解析在与less同一路径目录下);

vuejs如何配置less

Vue项目配置Less

首先,安装less依赖:"less" 与 "less-loader";

npm install less less-loader --save(这里最好是写成--save)

接着,配置webapck解析,"bulid"-->"webpack.base.config.js",添加一下代码

{
   test: /\.less$/,
   loader: 'style-loader!css-loader!less-loader'
 }

vuejs如何配置less

 简说安装依赖是"--save"和"--save dev"的区别

我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,比如:

--save-dev

--save

在 package.json 文件里面提现出来的区别就是,使用 --save-dev 安装的 插件,被写入到 devDependencies 对象里面去,而使用 --save 安装的插件,则被写入到 dependencies 对象里面去。

那 package.json 文件里面的 devDependencies  和 dependencies 对象有什么区别呢?

devDependencies  里面的插件只用于开发环境,不用于生产环境,而 dependencies  是需要发布到生产环境的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
JS实现密码框效果
Sep 10 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
微信小程序访问node.js接口服务器搭建教程
Apr 25 #Javascript
微信小程序中显示html格式内容的方法
Apr 25 #Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 #Javascript
详解Vue 动态添加模板的几种方法
Apr 25 #Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 #Javascript
基于Vue实现timepicker
Apr 25 #Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 #Javascript
You might like
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
tab栏切换原理
2017/03/22 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
python装饰器与递归算法详解
2016/02/18 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python实现电子书翻页小程序
2019/07/23 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
得到Class的三个过程是什么
2012/08/10 面试题
大学生求职自荐信
2013/12/12 职场文书
给分销商的致歉信
2014/01/14 职场文书
会计人员岗位职责
2014/03/19 职场文书
学习雷锋活动总结
2014/04/29 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
网络管理员岗位职责
2015/02/12 职场文书
党员违纪检讨书
2015/05/05 职场文书
对讲机的最大通讯距离是多少
2022/02/18 无线电
redis数据结构之压缩列表
2022/03/21 Redis
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技