win10下Vue环境搭建(脚手架初始化+项目启动)教程(详解多图)

news2024/11/16 1:36:55

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、下载安装node.js
  • 二、node.js环境配置
  • 三、下载安装vue脚手架


前言

初学Vue 搭环境快把我整死了QAQ 差点入门即入土

一、下载安装node.js

①下载地址:https://nodejs.org/en/
点击下图所示直接下载,可以得到一个node-v18.14.2-x64.msi文件,直接双击安装

在这里插入图片描述
在这里插入图片描述
②点击next,勾选同意协议,然后next:
在这里插入图片描述

③选择路径,不要装到c盘,然后next再next:
在这里插入图片描述
④复选框不必勾选,next,install:
在这里插入图片描述
⑤完成:
在这里插入图片描述
安装完成后,.msi格式的安装包已经将node启动程序添加到系统环境变量path中,如果想验证可以查看一下:
node
⑥打开cmd,输入:

node -v

出现版本号说明node安装成功。
最新版的node在安装时同时也安装了npm,执行

npm -v

查看npm版本
在这里插入图片描述

二、node.js环境配置

① 打开安装目录在安装目录下新建两个文件夹node_globalnode_cache

在这里插入图片描述

② 用管理员权限打开cmd命令窗口,输入npm config set prefix “你的路径\node_global”:

npm config set prefix "D:\nodeJs\node_global"

输入npm config set cache “你的路径\node_cache” 可直接复制刚刚新建的空文件夹目录:

npm config set cache "D:\nodeJs\node_cache"

在这里插入图片描述

③设置环境变量,打开【系统属性】-【高级】-【环境变量】,点击系统变量中的新建:

在这里插入图片描述

变量名:NODE_PATH
变量值:你的路径\node_global\node_modules
填写完后依次点完确定即可( 告诉系统, 下载的模块或者包都在这里了)
在这里插入图片描述

④编辑用户变量(环境变量)的 path,将默认的 C 盘下 APPData\Roaming\npm 修改成 你的路径\node_global,点击确定:

在这里插入图片描述

在这里插入图片描述

⑤在Path里面添加NODE_PATH:
在这里插入图片描述

⑥ 测试,配置完成后,安装个module测试下,咱们就安装最经常使用的express模块,打开cmd窗口,输入以下命令进行模块的全局安装:

三、下载安装vue脚手架

①管理员权限打开cmd,执行 以下命令,全局安装@vue/cli:

npm install -g @vue/cli

中间遇到warning不用管:
在这里插入图片描述
②把cmd关掉,然后再用管理员权限打开,切换到要创建项目的目录(无限制,哪个都可以),然后使用命令创建项目:

vue create test

方向键+回车选择vue2:
在这里插入图片描述
倒数第三行“successfully”,说明成功创建:
在这里插入图片描述
注:因为网比较好所以之前没有把nmp换成淘宝的镜像,如果下载过程持续15min以上建议配置一下淘宝镜像再执行创建,命令是:

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

③启动项目:
依次执行最下方两条蓝色的命令,进入项目目录并启动项目,编译一个事先写好的hello代码。中间可能出现安全中心警报,允许访问即可。完成:
在这里插入图片描述

两个地址分别是自己访问和同局域网的其他人访问的地址,在浏览器上输入url即可看到:
在这里插入图片描述

项目启动成功!

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

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

相关文章

bug的创建和等级

1.如何合理的创建一个bug 创建bug的要素 :问题的版本,发现问题的环境,发现问题的步骤,预取结果,实际结果。 eg: 1.问题的版本:谷歌浏览器108版本 2.发现问题的环境:windows11家庭版…

算法训练营 day56 动态规划 最长递增子序列 最长连续递增序列 最长重复子数组

算法训练营 day56 动态规划 最长递增子序列 最长连续递增序列 最长重复子数组 最长递增子序列 300. 最长递增子序列 - 力扣(LeetCode) 给你一个整数数组 nums ,找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#x…

如何理解API?API 是如何工作的?(5分钟诠释)

大家可能最近经常听到 API 这个概念,那什么是API,它又有什么特点和好处呢? wiki 百科镇楼 …[APIs are] a set of subroutine definitions, protocols, and tools for building application software. In general terms, it’s a set of cle…

Linux文件属性--软连接和硬链接

文章目录软链接硬链接软链接和硬链接的区别软链接 软链接(Soft Link)又叫符号链接(Symbolic Link ),是linux特殊文件的一种,文件类型为l,它的数据是它所链接的文件或目录的路径。软链接可以跨磁盘和 分区…

《数据库系统概论》学习笔记——第三章 关系数据库标准语言SQL

