vue-cli或vue项目利用HBuilder打包成移动端app操作

下面就详细讲解一下如何将vue-cli或vue项目通过HBuilder打包成移动端app的操作攻略。

1. 安装HBuilder

首先，我们需要下载并安装HBuilder。HBuilder是一个支持多平台的HTML5开发工具，内置了多款开发框架和常用的UI组件，支持打包成Android和iOS原生应用。

你可以在DCloud官网上下载HBuilder：https://www.dcloud.io/hbuilderx.html

2. 新建项目并配置

在HBuilder中新建一个项目，然后在项目目录下打开终端执行以下命令安装Vue.js框架：

npm install vue --save

安装成功之后，我们需要在项目的根目录创建一个src文件夹，并在其中创建一个main.js文件，这个文件是Vue.js项目的入口文件。在main.js文件中引入Vue.js，并进行简单的配置：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

接下来，我们需要创建一个package.json文件来管理项目的依赖。

npm init -y

然后安装Vue.js的构建工具Vue-cli

npm install -g vue-cli

最后，我们通过Vue-cli来快速创建一个Vue.js项目：

vue init webpack my-project

其中，my-project是我们新建的项目名称。

3. 打包

完成项目配置后，我们就可以用HBuilder将项目打包成移动端应用了。

首先，我们需要将Vue.js项目中的dist目录复制到HBuilder的项目目录根目录下。

然后，在HBuilder的菜单栏中选择发行 -> 在线安装证书，安装开发者证书。

接下来，在菜单栏中选择发行 -> 云端打包。

在打包设置中，你需要指定打包的应用名称、应用图标、版本号等信息。另外，你还需要选择打包目标平台（Android或iOS）以及其他相关的设置。

等待打包完成后，你就可以将生成的安装包安装到你的移动设备上进行测试了。

示例说明

示例一：Vue-cli打包

在命令行中执行以下命令：

vue init webpack my-project
npm install
npm run build

等到项目打包完成后，将dist文件夹复制到HBuilder的项目目录根目录下，进行打包操作。

示例二：Vue项目打包

假设我们有一个基于Vue.js的项目，先执行以下命令将项目打包：

npm install
npm run build

然后将dist目录复制到HBuilder的项目目录根目录下，交接给HBuilder即可进行打包操作。

以上就是利用HBuilder将Vue.js或Vue-cli项目打包成移动端app的完整攻略。