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控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
js三种排序算法分享
Aug 16 Javascript
js运动应用实例解析
Dec 28 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
jquery拖动改变div大小
Jul 04 jQuery
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 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
一棵php的类树(支持无限分类)
2006/10/09 PHP
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP安全配置详细说明
2011/09/26 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
Python-基础-入门 简介
2014/08/09 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
Python with语句用法原理详解
2020/07/03 Python
python代码实现图书管理系统
2020/11/30 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
软件设计的目标是什么
2016/12/04 面试题
个人充满哲理的自我评价
2014/02/20 职场文书
事务机电主管工作职责
2014/02/25 职场文书
工程采购员岗位职责
2014/03/09 职场文书
委托书范文
2014/04/02 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
学历证明范文
2015/06/16 职场文书
遗失证明范文
2015/06/19 职场文书
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL