本次我们来聊聊,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的更多相关文章

  1. vuejs项目---配置理解:

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...

  2. vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版

    vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版 vuejs技术交流QQ群:458915921 有兴趣的可以加入 vuejs 目录结构 build build.js check ...

  3. 配置vuejs加载模拟数据

    [个人笔记,非技术博客] 1.使用前确保安装axios插件,vuejs官方推荐,当然使用其他插件也可以 2.配置dev-server.js var router = express.Router(); ...

  4. No.1一步步学习vuejs 环境配置安装篇

    一 安装与配置 需要安装node.js和 nmp管理器http://nodejs.cn/安装完后测试输入命令查看版本验证 node -v //查看node.js的版本 npm -v //查看 由于有些 ...

  5. 【VueJS】VueJS开发请求本地json数据的配置

    VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...

  6. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  7. vueJs+webpack单页面应用--vue-router配置

    vue-route版本要跟vue版本同步,我的vue用的2.0+的,vue-router 也用了最新版2.1+ npm安装vue-router: $ npm install vue-router -- ...

  8. vuejs axios安装配置与使用

    1.安装服务 npm install --save axios vue-axios 2.在main.js import axios from 'axios' import VueAxios from ...

  9. webpack + vuejs(都是1.0的版本) 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack12.Vue.js13.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在 ...

随机推荐

  1. python安装(python2.7)

    1.下载python 进入官网下载安装 点击打开链接(官网地址:https://www.python.org/downloads/),进入官网后根据自己需求选择python2 或者 python3 2 ...

  2. 张高兴的 Windows 10 IoT 开发笔记:DHT11 温湿度传感器

    GitHub : https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/DHT11Demo

  3. win10 uwp json

    本文讲的是关于在uwp使用json的简单使用,json应用很多,因为我只是写简单使用,说的东西可能不对或者不符合每个人的预期.如果觉得我有讲的不对的,就多多包含,或者直接关掉这篇文章,但是请勿生气或者 ...

  4. 自学spring AOP

    本人是一个编程新手也是第一次写博客 这篇文章是我结合网上的资料和一些书籍学的 如果有不对之处请留言告知 本文介绍了AOP的两个知识点 1: 代理 代理有两种 我先写:Java静态代理 1:建立一个接口 ...

  5. C++向量(08)

    在数组生存期内,数组的大小是不会改变的.向量是一维数组的类版本,它与数组相似,其中的元素项总是连续存储的,但它和数组不同的是:向量中存储元素的多少可以在运行中根据需要动态地增长或缩小.向量是类模板,具 ...

  6. C++内联函数(03)

    在C++中我们通常定义以下函数来求两个整数的最大值: 代码如下: int max(int a, int b){ return a > b ? a : b;} 为这么一个小的操作定义一个函数的好处 ...

  7. MySQL复制之理论篇

    一.MySQL复制概述 MySQL支持两种复制方式:基于行的复制和基于语句的复制(逻辑复制).这两种方式都是通过在主库上记录 二进制日志.在备库重放日志的方式来实现异步的数据复制,其工作原理如下图: ...

  8. hive 创建表和导入数据实例

    //创建数据库create datebase hive;//创建表create table t_emp(id int,name string,age int,dept_name string,like ...

  9. IdentityServer4 退出登录后,跳转到原来页面

    IdentityServer4 退出登录后,默认会跳转到Config.Client配置的PostLogoutRedirectUris地址,那我们如何动态的跳转到原来的地址呢?实现很简单,Logout修 ...

  10. AngularJS学习篇(二十)

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...