Vue Cli安装和node-sass、less-loader、sass-loader安装

news2024/11/24 10:45:35

一、Vue Cli安装

CLI全程是Command-Line Interface,命令行界面,俗称脚手架,可以帮我们快速的创建vue项

Vue Cli的使用必须依赖node环境和webpack

管理员方式打开cmd进行安装,安装命令:

npm i -g @vue/cli

查看版本

C:Windowssystem32>vue -V
@vue/cli 4.5.13

二、node-sass安装

vue项目如果没有采用vue-cli方式创建,那么在项目下载之后,需要安装node-sass,不然会报错。安装后再进行编译

npm install node-sass --registry=https://registry.npm.taobao.org
npm i

如果node-sass版本不对,可以使用如下命令:

npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist 
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass

卸载node-sass命令

cnpm uninstall node-sass -g

安装指定版本的node-sass

npm i -D node-sass@4.12.0 

node-sass 与node版本对应

三、清除缓存

npm cache clean -f

四、less和less-loader安装

默认vue-cli创建的项目并没有安装less-loader,如果你想要使用less语法,必须先配置好less相关的loader。

安装less-loader,还要安装less,因为less-loader是依赖于less的。

npm install less less-loader --save-dev

 如果报错:Syntax Error: TypeError: this.getOptions is not a function,因为less-loader安装的版本过高

卸载less-loader

npm uninstall less-loader

安装less-loader

npm install less-loader@6.0.0

五、安装js-cookie

npm命令

npm install --save js-cookie

六、安装sass-loader

npm命令

npm install --save-dev sass-loader  

 卸载sass-loader

npm uninstall --save sass-loader

 指定版本

npm install sass-loader@7.3.1 --save-dev

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

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

相关文章

鸢尾花数据种类预测、分析与处理、scikit-learn数据集使用、seaborn作图及数据集的划分

