Vue项目安装less和less-loader

news2025/7/9 2:24:14

第一步:查看webpack和webpack-cli是否安装

打开cmd,通过命令查看

webpack -v
webpack-cli -v

在这里插入图片描述

如果没有安装,要先进行安装

可以通过 npm view webpack version / npm view webpack-cli version 查看当前webpack的最新版本
在这里插入图片描述

可以通过 npm view webpack versions 查看当前webpack的所有版本(webpack-cli同理)
在这里插入图片描述

通过命令安装webpack和webpack-cli

  • 如果先安装webpack,会提示报错,没有安装webpack-cli,所以先安装webpack-cli比较好
  • 安装的版本最好是 webpack@4 webpack-cli@3,因为下面less-loader的版本是根据webpack选择的,其他版本对应的less-loader我暂时没有去查
npm install webpack-cli -g 
npm install webpack -g

第二步:确定webpack版本

上一步中,我们已经知道webpack的版本是4+
在这里插入图片描述

第三步:安装less和less-loader

在vue项目打开终端,进入项目安装(我记得less好像全局安装没用,每个vue项目要单独安装)
less目前的最高版本是5+,但保险起见,我们还是安装4+比较好(我不知道安装5+会不会报错)

npm install less@4 --save-dev

less-loader的版本号要搭配webpack的版本号来选择,webpack@4+可以选择的less-loader版本是5~7(忘记在哪里查到的了,不确定一定是对的,不过我安7是没问题的)

npm install less-loader@7 --save-dev

第四步:使用less

完成less的安装后,我们只需要在style节点上加上lang=‘less’,就可以使用less语法了

<style lang='less' scoped>

</style>

总结

  • 安装webpack@4
  • 安装webpack-cli@3
  • 安装less@4
  • 安装less-loader@7

我是在自己电脑已经安装的webpack和webpack-cli的版本的基础上安装的less,我不知道其他版本这样安装会不会报错,报错很大一部分原因是less-loader版本过高,和webpack版本不适配

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405541.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

什么是axios(写给小白的理解笔记)

0.为什么会诞生axios 最初浏览器页面向服务器请求数据时&#xff0c;返回的是整个页面&#xff0c;整个页面都会刷新&#xff0c;当我们只需要请求部分数据时&#xff0c;返回整个页面会造成网络资源的占用&#xff0c;为了提高数据请求效率&#xff0c;异步网络请求Ajax出现了…

羊了个羊网页版

最近羊了个羊火的不得了&#xff0c;利用周末时间实现一个网页版。步骤如下&#xff1a; 1&#xff0c;用reactjs 实现。 2&#xff0c;实现Gameroom类。 3&#xff0c;实现Card类。 4&#xff0c;通过父组件控制子组件通信方式&#xff0c;控制点击事件。 5&#xff0c;通过t…

nvm切换node版本

在实际的前端开发过程中&#xff0c;可能会经常遇见 node.js 的版本问题&#xff0c;不同的项目需要使用不同的 node.js 版本。比如Vue2和Vue3需要的Node版本不一样。 地址&#xff1a;https://github.com/coreybutler/nvm-windows/releases 注意&#xff1a;安装之前必须完…

ChatGPT初体验——震撼,好用,贾维斯已来

2022.12.26 大概一个月的使用体验&#xff0c;我觉得chagpt的使用还算远远超出我的想象&#xff0c;可以说只有你想不到的&#xff0c;最近需要写一个基于shell的学生选课系统&#xff0c;但是时间实在是紧张的很&#xff0c;一开始chatgpt是无法接受这么大的要求的&#xff0c…

js实现数组去重的方式(7种)

目录JS数组去重的方式1.利用Set()Array.from()2.利用两层循环数组的splice方法3.利用数组的indexOf方法4.利用数组的includes方法5.利用数组的filter()indexOf()6.利用Map()7.利用对象JS数组去重的方式 例&#xff1a;将下面数组去除重复元素&#xff08;以多种数据类型为例&a…

vue开发中,数据更新,但视图不刷新

我们在开发过程中会碰到数据更新&#xff0c;但是视图并未改变的情况&#xff0c;情况如下&#xff1a; 第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到&#xff1b; 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到&#…

【Javaweb学习笔记】在Eclipse中创建Web项目

【Javaweb学习笔记】在Eclipse中创建Web项目 哈喽大家好&#xff0c;这里是Java框架学习笔记专栏第二期 本期内容——在Eclipse中创建Web项目 前期回顾&#xff1a; 第一期——schema约束 笔者还是菜菜&#xff0c;还请大家多多指教呀&#xff01; 文章目录【Javaweb学习笔记】…

解决onebot提示当前QQ版本过低,请升级到最新版在登录!

