本次我们来聊聊,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. Django中添加富文本编辑器

    使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...

  2. SAP 发送邮件 面向对象

    REPORT ZMMR0068_YYN. CONSTANTS: gc_tab TYPE c VALUE cl_bcs_convert=>gc_tab, "CL_ABAP_CHAR_UT ...

  3. SAP文件的上传下载 SMW0,二进制文件

    TCODE: SMW0 选择:二进制数据 输入包名和对象名 新建 维护文件类型 文件参数信息 下载: DATA: LS_WWWDATA_ITEM LIKE WWWDATATAB, " LV_ ...

  4. PHP获取文件扩展名的五种方式

    这是我应聘实习时遇到的一道笔试题: 使用五种以上方式获取一个文件的扩展名. 要求:dir/upload.image.jpg,找出 .jpg 或者 jpg , 必须使用PHP自带的处理函数进行处理,方法 ...

  5. 使用Xmanager通过XDMCP连接远程Centos 7 (摘自xmanager官方博客)

    Using Xmanager to connect to remote CentOS 7 via XDMCP Gnome in CentOS 7 tries to use local hardware ...

  6. hdu 6215 -- Brute Force Sorting(双向链表+队列)

    题目链接 Problem Description Beerus needs to sort an array of N integers. Algorithms are not Beerus's st ...

  7. my dream

    我的梦想(践踏一切可以践踏的,放弃一切必须放弃的,然后朝着自己认为的方向努力,只要自己认为对了就可以了(但是最好能考虑方面全一点,这就叫尽力了)我想要的生活怎么那么醉我想要的食物怎么那么碎我最爱的女孩 ...

  8. webpack学习(一)

    1.首先建立一个webpack项目,然后新建文件demo2,在demo2下新建src文件,index.html文件,初始化项目 (npm init --yes)得到package.json 2.全局安 ...

  9. Node.js EventEmitter

    Node.js EventEmitter Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有 ...

  10. ajax参数解析

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...