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 是需要发布到生产环境的。
原文:http://blog.hawkzz.com/2017/03/13/Vue-js配置less/ 作者: hawk_zz
原文:http://blog.hawkzz.com/2017/03/30/安装依赖/ 作者: hawk_zz
vuejs配置less的更多相关文章
- vuejs项目---配置理解:
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
- vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版
vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版 vuejs技术交流QQ群:458915921 有兴趣的可以加入 vuejs 目录结构 build build.js check ...
- 配置vuejs加载模拟数据
[个人笔记,非技术博客] 1.使用前确保安装axios插件,vuejs官方推荐,当然使用其他插件也可以 2.配置dev-server.js var router = express.Router(); ...
- No.1一步步学习vuejs 环境配置安装篇
一 安装与配置 需要安装node.js和 nmp管理器http://nodejs.cn/安装完后测试输入命令查看版本验证 node -v //查看node.js的版本 npm -v //查看 由于有些 ...
- 【VueJS】VueJS开发请求本地json数据的配置
VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...
- webpack + vuejs 基本配置(一)
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...
- vueJs+webpack单页面应用--vue-router配置
vue-route版本要跟vue版本同步,我的vue用的2.0+的,vue-router 也用了最新版2.1+ npm安装vue-router: $ npm install vue-router -- ...
- vuejs axios安装配置与使用
1.安装服务 npm install --save axios vue-axios 2.在main.js import axios from 'axios' import VueAxios from ...
- webpack + vuejs(都是1.0的版本) 基本配置(一)
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack12.Vue.js13.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在 ...
随机推荐
- Android模拟器检测常用方法
在Android开发过程中,防作弊一直是老生常谈的问题,而模拟器的检测往往是防作弊中的重要一环,接下来有关于模拟器的检测方法,和大家进行一个简单的分享. 1.传统的检测方法. 传统的检测方法主要是对模 ...
- 张高兴的 Windows 10 IoT 开发笔记:使用 MAX7219 驱动 8×8 点阵
GitHub:https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/MAX7219
- 张高兴的 Xamarin.Android 学习笔记:(三)活动生命周期
本文将直接解释我写的一个示例.示例目的在于展示 Android 活动在 Xamarin 中的用法.如果有朋友对基础知识不太了解建议先学 Android . 新建一个 Xamarin.Android 项 ...
- CURL常用命令记录--用于简单测试接口
curl命令是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载,所以是综合传输工具,但按传统,习惯称curl为下载工具.作为一款强力工具,curl支持包括HTTP.HTTPS.f ...
- LINUX 笔记-wc命令
命令参数: -c 统计字节数. -l 统计行数. -m 统计字符数.这个标志不能与 -c 标志一起使用. -w 统计字数.一个字被定义为由空白.跳格或换行字符分隔的字符串.
- 容器与Docker简介(二)什么是DOCKER——微软微服务电子书翻译系列
Docker是一个开源项目,用于将应用程序部署自动化,作为可在云端或本地运行的可移植,自包含的容器. Docker同时也是一家促进和发展这项技术的公司,与云,Linux以及Windows的供应商(包括 ...
- Windows搭建wnmp
1. 下载安装nginx: nginx官网下载地址:http://nginx.org/en/download.html 下载任一版本(我下载的是stable1.12.1版本)解压到D:\wnmp\ng ...
- fastDFS文件服务器迁移
在实际的项目应用中,由于服务器替换或项目变更难免会存在fastDFS文件服务器迁移的工作.本文重点介绍fastDFS文件系统在不同情况下的文件迁移处理方案. 1.迁移时IP地址不变 通过文件服务器存储 ...
- Ionic3 组件懒加载
使用懒加载能够减少程序启动时间,减少打包后的体积,而且可以很方便的使用路由的功能. 使用懒加载: 右侧红色区域可以省略掉(引用.声明也删掉) 若使用ionic命令新建page,则无需进行下面的操作,否 ...
- Python Web框架篇:Django templates(模板)
为什么用templates? views.py视图函数是用来写Python代码的,HTML可以被直接硬编码在views.py之中.如下: import datetime def current_tim ...