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  是需要发布到生产环境的。

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

赞 (0)

相关推荐

  • vue-cli如何添加less 以及sass

    vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了 npm install node-sass --save-dev npm install sass-loader --save-dev 如果是淘宝镜像直接运行cnpm是一样的效果 然后在组件或者视图中给样式加上语言就可以了 <style lang="sass" scoped> ..... </style> 这里需要说明一下scoped是让样式只在当前组件或者视图中

  • vue如何引用其他组件（css和js）

    vue如何引用其他组件（css和js）

    1.vuejs组件之间的调用components 注意:报错Do not use built-in or reserved HTML elements as component id: 修改组件的名字,例如不能使用address为组件名字 组件名字不要使用内置的或保留HTML元素为组件id, App.vue是一个入口,vue必须注册才能使用 2.vue引入外部的css,放在和引入vue的位置一样 ./代表当前项目,../代表上一级项目 import '../static/style/reset.

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法（css、js、less）

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • VueJS如何引入css或者less文件的一些坑

    VueJS如何引入css或者less文件的一些坑

    我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在"main.js"里使用AMD的方式引入,即 require('./assets/css/main.less'); 这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析 这时,我们要填写上依赖, require('!style!css!less!./assets/css/main.less'); 在很多以前的博客里都

  • vuejs如何配置less

    vuejs如何配置less

    本次我们来聊聊,vuejs里如何使用less.都是根据自己的开发经验来写,不对的地方请各位拍砖. 在webstorm上配置Less 首先,全局安装less npm install less -g 然后,在webstorm上配置less插件,"File" --> "settings"-->"Tools" 在"file Watchers" -->"+"-->"Less"

  • vue2中使用less简易教程

    首先,说明一点,如果是使用npm init webpack 项目名 的方式创建的项目,无需手动配置webpack 所以再vue中使用less就非常简单了,只需要安装less, less-loader就行了 步骤 npm install less less-loader --save //将less和less-loader安装到开发依赖 npm run dev 如果安装成功那么就可以再vue组件中使用less了 <style lang="less" scoped> .hell

  • 使用vue + less 实现简单换肤功能的示例

    做的换肤效果比较简单,只是顶部导航背景色的改变.下面是效果图. 首先,先说一下我最初的思路. 我最初的想法是使用less定义变量,然后通过js来切换变量,通过切换的变量来达到换肤的效果. 我先新建了一个 theme.less文件,代码如下: @theme:@themea; @themea:pink; @themeb:blue; @themec:gray; 如我最开始的想法,应该是通过点击事件来改变变量 @theme 的值. 我用了element-ui这个框架,所以我的下拉菜单的代码也不复杂: <

  • vuejs router history 配置到iis的方法

    先用web平台安装程序安装url rewrite 然后新建web.config在网站根目录下 写如下: <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Angular Rule" stopProcessing="t

  • Vuejs+vue-router打包+Nginx配置的实例

    其实这个网上已经有了很多人写了,为什么我还要再写这一篇博客?因为我亲身把他们生产的坑给踩了个通透(摊手. 正文开始 本次的项目是基于vue-cli生成的项目,采用的vue-router的history模式.到这里相信大部人还是类似了,接下来就是一个坑死人不偿命的网上诸多博客都在采用的巨坑. 在进行打包的时候,很多博客里都写了,将/config/index.js下,build中的assetsPublicPath从/改为./.我很后悔,为什么当初这样照做的时候不去思考为什么,为什么要这样做,凭什么?

  • vuejs路由的传参及路由props配置详解

    vuejs路由的传参及路由props配置详解

    目录 前言 方式1-使用query方式 命名路由 方式2-路由的params参数 query与params的区别 路由的props配置 路由配置的布尔模式 路由配置的对象模式 路由配置函数模式 总结 前言 在Vue项目里,去实现左侧菜单边栏多级内容的展示,导航的切换,以及内容链接的跳转等,用的都是前端路由vue-router,它的重要性,不可言喻 下面介绍一下Vue中的路由传参以及路由的prps配置 方式1-使用query方式 这里循环遍历一个列表为例,query的方式,跳转的url后面携带的一

  • Hbuilder配置Avalon和Vue指令提示的方法详解

    Hbuilder配置Avalon和Vue指令提示的方法详解

    前言 本人是一名JAVA后端开发,偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来倍感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地,可以访问Huilder官网下载体验一下. 言归正传,当前前端的开发中,MVVM框架非常流行,比较典型的如:AngularJS.VueJS等,这部分框架基本都有一个指令的概念,在工具中配置相关的提示,可以极大地方便的我们的开发,下面就来介绍一下如何在Hbuilder中进行配置,话不多说了,来一起

  • vue与TypeScript集成配置最简教程(推荐)

    vue与TypeScript集成配置最简教程(推荐)

    前言 Vue的官方文档没有给出与TypeScript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手. 下面我就给出vue-cli建立的项目与TypeScript集成的最简配置. 初始化项目 首先用vue-cli建立webpack项目.这里为了演示方便,没有打开router和eslint等,可以根据自身情况打开. # vue init webpack vue-typescript ? Project name vue-typescript ? Pro

  • vue-cli单页应用改成多页应用配置详解

    vue-cli单页应用改成多页应用配置详解

    前言 从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用组件,还引入jQuery,这简直完美了,这个demo是从我已经改造完成的项目中摘出来的,现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目. 技术栈 vue: 2.0.1 vue-resource:1.0.3 vue

  • vuejs 单文件组件.vue 文件的使用

    vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于.vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析. 在webpack构建中,需要安装vue-loader 对.vue文件进行解析.在 sumlime 编辑器中,我们 书写.vue 文件,可以安装vue syntax highlight 插件,增加对文件的支持. 用vue-cli 新建一个vue项目,看一下.vue文件长什么样

随机推荐