HBuilder启动vue项目

### 使用 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 接口调用方法。