安装Node.js和创建Vue-cli工程

news2024/11/24 14:01:32

NodeJs中文网:下载 | Node.js (nodejs.org)

注意事项:

 最好下载Node16版本,除非你后续使用的Vue-cli版本比较高,像我使用的Vue-cli3和4.1.1版本去创建工程,然后run运行会报错Error: error:0308010C:digital envelope routines::unsupported

1、当然也可以去下载最新版本,网上已经给了解决方案。 

一路Next,中间可以选择一下安装的路径(默认C盘),最后完成。。。

node -v    //检查node.js版本
npm -v    //检查npm版本

C盘空间不足的,可以执行下面两条命令:

npm config set cache "D:\Program Files\npm-cache"	//改变缓存文件路径
npm config set prefix "D:\Program Files\npm_global" //改变全局包安装的路径

2、全局安装Vuecli(相当于在本机的npm仓库中有了vuecli )

//自己判断安装什么版本

//安装最新@vue/cli版本
npm install -g @vue/cli

//安装指定的@vue/cli版本        这是我用的
npm install -g @vue/cli@4.1.1


//卸载@vue/cli
npm uninstall -g @vue/cli

3、创建vue-cli工程(按照提示 顺序依次执行)

vue create hello        //注意工程名必须全部是小写 hello

选择预设模板,这里选择“Manually select features”		//上下键选择

选择依赖:通过 ↑↓ 箭头选择依赖,按 “空格” 选中,按 “a” 全选,按 “i” 反选。
  a. Babel:转码器,可以将ES6代码转为ES5代码,可兼容不支持ES6的浏览器。
  b. TypeScript:是JavaScript的超集(.ts文件),包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行。
  c. Progressive Web App (PWA) Support:渐进式Web应用程序
  d. Router :vue-router(vue路由)
  e. Vuex :vuex(vue的状态管理模式)
  f. CSS Pre-processors :CSS 预处理器(如:less、sass)
  g. Linter / Formatter:代码风格检查和格式化(如:ESlint)
  h. Unit Testing :单元测试(unit tests)
  i. E2E Testing :e2e(end to end) 测试
第一次创建工程时,可以只选择Babel和Router即可

选择是否使用history 形式的路由,也就是询问路径是否带 # 号,这里选择 n

询问将依赖文件放在独立文件中,还是package.json中:为了保持工程配置文件的整洁性,这里选择“In package.json”

询问是否将当前选择保存以备下次使用。这里选择“n”

接下来等待安装:最后出现:
cd hello
npm run serve

根据提示执行cd hello,npm run server后会启动成功提示到http://localhost:8080/查看
就会看到vue的欢迎页面
解决 Error: error:0308010C:digital envelope routines::unsupporte

修改项目下的package.json文件,在相关命令之前加入一行代码

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

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

相关文章

echarts自定义legend样式

转载自: https://blog.csdn.net/changyana/article/details/126281275 目标样式: 使用legend中的formatter以及textStyle.rich legend: { // 对图形的解释部分orient: vertical,right: 10,y: center,icon: circle, // 添加formatter: function(name)…

绘制图形、ROI截取、高斯三角形

1、直线 2、圆形 3、椭圆 4、矩形 5、多边形 6、文字 //图形绘制 void test1() {Mat img Mat::zeros(Size(512, 512), CV_8UC3);//生成一个黑色图像用于绘制几何图形//绘制圆形circle(img, Point(50, 50), 25, Scalar(255, 255, 255), -1);//绘制一个实心圆circle(img, Point(…

Flutter 轮播图 flutter_swiper属性说明使用

今天分享的内容是关于图片轮播的实现,使用到的库是flutter_swiper,如果有出现空检查报错的,可以使用flutter_swiper_null_safety 轮播图效果如下: 先贴出基本参数详解: 参数说明itemBuilder列表的构造indicatorLayou…

Redis持久化之RDB和AOF

6、Redis持久化 6.1、背景 首先Redis作为一种缓存性数据库,如果缓存中有数据,他可以很快的把数据返回给客户,至于为什么他可以很快的将数据返回给客户,主要是因为他是一种内存性数据库,不需要额外的IO操作&#xff0…

报错:Destructuring assignments are not supported by current javaScript version

报错信息:当前JavaScript 版本不支持非结构化赋值 报错示例: 报错的原因是:这种语法是EcmaScript6才有的,以往的版本没有,修改一下javaScript的版本即可,方法如下:找到setting----->Languag…

接口自动化测试项目,让你像Postman一样编写测试用例,支持多环境切换、多业务依赖、数据库断言等

项目介绍 接口自动化测试项目2.0 软件架构 本框架主要是基于 Python unittest ddt HTMLTestRunner log excel mysql 企业微信通知 Jenkins 实现的接口自动化框架。 前言 公司突然要求你做自动化,但是没有代码基础不知道怎么做?或者有自动…

解密Vue 3:透过原理看框架,揭开它的神秘面纱