一、鸢尾花种类预测 Iris数据集是常用的分类实验数据集,由Fisher, 1936收集整理,Iris也称鸢尾花卉数据集,是一类多重变量分析的数据集 鸢尾花数据集包含了 4个属性(特征值) Sepal.Length(花萼长度&#…

Linux学习-69-Linux系统启动管理

16 Linux系统启动管理 Linux 系统的启动是不需要人为参与和控制的,只要选择开机,系统就会按照设定好的方式进行启动。不过,了解系统的启动有助于我们在系统出现问题时能够快速地修复 Linux 系统。在 CentOS 6.x 中,系统的启动过程…

NoSQLBooster for MongoDB 7.1.X

最智能的 MongoDB IDE NoSQLBooster 是 MongoDB v2.6-6.0 的跨平台 GUI 工具,它提供了内置的 MongoDB 脚本调试器MongoDB 脚本调试器、全面的服务器监控工具、链接流畅查询、SQL 查询、查询代码生成器、任务调度、ES2020 支持和高级智能感知体验。 嵌入式 MongoDB 外…

网络面试-0x17如何立即诶OSI模型和TCP/IP协议

OSI(Open System Interconnect) 开放式通信系统互连参考模型。 每一层实现各自的功能和协议,并完成与相邻层的接口通信。即每一层扮演固定的角色,互不打扰。 应用层 ⑦ 作用:通过应用程序间的交互来完成特定的网络应用。 定义了应用程序之间…

【ONE·R || R与C++混合编程简单介绍 】

总言 课堂演讲:R语言与CPP混合编程课后学习汇报。    文章目录总言1、汇报目的2、RCPP2.1、简单介绍:2.2、简单使用演示:2.1.1、Rcpp包与RTools2.2.2、上手尝试1.0:一个hello world小程序。2.2.3、上手尝试2.0&#…

STC 51单片机57——矩阵键盘 基本原理演示

51单片机 矩阵键盘 基本原理演示 #include "reg51.h" sbit P11P1^1; sbit P14P1^4; sbit P20P2^0; sbit P21P2^1; void main(void) { P111;// Hight P140; //Low if(P111) P200; else P210; while(1); }

刷爆力扣之较大分组的位置

刷爆力扣之较大分组的位置 HELLO,各位看官大大好,我是阿呆 🙈🙈🙈 工作原因拖更些时日,今天阿呆继续记录下力扣刷题过程,收录在专栏算法中 😜😜😜 该专栏按照…

Java项目:SSM农业信息管理系统

作者主页:源码空间站2022 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 管理员角色包含以下功能: 管理员登陆,用户管理,新闻管理,留言列表查看等功能。 用户角色包含以下功能: 查看所有新闻,市…

免费分享20套微信小程序源码 源码免费下载【强烈推荐】

淘源码:国内知名的源码免费下载平台 微信小程序源码包括:商城系统、点餐外卖、垃圾分类、预约洗车、物业管理、校园跑腿、驾考学习、会议预约、图书管理、智能停车、在线答题等小程序源码。 源码分享,文末获取源码! 1、JAVA微信…

微信API接口、微信二次开发API调用

微信API接口、微信二次开发API调用 微信协议接口调用-加微信好友及通过好友请求 加微信好友 /** * 微信自动添加好友 * author wechatno:tangjinjinwx * blog http://www.wlkankan.cn */ Async public void handleMsg(ChannelHandlerContext c…

代码随线录刷题|LeetCode 392.判断子序列 115.不同的子序列

目录 392.判断子序列 思路 1、确定dp数组 2、确定递推公式 3、初始化dp数组 4、遍历顺序 判断子序列 动态规划 双指针 115.不同的子序列 思路 1、确定dp数组 2、确定递推公式 3、初始化dp数组 4、遍历顺序 不同的子序列 392.判断子序列 题目链接:力扣 思路 比较简单…

【Exception】 Java Lambda List转换Map报错 触发异常 IllegalStateException: Duplicate key

【Exception】 Java Lambda List转换Map报错 触发异常 IllegalStateException: Duplicate key 一、问题描述 在使用Java8 lambda 将List转换为Map时,遇到报错:IllegalStateException- Duplicate key .... 具体报错信息如下: java.lang.Illega…

基于Dockerfile创建镜像

目录 一、Docker镜像的创建 1 基于现有镜像创建 2 基于本地模板创建 3 基于Dockerfile 创建 3.1 联合文件系统(UnionFS ) 3.2 镜像加载原理 二、Dockerfile 操作命令的指令 1 FROM 镜像 2 MAINTAINER 名字 3 RUN 命令 4 ENTRYPOINT 5 CMD ENTRYPOINT和CMD的区别&…

HTML网页设计【足球科普】学生DW静态网页设计

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (10…

【openWrt】设置执行定时任务

遇到一个问题,使用openWrt软路由搭建服务器,在docker装了一个maccmsV10,需要每天执行cj信息定时任务,但是maccmsV10本身不支持执行定时任务的配置的。 看了下,openWrt是支持本身是linux系统,所以是可以设…

糟糕,数据库异常不可用怎么办?

摘要:糟糕,数据库异常不可用怎么办?挺着急的,在线等。本文分享自华为云社区《糟糕,数据库异常不可用怎么办?》,作者:GaussDB 数据库。 随着数字化转型的加速,数据量爆发…

获取鼠标在画布中的位置

获取鼠标在画布中的位置 效果展示 概述 本文讲解如何实现我们平时用的画布软件中&#xff0c;怎么获取的我们鼠标时刻在画布中的位置。 构建HTML框架 <body><div class"box"></div> </body>CSS样式 <style>.box {/* 设置盒子…

IDEA 2022.3 发布,终于支持 redis 了

IntelliJ IDEA 发布了最新2022.3版本&#xff0c;本次更新&#xff1a;可以通过设置切换到新 UI&#xff0c;即可预览焕然一新的 IDE 外观。引入了一个新的 Settings Sync&#xff08;设置同步&#xff09;解决方案&#xff0c;用于同步和备份自定义用户设置。此外&#xff0c;…

私域运营对于企业的重要性

企业进行私域流量的精细化运营&#xff0c;不仅可以打造属于企业自己的社群王国&#xff0c;还可以挖掘存量客户的价值&#xff0c;实现更智能的客户管理和个性化运营方案。 前言 相信每个人都对瑞幸咖啡略有耳闻&#xff0c;这个国产咖啡品牌曾一度被封神&#xff0c;但随着财…

【leetcode】2404. 出现最频繁的偶数元素(js实现)

1. 题目 2404. 出现最频繁的偶数元素 2. 思路 创建哈希表&#xff0c;统计偶数的出现次数将哈希表转换成数组&#xff0c;遍历哈希表&#xff0c;设置res的初始值为[-1&#xff0c;0]&#xff0c;第一个值为偶数值&#xff0c;第二个值为这个偶数出现的次数&#xff1b;如果…