安装nodejs环境搭建vue项目的框架

news2024/9/30 5:26:53

说明:想要搭建一个vue项目的框架,先要安装nodejs环境;我的电脑已经安装过,先卸载掉,重新装一遍(卸载nodejs参考:http://t.csdn.cn/jHmCU)

一、安装nodejs环境

第一步:下载

在官网(https://nodejs.org/en)上下载nodejs安装包
在这里插入图片描述

第二步:安装

双击安装包,安装nodejs;安装路径不要包含中文、建议不要安装在C盘;后面弹出来的界面,一直点next就可以,不需要另外点其他的选项
在这里插入图片描述
在这里插入图片描述

第三步:验证环境变量是否已配置

安装过程中会自动配置环境变量,安装完成后,在cmd中验证一下,环境变量是否已配置;输入:node -v;跳出nodejs版本号说明没问题

node -v

在这里插入图片描述

第四步:配置npm的全局配置

npm是nodejs的管理工具,后面会用来启动vue项目;需要用管理员身份打开cmd进行配置,敲“npm config set prefix “nodejs安装目录” ”,没有报错说明配置完成

npm config set prefix "你的nodejs的安装目录"

在这里插入图片描述

第五步:设置镜像

设置淘宝的镜像,后面会下载一些vue项目里要用到的插件,使用镜像下载会快很多;同样的,没有报错,说明设置完成

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

在这里插入图片描述

第六步:安装vue-cli

vue-cli是快速搭建vue项目的工具,在cmd(注意也要是管理员身份)中敲:“npm install -g @vue/cli”;这一步一定要保证网络通畅,不然很容易失败;

npm install -g @vue/cli

在这里插入图片描述

第七步:测试是否安装成功

cmd中敲下面的命令,测试是否安装成功

vue --version

在这里插入图片描述

二、搭建vue项目的框架

第一步:创建空文件夹

创建一个文件夹,该文件夹来存放vue项目;我选择在D盘x86下面创建一个空文件夹
在这里插入图片描述

第二步:进入vue图形化界面

在该文件夹下,打开cmd,敲下面的命令,进入到vue的图形化界面;

vue ui

在当前文件夹下打开cmd窗口,有以下两种方式:
(1)按住shift键,在空白处鼠标右键,选择“在此处打开Powershell窗口”;
在这里插入图片描述
(2)在地址栏,敲cmd,再敲回车
在这里插入图片描述

第三步:创建项目

在这里插入图片描述

第四步:设置项目名、npm、不使用git

在这里插入图片描述

第五步:选择预设(手动配置)

在这里插入图片描述

第六步:开启路由功能

在这里插入图片描述

第七步:选择版本和语法检查规范

在这里插入图片描述

第八步:创建项目

因为是测试,选则不保存预设
在这里插入图片描述

第九步:稍等片刻,进入创建成功界面

在这里插入图片描述

创建成功
在这里插入图片描述

第十步:在vscode里面打开刚刚创建的项目

在这里插入图片描述

第十一步:启动

在这里插入图片描述
博主到这一步出了个小插曲,程序突然报错了,之前是没问题的。
在这里插入图片描述

参考了这篇文章(http://t.csdn.cn/4DKgE),将下面的index.html改成index.ejs后重启服务后,成功了
在这里插入图片描述
在这里插入图片描述

打开浏览器,输入http://localhost:8080/#/,或者在vscode控制器里跳转
在这里插入图片描述

更改端口

8080端口,tomcat也是用这个端口的,不想vue项目占用8080端口,可以在vue.config.js中修改
在这里插入图片描述

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

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

相关文章

ssh无密码链接

ssh的基本语法为 ssh host 然后输入密码才可以 如果a想要免密登录b,则a需要将自己的公钥放在b上,原理如下图: 例如,以aricoder这个用户登录的情况下,在服务器01上生成密钥,命令为 ssh-keygen -t rsa然后连…

前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,Webpack 汇总篇)-- 持续更新

前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 前端面试题汇总二 五、Vue 篇1. 谈谈你对MVVM开发模式的理解?2. v-if 和 v-show 有什么区别?3. r o u t e 和 route和 route和router区别4.vue自定义…

千万级oracle数据表定时同步到mysql表的方案

1:业务背景 第三方系统提供了一张oracle视图,该视图有六千多万条数据,后续每月会产生三百万条数据的数据。需要每天将数据定时同步到自己系统的mysql表中。 (注:我们系统与外界系统访问都要经过一个中间系统的跳转才…

看我0~1精通自动化测试实战,暴涨18K...

前言 开头,先说一下现主流的接口自动化测试框架配套,也是很多企业在使用的。 接口自动化测试:PythonrequestspytestyamlalluerJenkins; Python自动化测试:7天练完这60个实战项目,年薪过35w。 除开测试脚本…

基于秒杀-----分布式锁----lua脚本

基于商品显示秒杀-一人一单业务_xzm_的博客-CSDN博客改进 分布式锁:满足分布式系统或集群模式下多进程可见并且互斥的锁 分布式锁的五个基本要求:多进程可见,互斥,高可用,高性能,安全性 三种实现方式 redi…

《斯坦福数据挖掘教程·第三版》读书笔记(英文版) Chapter 9 Recommendation Systems

来源:《斯坦福数据挖掘教程第三版》对应的公开英文书和PPT Chapter 9 Recommendation SystemsRecommendation systems use a number of different technologies. We can classify these systems into two broad groups. Content-based systems examine properties…

STL 函数对象,即仿函数

目录 1.函数对象 1.1函数对象的概念 1.2函数对象的使用 2.谓词 2.1谓词概念 2.2一元谓词 2.3二元谓词 3.内建函数对象 3.1内建函数对象的意义 3.2算术仿函数 3.3关系仿函数 3.4逻辑仿函数 1.函数对象 1.1函数对象的概念 1.2函数对象的使用 #include<iostream>…

文心一言 VS 讯飞星火 VS chatgpt (25)-- 算法导论4.2 7题

七、设计算法&#xff0c;仅使用三次实数乘法即可完成复数 abi和cdi 相乘。算法需接收a、b、c和d 为输入&#xff0c;分别生成实部 ac-bd 和虚部adbc。 文心一言&#xff1a; 可以使用如下算法来计算复数 abi 和 cdi 的积&#xff0c;且只需进行三次实数乘法&#xff1a; 1.…

Slower使用教程完整版本【2023年更新】

Slower软件的版本&#xff0c;目前市面上有多种。 如果你指的是Slower器加速软件的话&#xff0c;可以看下面的教程&#xff1a; Slower是一款很不错的安全国际互联网工具&#xff0c;广泛用于外贸与留学生行业&#xff0c;设计师行业与科研行业。但是&#xff0c;因为使用过…

注意:腾讯云轻量应用服务器十大限制说明

腾讯云轻量应用服务器相对于云服务器CVM是有一些限制的&#xff0c;比如轻量服务器不支持更换内网IP地址&#xff0c;不支持自定义私有网络VPC&#xff0c;内网连通性方面也有限制&#xff0c;轻量不支持CPU内存、带宽或系统盘单独升级&#xff0c;只能整个套餐整体升级&#x…

IO系统(计算机组成原理)

IO系统这一章主要讲的就是IO的四种控制方式&#xff0c;首先对这四种方式进行一个简单介绍&#xff0c;下面再对着四种方式分别进行介绍。 程序查询方式&#xff1a;由cpu通过程序不断查询IO设备是否已经做好准备&#xff0c;从而控制IO设备于主机进行信息交换 程序中断方式&am…

python自动化测试面试题,25K入职字节测试岗

问&#xff1a; http 和 https的区别   答&#xff1a; https需要申请ssl证书&#xff0c;https是超文本传输协议&#xff0c;信息是明文传输&#xff0c;https则是具有安全性的ssl加密传输协议http和https使用的是不同的链接方式&#xff0c;用的端口也不一样&#xff0c;前…

《深入理解计算机系统》读书笔记1

1.1信息就是位上下文 只由ASCLL字符构成的文件称为文本文件&#xff0c;所有其他文件都称为二进制文件。 系统中的所有的信息都由一串比特表示。区分不同数据对象的唯一方法是读到这些数据对象时的上下文。 1.2程序被其他程序翻译成不同的格式 预编译&#xff0c;编译&#xf…

【C++】类的访问权限

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01;时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、缘起 2、示例代码 3、总结 1、缘起 在 C 中&#xff0c;类在设计时&#xff0c;可以把 属性 和 行为 放在不同的权限下加以…

智警杯赛前学习1.1---excel基本操作

修改默认设置 步骤一&#xff1a;打开“Excel选项”窗口&#xff0c;打开“文件”菜单&#xff0c;选择“选项”标签 步骤二&#xff1a;在“Excel选项”窗口中&#xff0c;选择“常规与保存”标签&#xff0c;在“常规与保存”标签中&#xff0c;可以修改录入数据时的默认字体…

【群智能算法改进】一种改进的沙丘猫群优化算法 改进沙丘猫群算法 改进SCSO[1]【Matlab代码#34】

文章目录 【获取资源请见文章第5节&#xff1a;资源获取】1. 原始沙丘猫群优化算法2. 改进沙丘猫群算法2.1 Logistic混沌映射种群初始化2.2 透镜成像折射反向学习策略2.3 动态因子2.4 黄金正弦策略 3. 部分代码展示4. 仿真结果展示5. 资源获取 【获取资源请见文章第5节&#xf…

国际标准 ISO 11898 解读

从 1993 第一个版 CAN 国际标准&#xff08;ISO 11898:1993 和 ISO 11519-2&#xff09;发布至今&#xff0c;ISO 11898 逐渐被分割整合成了相互独立的 6 个部分。分别以 Part 1 ~ Part 6 来标识。在旧版本&#xff08;2003年之前&#xff09;中 ISO 11898 是通信速度为 5kbps…

二维笛卡尔坐标系下的角的概念

文章目录 参考环境笛卡尔坐标系二维笛卡尔坐标系三维笛卡尔坐标系 任意角角的静态定义角的动态定义二维笛卡尔坐标系下角的概念方向正角、负角及零角 象限角象限象限角 终边相同角圆心角终边相同角 参考 项目描述搜索引擎Google 、Bing百度百科首页韩庆波正负角佟大大还是ETT【…

前端学习---Vue(6)路由

一、前端路由的概念和原理 Hash地址与组件的对应关系。 Hash:url中#之后的都是Hash地址 location.hash 1.1 前端路由的工作方式 ① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 Hash 值发生了变化 ③ 前端路由监听了到 Hash 地址的变化 ④ 前端路由把当前 Hash…

doris分区、join

动态分区和临时分区 动态分区 旨在对表级别的分区实现生命周期管理(TTL)&#xff0c;减少用户的使用负担。 目前实现了动态添加分区及动态删除分区的功能。只支持 Range 分区。原理 在某些使用场景下&#xff0c;用户会将表按照天进行分区划分&#xff0c;每天定时执行例行任…