Hbuilder如何创建并运行Vue项目

已于 2022-03-30 16:20:17 修改
阅读量3.1k 收藏 3
点赞数 2
分类专栏： Vue 文章标签： java tomcat spring
于 2022-03-30 16:17:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61504367/article/details/123849103
版权

创建项目

项目名称写firstVue
在这里插入图片描述
这里创建：
在这里插入图片描述
初始化成功
在这里插入图片描述
右键，在外部命令里面执行命令

在这里插入图片描述
安装终端插件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运行

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
成功！！！

如果你想高级点，利用vue脚手架，创建vue前端项目

汪程序猿
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue从小白到高手项目，讯影资讯代码一
01-02
该资源是vue实战专栏专用项目，是vue实战讲解用到的项目代码，包含css、iconfont、图片，项目框架、登录页面、错误提示页面、项目首页文件。 是vue实战第四天所讲内容，项目是帮助学习的同学更好的理解文章中所将内容。 项目名称：讯影资讯管理后台项目 开发工具：HBuilderX 正式版 开发工具下载网址：https://www.dcloud.io Nodejs版本：16.x，因为是VUE2.0，不能安装最新版 Nodejs下载：https://nodejs.org/download/release/v16.19.0/ VUE CLI：2.7.13，详情可查看package.json文件 API地址修改文件：src/request/index.js 路由修改文件:src/router/config.js 注意事项：由于插件包太大，已将node_modules目录下的插件包删除，用户可以使用命令：npm install 下载所需包。 如果npm命令太慢，可以使用国内cnpm，具体安装可查看网址：https://npmmirror.com 本地运行步骤： 1、运行HBuilderX
Java项目:学生管理系统(java+Springboot+Maven+mybatis+Vue+Mysql)
03-19
一、项目简述 本系统功能包括： 学生管理，教师管理，课程管理，成绩管理，系统管理等等。 二、项目运行 环境配置： Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。 项目技术： Springboot + Maven + mybatis+ Vue 等等组成，B/S模式 + Maven管理等等。
HbuilderX如何创建并运行Vue项目
Lewis的博客
12-21 2万+
在Hbuilder中开发Vue项目是非常快捷的，下面小编给大家分享一下如何在Hbuilder中创建并运行Vue项目。 流程 1、首先打开Hbuilder创建一个新项目，如下图所示 2、接着模板选择Vue项目，如下图所示 3、然后等待一会项目就创建好了，如下图所示 4、接着右键单击选择npm run build，如下图所示 5、然后继续右键单击选择npm run serve，如下图所示 6、接着找底部终端出现的地址和端口号，如下图所示 7、最后在浏览器中输入即可访问vue页面了，如下图所示 .
【运行VUE项目】利用Hbuilder
weixin_46947972的博客
07-21 538
下载好Node之后，把项目导入到Hbuilder里面，我们之前在node的DOS，应该配置好npm了。大概的框架是这样的。然后右键你的项目》》》》在外部资源器中打开。文件》》》导入》》》进到你的项目目录里面就可以。弹出文件夹之后，在目录那里输入cmd。弹出这样的页面就OK。
猿创征文｜如何在HbuilderX中运行Vue
絔宝的博客
08-30 2万+
如何在HbuilderX中运行Vue，创建Vue项目，运行vue项目
如何在HBuilder中开发vue3的项目
qq_49668888的博客
06-04 1706
（1）打开电脑的终端，输入 npx degit dcloudio/uni-preset-vue#vite my-vue3-project 来创建工程化项目，成功后（会有一行小蓝字表示成功了）cd到你的项目，然后输入npm install来下包（我之前用的cnpm，有丢包的现象，所以我宁肯慢点也选择npm）最近，在用vue3写小程序的项目时，遇到了各种问题，其中有涉及到项目的创建方式，vue2到vue3切换时的报错，以及是如何解决的 接下来我就详细的概述一下。（2）在过程中可能会遇到的报错。
linux重启mysql
m0_67402236的博客
07-30 2万+
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。1、直接使用“servicemysqldrestart”或“servicemysqlrestart”命令重启；方法一status;...
使用HBuilderX快速搭建一个vue-cli项目
m0_69038398的博客
07-29 3674
右键点击components->新建->vue文件同理，创建Main组件。
使用HBuilder X开发Vue3+node+element-plus
故里2130
11-30 5749
解决办法：所以，我们把里面的东西卸载后，然后重新下载就行了。最后我知道了原因，这里是我电脑全局的错误，现在只要把它单独删除，然后单独安装就行了。开发Vue3有很多的工具，比如VSCode，它也非常的好用，本文主要使用HBuilder X开发。7. 有报错的话，看拓展，没有报错的话，看拓展的第五步即可。2.选择文件，写项目名字和路径，选择3.28版本，进行创建。5.接下来，我们安装element-plus，选择如图所示。打开文件可以仔细找，可以看到顺序，套娃一样，一层套一层。1.打开本项目的路径。
HBuilder导入vue项目并通过域名访问
terry711的专栏
05-05 1万+
HBuilder导入vue，通过npm install安装好以后。再通过npm run dev运行。 默认是当前ip访问，通过修改配置完成域名访问。
使用HBuilderX软件快速搭建Vue项目
yzl1293346757的博客
10-07 1万+
快速搭建Vue框架的方法
vue-cli或vue项目利用HBuilder打包成移动端app操作
10-15
主要介绍了vue-cli或vue项目利用HBuilder打包成移动端app操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
用Vue CLI创建uniapp项目，搭建模板。不仅可以HBuilder打包，也可以npm命令行运行及打包、发布
05-18
已经搭建好，下载即用。 用Vue CLI创建uniapp项目，不仅可以HBuilder打包，也可以npm命令行运行及打包、发布。
uniapp+vue3+unocss示例，解压即用 已经各种配置好了的模板，导入Hbuilder课直接运行
最新发布
02-22
除去的安装配置繁琐操作，直接解压导入HbuilderX就可以用，完全可以直接当初始unocss项目。 vite.config.js、unocss.config.js、main.js已经配置好，其中主题在unocss.config.js可以随意更改成自己喜欢的样式。 项目...
初试vue-cli使用HBuilderx打包app的坑
10-16
主要介绍了初试vue-cli使用HBuilderx打包app的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目打包之后背景样式丢失的解决方案
10-17
今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
Vue学习之使用HBuilderX创建并使用vue3.0项目
qq_38527427的博客
02-01 2009
本文简述HBuilderX中如何使用vue3.0项目
如何用HbuilderX开发vue项目?
热门推荐
qq_41512822的博客
12-30 4万+
一、安装node 1、下载地址为：https://nodejs.org/en/ 2、一路点击Next，检查是否安装成功 　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm...
hbuilderx怎么运行vue项目文件
07-25
要在HbuilderX中运行Vue项目文件，可以按照以下步骤进行操作： 1. 首先，在HbuilderX中创建一个新项目。可以使用菜单栏中的"文件"->"新建"->"项目"来创建一个新的项目。 2. 在创建项目时，选择Vue项目模板。可以根据引用\[1\]中的步骤选择Vue项目模板。 3. 创建项目后，右键单击项目文件夹，在弹出的菜单中选择"npm run build"。这将会编译和构建Vue项目。 4. 编译和构建完成后，再次右键单击项目文件夹，在菜单中选择"npm run serve"。这将会启动一个本地服务器，并在浏览器中打开Vue页面。 5. 在浏览器中输入地址和端口号，即可访问Vue页面。可以根据引用\[1\]中的步骤找到底部出现的地址和端口号。 另外，还需要在项目中配置路由。可以根据引用\[2\]和\[3\]中的代码示例，在相应的文件中配置路由。 总结起来，要在HbuilderX中运行Vue项目文件，需要创建一个新项目，选择Vue项目模板，编译和构建项目，启动本地服务器，并在浏览器中访问Vue页面。同时，还需要在项目中配置路由。 #### 引用[.reference_title] - *1* [Hbuilder如何创建并运行Vue项目](https://blog.csdn.net/lmp5023/article/details/106332912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [使用HBuilderX软件快速搭建Vue项目](https://blog.csdn.net/yzl1293346757/article/details/127193499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪程序猿

就当请我吃顿饭

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值