在文件夹下快速创建vue项目搭建vue框架详细步骤

一、首先在你的电脑目录下新建一个文件夹

进入该文件夹并打开控制台(输入cmd指令)

进入控制台后输入

复制代码
vue create springboot_vue

(自己指定名称)

如果出现这类报错如:npm install 的报错npm ERR! network request to http://registry.cnpmjs.org/vue-cli failed

说明你使用的是老的淘宝镜像:registry.npm.taobao.org 后竟然出现证书过期,网上一搜才知道原来的 registry.npm.taobao.org 已替换为 registry.npmmirror.com 地址了,并且看了很多类似报错发现使用的还是老地址。

这个时候你只要打开控制台输入一下命令配置淘宝最新镜像。

复制代码
npm config set registry https://registry.npmmirror.com

可以使用以下命令来查看当前npm的下载源设置:

复制代码
npm install -g @vue/cli

这个时候只要重新执行第一个指令就可以了。

二、运行成功后进行相关配置

运行成功后将会看到一下界面

我们移动键盘选择 Manually select features(自己配置),然后回车

回车后勾选以上3个选项(空格键勾选),并取消勾选Linter(对语法很严格)这个选项,回车。

回车后选择vue3项目继续回车

输入yes后选择In package.json的打包方式

继续确认并回车

输入名称(自己选择)

回车后执行这两个指令

先执行cd springboot_vue 进入该目录,执行dir可以查看该目录

执行

复制代码
npm run serve

启动vue项目。

三、在浏览器查看该项目能否访问

在浏览器输入

复制代码
http://localhost:8080/

运行成功后可以看到如下界面

这样一个简单的vue框架就搭建好啦。

相关推荐
刃神太酷啦2 分钟前
扒透 STL 底层!map/set 如何封装红黑树?迭代器逻辑 + 键值限制全手撕----《Hello C++ Wrold!》(23)--(C/C++)
java·c语言·javascript·数据结构·c++·算法·leetcode
Slow菜鸟3 分钟前
Codex CLI 教程(五)| Skills 安装指南:面向 Java 全栈工程师打造个人 ECC(V1版)
大数据·前端·人工智能
whinc7 分钟前
Node.js技术周刊 2026年第15周
javascript·node.js
一起养小猫7 分钟前
HTML5+CSS3+JavaScript实现高木同学圣诞树GalGame完整开发指南
javascript·css3·html5·galgame
Lee川10 分钟前
打字机是怎么炼成的:Chat 流式输出深度解析
前端·后端·面试
前端若水14 分钟前
过渡(transition)高级:贝塞尔曲线、硬件加速
前端·css·css3
Lee川16 分钟前
Token 无感刷新与 Logout:前端安全会话管理实战
前端·后端·react.js
不会敲代码119 分钟前
我写了一个 HTML 文件,把 JS 事件循环彻底搞懂了
前端·javascript·面试
写不来代码的草莓熊26 分钟前
SVG 图标插件误读 PNG 图片 + Vite 重启缓存失效重新生成 + 浏览器严格渲染
前端
燐妤32 分钟前
前端HTML编程3:初识CSS
前端·html5