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

0 阅读3分钟

说明:想要搭建一个vue项目的框架,先要安装nodejs环境;我的电脑已经安装过,先卸载掉,重新装一遍

一、安装nodejs环境

第一步:下载

在官网(nodejs.org/en)上下载nodej… 在这里插入图片描述

第二步:安装

双击安装包,安装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里面打开刚刚创建的项目

在这里插入图片描述

第十一步:启动

在这里插入图片描述

博主到这一步出了个小插曲,程序突然报错了,之前是没问题的。

在这里插入图片描述

参考了这篇文章(t.csdn.cn/4DKgE),将下面的…

在这里插入图片描述 在这里插入图片描述

打开浏览器,输入http://localhost:8080/#/,或者在vscode控制器里跳转

在这里插入图片描述

更改端口

8080端口,tomcat也是用这个端口的,不想vue项目占用8080端口,可以在vue.config.js中修改

在这里插入图片描述

首次发布

hezhongying.blog.csdn.net/article/det…