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 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
微信小程序访问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 autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
bootstrap轮播图示例代码分享
2017/05/17 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python循环语句之break与continue的用法
2015/10/14 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
.net工程师笔试题
2012/06/09 面试题
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
自荐信的五个重要部分
2013/10/29 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
大学生村官事迹材料
2014/01/21 职场文书
副董事长岗位职责
2014/04/02 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
义诊活动总结
2015/02/04 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
react合成事件与原生事件的相关理解
2021/05/13 Javascript
在pycharm中无法import所安装的库解决方案
2021/05/31 Python