文章目录 1. 响应式系统2. 组件化3. 虚拟 DOM4. 编译器5. 插件系统附录:前后端实战项目(简历必备) 推荐:★★★★★ Vue 3 是一种用于构建用户界面的现代 JavaScript 框架。它基于响应式编程和虚拟 DOM 技术,并通过组件…

postgresql(一):使用psql导入数据库

使用psql导入数据库 1、概述2、具体问题3、总结 1、概述 大家好,我是欧阳方超。 听说postgresql越来越流行了?psql是一个功能强大的命令行工具,用于管理和操作PostgreSQL数据库。它提供了一个交互式环境,允许用户执行SQL查询、创…

MISA代码配置运行

MISA源码github链接:click here IDE: Pycharm专业版2022.2.2 python3.8 一、创建虚拟环境: 尝试 源码中给了environment.yml,可以用以下命令创建,但可能是由于某些库的版本问题,尝试失败。 conda env create -f environment.…

协议分层与OSI参考模型【图解TCP/IP(笔记三)】

文章目录 协议分层与OSI参考模型协议的分层理解协议的分层OSI参考模型OSI参考模型中各个分层的作用 协议分层与OSI参考模型 协议的分层 OSI参考模型将通信协议中必要的功能分成了7层。通过这些分层,使得那些比较复杂的网络协议更加简单化。 在这一模型中&#xf…

Python_字典包含关系判定方法

Python中的字典是一种无序的数据结构,它由键和对应的值组成 在实际编程中我们经常需要判断一个字典是否包含另一个字典的所有键值对 本文将介绍一种种简单而有效的方法来判定字典之间的包含关系。 a {"a": 1, "b": 2, "c": 3, &q…

zabbix 应用(贼详细!)

目录 一:添加 zabbix 客户端主机 1、关闭防火墙,修改主机名 2、服务端和客户端都配置时间同步 ​3、服务端和客户端都设置 hosts 解析 4、设置 zabbix 的下载源,安装 zabbix-agent2 5、修改 agent2 配置文件 6、启动 zabbix-agent2 7、 在…

OpenCV读取一张8位无符号单通道图像并显示

#include <iostream> #include <opencv2/imgcodecs.hpp> #include <opencv2/opencv.hpp> #include

XXX汽车SAP ERP系统接口提速,助力生产物流业务数据快速处理(投稿数字化月报一)

XXX汽车ERP系统中数据量第一大接口-生产订单下达接口&#xff0c;一直是ESB总线重点关注的重要接口。从2019年项目初发给MOM生产、LES物流系统到现在&#xff0c;下游接收系统已经增加到15个之多。针对该接口下达数据缓慢的情况&#xff0c;SAP项目开发团队攻坚克难&#xff0c…

购买上帝的男孩——好文分享

购买上帝的男孩——好文分享 一个小男孩捏着1美元硬币&#xff0c;沿街一家一家商店地询问&#xff1a;“请问您这儿有上帝卖吗&#xff1f;”店主要么说没有&#xff0c;要么嫌他在捣乱&#xff0c;不由分说就把他撵出了店门。 天快黑时&#xff0c;第二十九家商店的店主热情…

QtMqtt —— 3、搭建Mqtt服务,修改QMqtt源码进行消息订阅测试(附源码)

效果 搭建EMQX即Mqtt服务 为了调试程序,我们需要一台MQTT服务器。EMQ公司官方提供了测试的MQTT服务器,但由于连接数众多,不太稳定,我们需要自己搭建一台MQTT服务器。 官网下载EMQX 启动:      1. 下载 emqx-5.1.1-windows-amd64.zip ,解压      2. 命令行下进入…

UE4 实现控制场景中所有物体透明度功能

本文会讲解如何利用材质参数集简单的实现修改场景中所有物体透明度的功能&#xff0c;讲解地图为第三人称地图 1.创建材质变量集&#xff0c;这里面新建的变量可以在蓝图中控制&#xff0c;这样就能很方便的修改透明度 因为透明度是只有一个值的参数所以创建scalar参数&#x…

Kafka入门,分区的分配再平衡(二十)

分区的分配以及再平衡 1、kafka有四种主流的分区策略&#xff1a;Range,RoundRobin,Sticky,CooperativeSticky。可以通过配置参数partition.assignment.strategy,修改分区的分配策略。默认策略是RanageCooperativeSticky。Kafka可以同事使用多个分区分配策略。 参数描述heartb…

【组合数学 or 枚举】逆序对

C-逆序对_Wannafly挑战赛6 (nowcoder.com) 题意&#xff1a; 思路&#xff1a; 组合数学&#xff0c;无非两种做法&#xff0c;一种是计数DP&#xff0c;另一种是组合数 DP显然不可能&#xff0c;那就组合数 考虑组合数的时候可以把这道题变成一个枚举题 我们去枚举位&…

Android shader编译原理

作者&#xff1a;tmaczhang 1. 什么是着色器编译卡顿&#xff1f; 着色器是在 GPU&#xff08;图形处理单元&#xff09;上运行的代码。当 Flutter 渲染的 Skia 图形后端首次看到新的绘制命令序列时&#xff0c;它有时会生成和编译一个自定义的 GPU 着色器用于该命令序列。使得…