vue项目工程化创建

总说

过程参考黑马程序员SpringBoot3+Vue3全套视频教程，springboot+vue企业级全栈开发从基础、实战到面试一套通关_哔哩哔哩_bilibili

目录

总说

一、环境准备

1.1 node.js安装

1.1.1 设置 npm 的全局安装路径

1.1.2 更换安装包的源

二、vue项目创建和启动

2.1 项目创建

2.2 项目启动

2.2.1 命令行启动

---

一、环境准备

1.1 node.js安装

直接去node.js官网Node.js — Download Node.js®安装即可

版本在16版本之后都行，我是20版本的，之前下载的

1.1.1 设置 npm 的全局安装路径

以管理员身份运行命令行，输入以下指令：

npm config set prefix "D:\tool\node_js"

引号中的路径是你安装的目录

1.1.2 更换安装包的源

更换安装包的源，换成国内的源，输入指令如下：

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

都不报错就代表成功了，再输入代码检查一下：

npm config get registry

二、vue项目创建和启动

2.1 项目创建

我们来到想要创建项目的目录，之后创建的项目就会在这个目录下

以管理员身份启动命令行

通过盘号: 来切换盘

通过cd 文件夹名 来进入目录，注意有个空格

找到我们想要创建项目的目录

输入指令：

npm init vue@latest

然后除了第一个项目名称命名自己起

其余全部回车采用默认值

然后依次执行绿色的前两个命令来下载依赖

然后输入code . 通过vscode打开当前目录

2.2 项目启动

2.2.1 命令行启动

在项目目录下打开命令行

执行命令：

npm run dev

就能启动项目了

然后到浏览器中，输入地址：localhost:5173

能正常展示出页面，成功

当我们想要关掉项目时，回到命令行按ctrl + c 即可强制停止项目

2.2.2 vscode启动

来到vscode，找到