app vue 真机运行_使用vue.js制作一个手机项目

本文档主要介绍使用vue.js的制作App应用，调用手机分享，在HBuilder下运行调试打包

1.使用代码生成一个vue.js的web空项目

(1)使用代码生成一个vue.js的项目   vue init webpack vueAppDemo

执行以下命令运行项目

cd vueAppDemo

npm install

npm run dev

2.使用H5+调用手机分享

(1).使用HBuilder打开项目，进入src-->components-->HelloWorld.vue

编码：

3.将项目转化成app项目

(1).将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './'

(2).在终端中运行 npm run build

(3).运行成功后在HBuilder 项目管理器中，查看项目目录，会多一个dist的文件夹

(4).在HBuilder工具栏中，选择文件->打开目录   选择dist的路径，并且给项目名称命名

(5).右键选择新生成的项目，将web项目转化成app项目

(6).转化之后可以看到项目图标及目录结构发生变化

转化前

转化后

(7).新增的manifest.json文件为app项目的配置文件

在manifest.json文件中配置分享设置

进入sdk配置模块，勾选需要的分享对象，填写申请到的ID和秘钥

4.在手机上运行调试

(1).使用数据线连接手机

(2).在HBuilder的工具栏中选择运行-->真机运行-->HBuilder基座运行

(3).选择需要运行的项目

(4).运行成功后，控制台输出

5.手机运行

手机点击运行HBuilder基座

点击分享按钮

分享调用成功

先写到这里，之后再逐步补充