当前位置: 首页 > news >正文

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

相关文章:

  • uniapp swiper设置高度以及切换时滚动条回到顶部,下滑加载
  • 如何解决浏览器兼容问题2.0
  • 搜狐新闻Hybrid AI引擎端侧离线大语言模型探索
  • 数据结构小记【Python/C++版】——散列表篇
  • 《Ubuntu20.04环境下的ROS进阶学习0》
  • ​如何防止网络攻击?
  • Java中 图的基础知识介绍
  • 【 React 】对React中类组件和函数组件的理解?有什么区别?
  • 【Linux】文件系统和软硬链接
  • EPDM和钉钉集成审批工作—移动端直接处理审批节点,高效协同!
  • Java开发从入门到精通(一):Java 数据库编程
  • 小程序学习 1
  • Vue源码系列讲解——内置组件篇【一】(keep-alive)
  • Cassandra 安装部署
  • 【MySQL】not in遇上null的坑
  • 08.Android之View事件问题
  • CentOS7简单部署NFS
  • es的写入过程
  • express.js的介绍及使用
  • Hibernate【inverse和cascade属性】知识要点
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • npx命令介绍
  • PhantomJS 安装
  • 使用Swoole加速Laravel(正式环境中)
  • - 转 Ext2.0 form使用实例
  • ​ubuntu下安装kvm虚拟机
  • ​无人机石油管道巡检方案新亮点:灵活准确又高效
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • # 透过事物看本质的能力怎么培养?
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #【QT 5 调试软件后,发布相关:软件生成exe文件 + 文件打包】
  • #NOIP 2014#Day.2 T3 解方程
  • (02)vite环境变量配置
  • (3)nginx 配置(nginx.conf)
  • (4)事件处理——(7)简单事件(Simple events)
  • (cos^2 X)的定积分,求积分 ∫sin^2(x) dx
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • (八)Flask之app.route装饰器函数的参数
  • (附源码)计算机毕业设计SSM疫情社区管理系统
  • (理论篇)httpmoudle和httphandler一览
  • (四)Linux Shell编程——输入输出重定向
  • (一)SvelteKit教程:hello world
  • (转)德国人的记事本
  • *(长期更新)软考网络工程师学习笔记——Section 22 无线局域网
  • ./indexer: error while loading shared libraries: libmysqlclient.so.18: cannot open shared object fil
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • .NET 应用启用与禁用自动生成绑定重定向 (bindingRedirect),解决不同版本 dll 的依赖问题
  • .netcore 6.0/7.0项目迁移至.netcore 8.0 注意事项
  • .Net小白的大学四年,内含面经
  • @Autowired多个相同类型bean装配问题
  • [ 网络基础篇 ] MAP 迈普交换机常用命令详解
  • [.net]官方水晶报表的使用以演示下载
  • []常用AT命令解释()
  • [2016.7.Test1] T1 三进制异或