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 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
JS高级笔记
Jul 13 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
js实现消息滚动效果
Jan 18 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
微信小程序访问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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
员工保密协议书
2014/09/27 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
导游词之长城八达岭
2019/09/24 职场文书
python tkinter模块的简单使用
2021/04/07 Python