HbuilderX如何创建并运行Vue项目

最新推荐文章于 2024-10-11 15:30:04 发布
最新推荐文章于 2024-10-11 15:30:04 发布
阅读量2.9w 收藏 87
点赞数 13
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46017976/article/details/111475206
版权

在Hbuilder中开发Vue项目是非常快捷的，下面小编给大家分享一下如何在Hbuilder中创建并运行Vue项目。

流程

1、首先打开Hbuilder创建一个新项目，如下图所示

在这里插入图片描述

2、接着模板选择Vue项目，如下图所示

在这里插入图片描述

3、然后等待一会项目就创建好了，如下图所示

在这里插入图片描述

4、接着右键单击选择npm run build，如下图所示

在这里插入图片描述

5、然后继续右键单击选择npm run serve，如下图所示

在这里插入图片描述

6、接着找底部终端出现的地址和端口号，如下图所示

在这里插入图片描述

7、最后在浏览器中输入即可访问vue页面了，如下图所示

在这里插入图片描述

8、总结：

  1. 打开Hbuilder创建一个新项目
  2. 模板选择Vue项目
  3. 等待一会项目就创建好了
  4. 右键单击选择npm run build
  5. 继续右键单击选择npm run serve
  6. 找底部出现的地址和端口号
  7. 在浏览器中输入即可访问vue页面了

有其他交流的想法，可以加我创建的Q群：820080257

Lewis-q398529803
关注
使用HBuilderX如何创建一个vue项目？
weixin_48596030的博客
08-02 3780
使用HBuilderX如何创建一个vue项目？
Vue学习——使用Hbuilder创建并运行Vue项目
weixin_59733106的博客
09-05 977
由于各种原因（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 921
下载好Node之后，把项目导入到Hbuilder里面，我们之前在node的DOS，应该配置好npm了。大概的框架是这样的。然后右键你的项目》》》》在外部资源器中打开。文件》》》导入》》》进到你的项目目录里面就可以。弹出文件夹之后，在目录那里输入cmd。弹出这样的页面就OK。
HBuilder X中搭建vue-cli项目（一）
分享我的点点滴滴，在成长路上与你同行！
09-27 1067
HBuilder X中搭建vue-cli项目（一）
使用HBuilderX快速搭建一个vue-cli项目
m0_69038398的博客
07-29 5292
右键点击components->新建->vue文件同理，创建Main组件。
猿创征文｜如何在HbuilderX中运行Vue
热门推荐
絔宝的博客
08-30 2万+
如何在HbuilderX中运行Vue，创建Vue项目，运行vue项目
使用HbuilderX快速搭建vue-cil项目
2301_77681226的博客
06-28 2266
App.vue文件。
HBuilder X中配置vue-cli项目和UI库
qq_64782704的博客
07-26 1273
我们一般在网上下载的前端项目是没有node_modules文件夹的,因为这里面包含的是项目所依赖的外部组件文件,并且该文件夹占用的空间较大,我们可以通过node.js中的命令(类似于maven中的pom.xml文件)来从远程仓库中自己下载,所以不需要别人打包发过来,这样既省空间,又节约时间,该命令是。一个项目中有很多HTML文件,一个HTML文件表示一个网页,他们之间彼此独立,互相没有联系,我们每次导入其它前端文件时,需要给每一个HTML文件都导入,需要导入的文件一旦过多,就会很麻烦,并且整体看来很乱。
接上一篇-下载好的vue框架如何在HbuilderX中使用
m0_62541300的博客
07-08 418
2.鼠标右击hellovue文件夹在外部命令里面点击以下步骤。3.外部终端命令会弹出访问地址 复制地址 用浏览器访问。1.把创建好的hellovue拖入。
使用HBuilderX软件快速搭建Vue项目
yzl1293346757的博客
10-07 1万+
快速搭建Vue框架的方法
通过Hbuilder X创建uni-app项目并引入UView
08-18
本篇将详细介绍如何通过Hbuilder X来创建uni-app项目，并将其与UView集成。 首先，我们需要安装Hbuilder X，这是一个强大的多端开发工具，集成了代码编辑、预览、打包等功能。下载并安装完成后，打开Hbuilder X，...
HBuilderX打包H5、vue项目
bestyinjun的专栏
12-19 1778
HBuilderX打包H5、vue项目
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6951
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
HBuilder X中搭建Vue-cli项目组件和路由以及UI库使用（二）
最新发布
分享我的点点滴滴，在成长路上与你同行！
10-11 960
HBuilder X中搭建vue-cli项目组件和路由以及UI库使用（二）
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 这个状态是刚刚开始，不要...
Vue学习之使用HBuilderX创建并使用vue3.0项目
qq_38527427的博客
02-01 5699
本文简述HBuilderX中如何使用vue3.0项目
如何用HbuilderX开发vue项目
Lucky铂爵
05-15 6822
一、安装node(省略) 2、Hbuilder新建vue项目 进入项目所在文件夹，安装vue项目所需要的依赖包 运行：npm run dev或者cnpm run dev将项目跑起来，发现报错，这是因为在package.json中丢失了dev。这个时候只需通过"vue init webpack -g" 把丢失的dev下载过来，若遇下载缓慢，则执行cpnm install --save-dev webpack 三、vue项目目录 1、build：构建脚本目录 1）build.js ==> 生产环境构
Hbuiderx如何运行vue项目
qq_39882919的博客
04-21 8621
Hbuiderx如何运行vue项目 在hubuiderx中按住alt+c安装插件 运行命令 npm run dev就行了 加粗样式
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 ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值