教材为数据库系统概论第五版(王珊) 最重量级的一章。从后续的学习,基本所有实验,大作业和考试都会涉及SQL,SQL实际上是有很多变化的,书上讲的只是最基本的(做了大作业才知道SQL能有这么多变化&a…

移动端自动化测试(一)appium环境搭建

自动化测试有主要有两个分类,接口自动化和ui自动化,ui自动化呢又分移动端的和web端的,当然还有c/s架构的,这种桌面程序应用的自动化,使用QTP,只不过现在没人做了。 web自动化呢,现在基本上都是…

k8s 强制删除 namespace

k8s 强制删除 namespace1、命名空间查看资源2、删除k8s指定命名空间3、强制删除3.1、导出命名空间jsno3.2、使用kubectl代理3.3、代理测试3.4、使用http接口进行删除1、命名空间查看资源 kubectl api-resources -o name --verbslist --namespaced | xargs -n 1 kubectl get --…

jsp运动会管理系统论文

技术:Java、JSP等摘要:运动会作为各项体育运动的基础,具有广泛的群众性。每年一度的学校运动会声势浩 大,是提高、检验学生的健康水平,开展全民健身运动的有效途径。在规模上虽然不如大型运动会,但由于比赛…

【Python数据挖掘入门】2.2文本分析-中文分词(jieba库cut方法/自定义词典load_userdict/语料库分词)

中文分词就是将一个汉字序列切分成一个一个单独的词。例如: 另外还有停用词的概念,停用词是指在数据处理时,需要过滤掉的某些字或词。 一、jieba库 安装过程见:https://blog.csdn.net/momomuabc/article/details/128198306 ji…

Docker -- Docker底层原理深度剖析

概论 谈到Docker原理,我们先来三板斧。 Linux命名空间(namespace)控制组(cgroups)联合文件系统(UnionFS) 然后我们心中要明白一件事情: 容器是一种特殊的进程。容器技术的核心功能…

vue2 diff算法

diff是什么 diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点: ♥比较只会在同层级进行, 不会跨层级比较 ♥在diff比较的过程中,循环从两边向中间比较 diff 算法的在很多场景下都有应用,在 vue 中,作用于虚拟 dom…

HTML#4超链接标签,列表标签,表格标签和布局标签

一. 超链接标签介绍<a> 定义超链接,用于连接到另一个资源herf: 指定访问资源的URLtarget: 指定打开资源的方式代码<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>超链接标签</title> <…

ES6-ES13教程笔记(一)

课程目录 1、走入ES6 1.1、初识ES6 1.2 let声明变量与const声明常量 1、let声明 1、块级作用域&#xff0c;不会成为全局变量影响别人&#xff1b; 2、不允许重复声明&#xff1b; 3、变量不会提升&#xff1b;&#xff08;会存在暂时性死区&#xff09; 4、不与顶层对象挂…

模糊神经网络(FNN)的实现(Python,附源码及数据集)

文章目录一、理论基础1、模糊神经网络结构2、前向传播过程3、反向传播过程4、建模步骤二、模糊神经网络的实现1、训练过程&#xff08;FNN.py&#xff09;2、测试过程&#xff08;test.py&#xff09;3、测试结果4、参考源码及实验数据集一、理论基础 模糊神经网络&#xff08…

阿里大数据之路总结

一、数据采集 二、数据同步 2.1、数据同步方式&#xff1a; 数据同步的三种方式&#xff1a;直连方式、数据文件同步、数据库日志解析方式 关系型数据库的结构化数据&#xff1a;MYSQL、Oracle、DB2、SQL Server非关系型数据库的非结构化数据&#xff08;数据库表形式存储&am…

力扣Top100题之两数相加(Java解法)

0 题目描述 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数…

Unity IOS 通过命令行导出IPA

新建一个文件没有后缀然后输入如下内容 #!/usr/bin/env sh /Applications/Unity/Hub/Editor/2020.1.5f1c1/Unity.app/Contents/MacOS/Unity -quit -batchmode -projectPath /Users/zyt/Test -executeMethod Test.BuildEditor.BuildApp cd /Users/zyt/Test/Xcode/unity-xcode x…

Redis:SETNX解决分布式锁误删问题

Redis&#xff1a;SETNX解决分布式锁误删问题一.概述二. 分布式锁&#xff08;初级&#xff09;&#xff08;1&#xff09;锁接口&#xff08;2&#xff09;锁实现类上锁&#xff08;3&#xff09;释放锁&#xff08;4&#xff09;存在的问题三. 改进释放锁&#xff08;1&#…

linux:字符串拷贝的五种方法:使用指针下标,指针变量加偏移量,指针变量自加等

字符串数组名做函数形参&#xff0c;会退化正指针变量&#xff0c;需要使用指针变量操作字符串 代码&#xff1a; #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include <s…

NDlib:npm启动网络演化可视化项目(SIR模型)

文章目录安装node.js以及vue启动NDlib_viz可视化项目后续问题打开项目安装node.js以及vue 参考之前的文章Node.js、npm和vue下载及安装 启动NDlib_viz可视化项目 在github下载项目到本地 https://github.com/GiulioRossetti/NDLib_viz 将node.js路径添加到环境变量 打开命令…