vuejs如何配置less

 更新时间:2017年04月25日 16:24:02   作者:hawk_zz  
本篇文章主要介绍了vuejs如何配置less,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

在webstorm上配置Less

首先,全局安装less

npm install less -g

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

  

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

  

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

在"Argument" 里的不用修改;

在"Output paths to refresh"里填写解析的.css文件路径,($FileNameWithoutExtension$.css 这是解析在与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'
 }

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

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

--save-dev

--save

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

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

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

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

相关文章

  • vue动态的 BreadCrumb 组件el-breadcrumb ElementUI详解

    vue动态的 BreadCrumb 组件el-breadcrumb ElementUI详解

    这篇文章主要介绍了vue如何做一个动态的 BreadCrumb 组件,el-breadcrumb ElementUI
    ,本文通过图文示例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue动态绑定class的几种常用方式小结

    vue动态绑定class的几种常用方式小结

    这篇文章主要介绍了vue动态绑定class的几种常用方式,结合实例形式总结分析了vue.js常见的对象方法、数组方法进行class动态绑定相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • Vue2 的12种组件通讯

    Vue2 的12种组件通讯

    之前文章我们描述给过Vue3 的七通信使用,今天中五篇文章我们再来看看Vue2 的通信使用写法的相关资料,需要的朋友可以参考下面文章的具体内容
    2021-09-09
  • Vue使用video标签实现视频播放

    Vue使用video标签实现视频播放

    这篇文章主要为大家详细介绍了Vue使用video标签实现视频播放,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • element-plus日历(Calendar)动态渲染以及避坑指南

    element-plus日历(Calendar)动态渲染以及避坑指南

    这篇文章主要给大家介绍了关于element-plus日历(Calendar)动态渲染以及避坑指南的相关资料,这是最近帮一个后端朋友处理一个前端问题,elementUI中calendar日历组件内容进行自定义显示,实现类似通知事项的日历效果,需要的朋友可以参考下
    2023-08-08
  • vue项目base64字符串转图片的实现代码

    vue项目base64字符串转图片的实现代码

    这篇文章主要介绍了vue项目base64字符串转图片的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • VUE 实现滚动监听 导航栏置顶的方法

    VUE 实现滚动监听 导航栏置顶的方法

    今天小编就为大家分享一篇VUE 实现滚动监听 导航栏置顶的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue在css中图片路径问题解决的配置方法

    Vue在css中图片路径问题解决的配置方法

    这篇文章主要为大家介绍了Vue在css中图片路径问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 利用vue3自己实现计数功能组件封装实例

    利用vue3自己实现计数功能组件封装实例

    组件(Component) 是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于利用vue3自己实现计数功能组件封装的相关资料,需要的朋友可以参考下
    2021-09-09
  • 通用vue组件化登录页面实例代码

    通用vue组件化登录页面实例代码

    这篇文章主要给大家介绍了关于通用vue组件化登录页面的相关资料,文中通过图文以及实例代码将解决的办法介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-08-08

最新评论