文章目录前言方法一方法二1️⃣下载文件2️⃣本地运行3️⃣重新启动go-cqHttp4️⃣服务器下载go-cqhttp5️⃣配置gocqhttp6️⃣启动go-cqhttp结语前言 &#x1f947;个人主页&#xff1a;MIKE笔记 &#x1f948;文章专栏&#xff1a;技术教程 &#x1f4e3;TG交流群&#xff1a…

vue:聊天对话框的实现

实现效果&#xff1a;不知道怎么录屏 就用图片展示了&#xff0c;实现了聊天框的基础功能&#xff0c;也有一些细节考虑不完全。未输入消息时可发送图片或视频&#xff0c;输入消息后显示发送按钮&#xff0c;保持滚动条在位于底部的最新消息。 实现方式&#xff1a; 1.布局&a…

React中的setState使用细节和原理解析

文章目录setState使用详解使用setState的原因setState的基本用法setState的异步更新setState获取异步结果setState一定是异步?setState使用详解 前面我们有使用过setState的基本使用, 接下来我们对setState使用进行详细的介绍 使用setState的原因 开发中我们并不能直接通过修…

vue项目打断点的三种方式

方式一&#xff1a;使用debugger介绍&#xff1a;js自带的方法优点&#xff1a;简单好用&#xff0c;不需要额外的配置注意&#xff1a;生产环境下需要去掉方式二&#xff1a;使用vsCode插件断点介绍&#xff1a;vscode集成的断点调试&#xff0c;大佬必备优点&#xff1a;减少…

Nodejs安装及npm配置(超详细)

文章目录一、Node.js 下载二、Node.js 安装node.js简单安装三、Node.js 配置配置npm源关于npm源的更新四、可能遇到的问题1. 直接输入npm 或 npm 命令出错一、Node.js 下载 Node.js官网下载地址 Node.js中文下载地址 本文以 node.js 16.14.2 版本做演示&#xff0c;此版本要…

vue如何请求后端数据

在vue中&#xff0c;我们如何通过请求接口来访问后端的数据呢&#xff1f;在这里简单总结了一个小示例&#xff1a; 主要问题&#xff1a;如果不封装的话&#xff0c;在每次请求的时候都要书写一遍下面的代码&#xff0c;造成代码冗余。 1、在src目录下创建一个utils文件夹&am…

uniapp h5跳转微信小程序(wx-open-launch-weapp)

目录 一、注意事项 二、使用步骤 三、调整样式 一、注意事项 微信版本要求为&#xff1a;7.0.12及以上系统版本要求为&#xff1a;iOS 10.3及以上、Android 5.0及以上已认证的服务号&#xff0c;服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。…

vue项目网页自适应,等比例放大缩小

同样是&#xff0c;虽然标题写的vue项目适用&#xff0c;但其它前端框架应该也可以。其它框架我没什么经验&#xff0c;可以参考着看看&#xff0c;应该适用。 本文章不涉及第三方插件&#xff0c;纯js。 自适应这个问题&#xff0c;老早以前就有一个解决方式&#xff0c;css中…

前端实现vue3使用axios调用后端接口

前言&#xff1a;在探索vue3.0的道路上调接口这件事很重要&#xff0c;所以我就把我探索出来的这条道展示出来&#xff0c;为大家提供便利&#xff0c;望喜欢&#xff0c;废话不多说展示&#xff01;&#xff01;&#xff01; 第一步&#xff1a;在src下创建一个http文件夹&am…

vue-devtools的安装与使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、vue-devtools是什么&#xff1f;二、vue-devtools安装1.下载vue-devtools工具2.安装vue-devtools工具三、vue-devtools的使用总结前言 主要介绍vue-devtool…

nvm详细安装步骤以及使用(window10系统)

nvm详细安装步骤以及使用 nvm是一个管理nodejs版本的工具。在实际的开发中&#xff0c;有些项目的开发依赖需要低版本的nodejs运行环境&#xff0c;此时我们就需要使用nvm来降低nodejs版本。 1.下载安装nvm&#xff0c;首先安装目录不要有空格和中文&#xff0c;会出现乱码 下…

若依框架详细使用

目录 &#x1f3f3;‍&#x1f308;若依是用来干什么的❓ &#x1f6a9;技术支持&#xff1a; &#x1f3f3;‍&#x1f308;如何下载❓ &#x1f6a9;官网地址: &#x1f3f3;‍&#x1f308;如何搭建ruoyi环境❓ &#x1f6a9;若依框架的目录结构 &#x1f6a9; 修改配…

WKHtmltoPdf

踩过的坑 请一定要使用下面的这种方式获取系统的可执行命令&#xff0c;否则会报一堆的找不到目录等错误&#xff01;&#xff01;&#xff01; String osname System.getProperty("os.name").toLowerCase();String cmd osname.contains("windows") ? …