win7中安装node14和vue

2023-11-07 01:45

本文主要是介绍win7中安装node14和vue,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

下载并安装低版本node 13

到官网去找早期历史版本的 nodejs 13 msi格式即可,并一键安装,我安装在了 D:\Program Files\nodejs 目录下
https://nodejs.org/download/release/v13.14.0/
在这里插入图片描述

下载高版本node 14

下载高版本的node zip包
https://nodejs.org/download/release/v14.15.0/

在这里插入图片描述

解压上述下载好的新版本 nodejs 的 zip 文件,到安装目录 D:\Program Files\nodejs ,将所有同名文件覆盖;

环境变量配置

(1)参考 node安装
添加系统变量:我的电脑右击-进入属性->高级系统设置->环境变量->系统变量中添加NODE_SKIP_PLATFORM_CHECK , 值:1;

命令行使用 node -v 指令和npm -v ,检查当前 node 版本是否更新成功;

(2)设置全局模块存放路径和缓存文件夹:

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

更换淘宝镜像:

npm config set registry=https://registry.npm.taobao.org

查看以上配置是否成功

npm config list

在这里插入图片描述
(3)在安装过程中,自动配置了两个环境变量,一个是环境变量—用户变量—Path里面的C:\Users\你的用户名\AppData\Roaming\npm,另一个是环境变量—系统变量—Path里面的软件安装目录,我们需要增加和修改一下。
环境变量—用户变量—选中Path—点编辑
C:\Users\你的用户名\AppData\Roaming\npm 修改为 你的安装目录\node_global

在这里插入图片描述
环境变量—系统变量—新建
变量名:NODE_PATH
变量值:你的安装目录\node_global\node_modules
在系统变量—Path添加上%NODE_PATH%
在这里插入图片描述
在这里插入图片描述

安装vue

vue-cli创建vue项目详细步骤
安装命令:
npm i -g vue ;
npm i -g @vue/cli
vue -V 查看vue是否安装成功

1 初始化:
vue create 项目名称

2 进入详细选择, 默认vue2版本和默认vue3版本都是有Eslint和Babel的,Eslint是代码规范的,Babel是将ES6转化为ES5的,或者选择自主配置–最后一种;

  • Babel:es6 转 es5
  • Router:路由
  • Vuex:数据容器,存储共享数据
  • CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等
  • Linter / Formatter:代码格式校验

选择vue版本

是否选择history路由模式

选择css预处理器,一般选择Less

Babel、ESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里:

  • In dedicated config files:分别保存到单独的配置文件
  • In package.json:保存到 package.json 文件中
  • 这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。

是否将刚才的选择保存起来,下次可以直接用,一般选择N,可以根据自己需要选择

开始创建,创建完成后可以根据打开文件

这篇关于win7中安装node14和vue的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/360417

相关文章

SQL server数据库如何下载和安装

《SQLserver数据库如何下载和安装》本文指导如何下载安装SQLServer2022评估版及SSMS工具,涵盖安装配置、连接字符串设置、C#连接数据库方法和安全注意事项,如混合验证、参数化查... 目录第一步:打开官网下载对应文件第二步:程序安装配置第三部:安装工具SQL Server Manageme

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,