• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > vuejs如何配置less

vuejs如何配置less

作者:hawk_zz 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vuejs环境配置,vuejs,vuejs官网,vuejs教程,vuejs视频教程等相关知识,hawk_zz 希望在学习及工作中可以帮助到您

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

在webstorm上配置Less

首先,全局安装less

npm install less -g
</div>

然后,在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)
</div>

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

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

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

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

--save-dev

--save

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

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

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

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

</div>

您可能想查找下面的文章:

  • vuejs如何配置less

相关文章

  • 2017-05-30使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
  • 2017-05-30Vue自定义指令拖拽功能示例
  • 2017-05-30vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
  • 2017-08-14vuejs怎么在服务器上发布部署
  • 2017-05-30Vue监听数组变化源码解析
  • 2017-05-30Vue.js 2.0 和 React、Augular等其他前端框架大比拼
  • 2017-05-30Vue.js学习教程之列表渲染详解
  • 2017-05-30vue-cli如何快速构建vue项目
  • 2017-05-30Vue.js手风琴菜单组件开发实例
  • 2017-05-30Vue + Webpack + Vue-loader学习教程之功能介绍篇

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 利用vue.js插入dom节点的方法
    • vue2.0结合DataTable插件实现表格动态刷新的方法详解
    • 探索Vue.js component内容实现
    • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
    • vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
    • 利用vue-router实现二级菜单内容转换
    • Vue.js双向绑定操作技巧(初级入门)
    • 详解Vue-cli 创建的项目如何跨域请求
    • vuejs响应用户事件(如点击事件)
    • Vue.js实战之通过监听滚动事件实现动态锚点

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有