在文件夹下快速创建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框架就搭建好啦。

相关推荐
时寒的笔记4 分钟前
逆向入门05_yi恩网
javascript
李松桃4 分钟前
01HTML-CSS-入门知识点
前端·css
广州华水科技5 分钟前
北斗GNSS变形监测系统是什么?主要有哪几种应用?
前端
晴天169 分钟前
【跨桌面应用开发】Neutralinojs快速入门指南
前端·javascript·electron·node.js
爱学习的程序媛44 分钟前
【Web前端】深入解析JavaScript异步编程
开发语言·前端·javascript·ecmascript·web
梧桐1681 小时前
马克沁机枪上阵(二):前线开辟—Claude Code 如何用一天打通前端
前端
是上好佳佳佳呀1 小时前
【前端(一)】HTML 知识梳理:从结构到常用标签
前端·html
楚轩努力变强1 小时前
2026 年前端进阶:端侧大模型 + WebGPU,从零打造高性能 AI 原生前端应用
前端·typescript·大模型·react·webgpu·ai原生·高性能前端
放下华子我只抽RuiKe51 小时前
深度学习 - 01 - NLP自然语言处理基础
前端·人工智能·深度学习·神经网络·自然语言处理·矩阵·easyui
AI服务老曹1 小时前
掌握核心代码:基于 Spring Boot + Vue 的 AI 视频管理平台源码架构与二次开发实战(全开源/低代码/私有化)
vue.js·人工智能·spring boot