Hbuilder如何创建并运行Vue项目

已于 2022-03-30 16:20:17 修改
阅读量3.9k 收藏 4
点赞数 3
分类专栏： 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前端项目

使用HBuilderX如何创建一个vue项目？
weixin_48596030的博客
08-02 4179
使用HBuilderX如何创建一个vue项目？
使用HBuilderX软件快速搭建Vue项目
yzl1293346757的博客
10-07 1万+
快速搭建Vue框架的方法
使用HBuilderX快速搭建一个vue-cli项目
m0_69038398的博客
07-29 5550
右键点击components->新建->vue文件同理，创建Main组件。
猿创征文｜如何在HbuilderX中运行Vue
絔宝的博客
08-30 2万+
如何在HbuilderX中运行Vue，创建Vue项目，运行vue项目
HBuilderX安装教程（非常详细）从零基础入门到精通，看完这一篇就够了
最新发布
jennycisp的博客
02-14 3805
网络安全产业就像一个江湖，各色人等聚集。相对于欧美国家基础扎实（懂加密、会防护、能挖洞、擅工程）的众多名门正派，我国的人才更多的属于旁门左道（很多白帽子可能会不服气），因此在未来的人才培养和建设上，需要调整结构，鼓励更多的人去做“正向”的、结合“业务”与“数据”、“自动化”的“体系、建设”，才能解人才之渴，真正的为社会全面互联网化提供安全保障。
Vue学习——使用Hbuilder创建并运行Vue项目
weixin_59733106的博客
09-05 2553
由于各种原因（win10\win7等系统版本跑node.js时，由于node.js也有好多版本，所以可能会出现五花八门的问题），下面仅列出我在运行时碰到的问题供参考。：（亲测有效，但可能每次新建一个vue项目都要重复该操作，所以不算完全解决但能解燃眉之急，后期有别的方法会更新）点击运行npm run build和npm run server这两个命令后即可！直接在这个vue项目中的package.json增加配置，把命令（②进入外部命令，点击npm run build。①选择刚刚创建的项目，并点击右键。
【运行VUE项目】利用Hbuilder
weixin_46947972的博客
07-21 1153
下载好Node之后，把项目导入到Hbuilder里面，我们之前在node的DOS，应该配置好npm了。大概的框架是这样的。然后右键你的项目》》》》在外部资源器中打开。文件》》》导入》》》进到你的项目目录里面就可以。弹出文件夹之后，在目录那里输入cmd。弹出这样的页面就OK。
HBuilder启动vue项目
maxiaole_z的博客
03-24 1万+
记录：学习vue 第一次，启动项目（git下载），现在进行到，代码下载完，用HBuilder打开， 第一步：下载、安装node（下载 | Node.js 中文网下载地址：下载 | Node.js 中文网下载 | Node.js 中文网） 安装没有注意，一直下一步 第二步：配置node C:/Program Files/nodejs/npm C:/Program Files/nodejs/node.exe 第三步：运行别人的，先npm install 这个状态是刚刚开始，不要...
使用HbuilderX快速搭建vue-cil项目
2301_77681226的博客
06-28 2814
App.vue文件。
HBuilder X中搭建vue-cli项目（一）
分享我的点点滴滴，在成长路上与你同行！
09-27 1830
HBuilder X中搭建vue-cli项目（一）
hbuilderx怎么运行vue项目文件
07-25
- *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_...
如何用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项目
Lewis的博客
12-21 3万+
在Hbuilder中开发Vue项目是非常快捷的，下面小编给大家分享一下如何在Hbuilder中创建并运行Vue项目。 流程 1、首先打开Hbuilder创建一个新项目，如下图所示 2、接着模板选择Vue项目，如下图所示 3、然后等待一会项目就创建好了，如下图所示 4、接着右键单击选择npm run build，如下图所示 5、然后继续右键单击选择npm run serve，如下图所示 6、接着找底部终端出现的地址和端口号，如下图所示 7、最后在浏览器中输入即可访问vue页面了，如下图所示 .
HBuilder创建vue-cli项目并安装element-plus后测试打包
暂时先用这个名字
08-12 3231
本文学习如何在HBuilder中创建vue-cli项目，且下载安装element-plus组件，随后测试调用是否成功。
HBuilderX学习--运行第一个项目
sunnypaopao的博客
08-23 1万+
HBuilderX学习--运行第一个项目
使用HBuilder X开发Vue3+node+element-plus
故里2130
11-30 1万+
解决办法：所以，我们把里面的东西卸载后，然后重新下载就行了。最后我知道了原因，这里是我电脑全局的错误，现在只要把它单独删除，然后单独安装就行了。开发Vue3有很多的工具，比如VSCode，它也非常的好用，本文主要使用HBuilder X开发。7. 有报错的话，看拓展，没有报错的话，看拓展的第五步即可。2.选择文件，写项目名字和路径，选择3.28版本，进行创建。5.接下来，我们安装element-plus，选择如图所示。打开文件可以仔细找，可以看到顺序，套娃一样，一层套一层。1.打开本项目的路径。
接上一篇-下载好的vue框架如何在HbuilderX中使用
m0_62541300的博客
07-08 600
2.鼠标右击hellovue文件夹在外部命令里面点击以下步骤。3.外部终端命令会弹出访问地址 复制地址 用浏览器访问。1.把创建好的hellovue拖入。
HBuilder X中配置vue-cli项目和UI库
qq_64782704的博客
07-26 1862
我们一般在网上下载的前端项目是没有node_modules文件夹的,因为这里面包含的是项目所依赖的外部组件文件,并且该文件夹占用的空间较大,我们可以通过node.js中的命令(类似于maven中的pom.xml文件)来从远程仓库中自己下载,所以不需要别人打包发过来,这样既省空间,又节约时间,该命令是。一个项目中有很多HTML文件,一个HTML文件表示一个网页,他们之间彼此独立,互相没有联系,我们每次导入其它前端文件时,需要给每一个HTML文件都导入,需要导入的文件一旦过多,就会很麻烦,并且整体看来很乱。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汪程序猿

就当请我吃顿饭

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

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

打赏作者

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

抵扣说明：

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

余额充值