hBuilder搭载vue项目

已于 2022-02-25 11:35:28 修改
阅读量1.8k 收藏 3
点赞数
文章标签： javascript vue.js html
于 2021-11-16 17:30:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_47074036/article/details/121360720
版权
本文详细介绍了如何使用hBuilder搭建Vue项目，包括下载安装、创建项目、执行npm run build、处理错误、运行http-server以及本地启动项目。通过图文结合的方式，一步步指导开发者完成Vue项目的构建和运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

hBuilder搭载vue项目

一、先在软件管家下载hBuiler

二、然后创建一个vue项目在这里插入图片描述

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

在这里插入图片描述

五、如果报错 Build complete. The dist directory is ready to be deployed，就运行命令：npm install http-server -g；并且在dist文件下面运行：http-server。如下图：

在这里插入图片描述

六、然后再运行npm run server即可

七、运行自己拉取下来的项目：npm run dev

使用HBuilderX如何创建一个vue项目？
weixin_48596030的博客
08-02 4232
使用HBuilderX如何创建一个vue项目？
HBuilderX 打包 vue 项目生成 apk
GIS（地理信息系统）
07-15 1729
HBuilderX 打包 vue 项目生成 apk
HBuilderX使用html引用Vue入门
weixin_45128867的博客
07-03 4693
前言，历经苦难终于来到了Vue.js，来到大名鼎鼎的前端框架怎么能，不好好学习呢，加油吧 下载:HBuilderX编程工具 官方下载，建议下载12版比较稳定. 好了之后，去下一个node.js. 安装步骤，一直点下一步就行了，然后在cmd以管理员身份运行，输入node -V 有版本号就是正常安装. 安装好了. 回到正题 使用Hbuilderx使用html引用vue 勾选第二个使用html引用vue，这样就创建了一个可以使用vue的html项目，奈何是新手 ┭┮﹏┭┮ ，简单容易理解. 编写第一个
HBuilder导入vue项目并通过域名访问
terry711的专栏
05-05 1万+
HBuilder导入vue，通过npm install安装好以后。再通过npm run dev运行。 默认是当前ip访问，通过修改配置完成域名访问。
hbuilder中使用vue
Winfredzhang的博客
04-19 2791
使用HbuilderX构建vue网页
Hbuilderx引入旧的vue工程，如何折腾
lanfeng330的专栏
02-26 834
工程导入hbuilderx后，进行npm install时出错，删除了node_modules试了几次无解，加入npm install --registry=https://registry.npmmirror.com 还是无解。这应该是个在线安装文件，安装时会联网下载（这种安装方式很容易出问题，网络不好，缺少系统补丁，缺少证书），下个vs2015 和visualcppbuildtools_full.exe搭配安装也不行，估计不匹配。首先发现的错误是，找不到可执行的python2，(主要原因：项目中的。
Vue学习之使用HBuilderX创建并使用vue3.0项目
qq_38527427的博客
02-01 7758
本文简述HBuilderX中如何使用vue3.0项目
使用HbuilderX快速搭建vue-cil项目
2301_77681226的博客
06-28 2848
App.vue文件。
HBuilder X中搭建vue-cli项目（一）
分享我的点点滴滴，在成长路上与你同行！
09-27 1866
HBuilder X中搭建vue-cli项目（一）
使用HBuilderX软件快速搭建Vue项目
热门推荐
yzl1293346757的博客
10-07 1万+
快速搭建Vue框架的方法
购书静态网页设计与实现，原生HTML+CSS+Javascript实现！
04-01
购书+阅读静态网页设计与实现，原生HTML+CSS+Javascript，基本实现网站经典功能：图片轮播切换、点击切换、表单登录验证、用户浏览网站时长计算、鼠标点击提示、加载提示，体验前端开发的过程，小白入门前端开发案例的最佳案例，结合博文https://csdn-czh.blog.csdn.net/article/details/108407720 详细步骤，开箱即用！
【Hbuilder+vue项目学习】新项目初建
IsQiya Bug Worlde
01-01 764
【Hbuilder+vue项目学习】新项目初建
用HBuilder学习vue
weixin_43769531的博客
12-23 905
下载vue.js 官网：https://cn.vuejs.org/v2/guide/installation.html
Hbuilderx使用vue项目和vsn
weixin_43961652的博客
11-19 1262
前置条件：npm、hbuliderx、vsn都已下载好 第一步、新建项目为vue 第二步、视图→显示终端 如果没有终端插件，会提醒你下载，点击下载即可 在终端输入npm run serve运行 点击地址，在外部浏览器打开 第三步、安装SVN插件 第四步、在vue项目文件夹上右键即可使用 ...
怎么用hbuilder跑vue项目_听说vue项目不用build也能用?
weixin_42131790的博客
01-26 1270
。组件代码的结构如下:const template = ` ... `export default { template, data () { }, computed: { }, // etc.}主要的应用程序组件在 index.js 文件中。它的任务是为所有组件分配定制的 HTML 标记，比如 < app-header > 或 < ...
hbuilderx运行vue2项目报错Error: Cannot find module ‘@dcloudio/vue-cli-plugin-hbuilderx‘
weixin_44294359的博客
02-02 1246
hbuilderx运行vue2项目报错Error: Cannot find module '@dcloudio/vue-cli-plugin-hbuilderx'
Hbuiderx如何运行vue项目
qq_39882919的博客
04-21 8708
Hbuiderx如何运行vue项目 在hubuiderx中按住alt+c安装插件 运行命令 npm run dev就行了 加粗样式
接上一篇-下载好的vue框架如何在HbuilderX中使用
m0_62541300的博客
07-08 620
2.鼠标右击hellovue文件夹在外部命令里面点击以下步骤。3.外部终端命令会弹出访问地址 复制地址 用浏览器访问。1.把创建好的hellovue拖入。
微信小程序 uniapp+vue校园活动报名管理系统+django+php
专注分享bishe530的博客
05-17 413
管理员审核学生提交的活动报名信息，管理活动和学生留言，管理学生。学生查看活动，参与活动报名，查看活动报名信息以及活动公告信息。（3）项目初期开发，美工设计，前端实现，开发信息系统的用户功能的实现，完善界面排版，实现信息提取发送等一系列功能。论文写作、修改，定稿。总之，基于微信小程序的学生活动管理系统可以更加方便学生查看活动，参与活动报名，管理员审核活动的报名信息，管理活动基本资料也变得容易。uni-app框架：使用Vue.js开发跨平台应用的前端框架，编写一套代码，可编译到Android、小程序等平台。
hbuilder 大宝vue项目
最新发布
01-08
### 使用 HBuilder 创建 Vue 项目 #### 导航至工作目录并安装工具 为了创建一个新的 Vue 项目，在终端中执行如下命令来切换到目标文件夹： ```bash cd /Users/rnd/Documents/HBuilderProjects ``` 接着，通过 npm 安装全局 `@vue/cli` 工具以获取最新版本的支持[^1]。 ```bash npm install -g @vue/cli ``` 确认当前使用的 npm 版本是否满足需求可以通过下面这条指令完成： ```bash npm -v ``` #### 初始化新的 Vue 应用程序 利用 `vue create` 命令可以快速搭建起一个基于模板的新工程。这里假设要建立名为 "my-vue-app" 的应用，则输入以下语句启动向导流程： ```bash vue create my-vue-app ``` 对于某些环境可能遇到权限不足的情况，此时可以在前面加上 `sudo` 来请求超级用户授权继续操作。 #### 启动开发服务器 一旦项目构建完毕，进入该项目根路径下并通过下列命令开启本地服务端口供调试使用： ```bash npm run serve ``` 这一步骤会自动编译源码并将网页部署于默认浏览器窗口内展示出来。 #### 配置额外依赖项 针对特定功能模块比如路由管理和 HTTP 请求处理库，还需要单独引入相应的包。例如添加 `vue-router` 和 `vue-axios` 可按照官方文档指引进行安装[^2]。 ```javascript import router from './router/index.js' import axios from 'axios' import VueAxios from 'vue-axios' Vue.prototype.$httpApi = axios; Vue.use(VueAxios, axios); ``` 上述代码片段展示了如何将 Axios 整合进 Vue 实例当中以便在整个应用程序范围内访问 API 接口调用方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值