Vue.js2.0到APP【HBuilder】

vue.js这里不提怎么安装了,前一篇转载的博客写的非常棒,这里转载整理了如何生成app的博客~

第一次见到装逼到我不得不服的博主,写的很好,语言也十分幽默,有兴趣的可以前去原文观看~


原文链接:http://blog.csdn.net/xh21bao/article/details/70652815 作者:xh21bao


1、找个你喜欢地方,新建一个文件夹(路径别弄中文免除后患)

运行    vue init webpack vue  构建 目录 (蓝色 vue 为目录名称随意)

Vue.js2.0到APP【HBuilder】

按照上图 选择

弄好之后在原来的文件夹 下面 多了一个vue 文件夹 进入

Vue.js2.0到APP【HBuilder】

cd 在当前目录 运行 cnpm install 

Vue.js2.0到APP【HBuilder】

目录变为如下

Vue.js2.0到APP【HBuilder】

运行 查看 npm run dev

Vue.js2.0到APP【HBuilder】

之后 在命令行 Ctrl+c 关闭 这个实例

修改 配置文件 找到config里的index.js,打开修改assetsPublicPath 为“.” 不改 打包后 路径错误

三、打包App 发布到手机

在命令行  执行 npm run build

Vue.js2.0到APP【HBuilder】

新增加了一个 文件夹 dist  进入(编译生成的结果)

Vue.js2.0到APP【HBuilder】


打开HB (启动超级慢 因为 Java产品 所以渣,所以慢)

文件---》新建---》移动App 

Vue.js2.0到APP【HBuilder】

新建好之后 里面应该是这样的

Vue.js2.0到APP【HBuilder】

只留下 mainfest.json 这个是 手机app的 配置文件你可以打开看看

之后把 刚才 dist下面的两个文件复制进来 变成下面的

Vue.js2.0到APP【HBuilder】


把 上次命令 生成 dist 目录下 的文件 复制到 vueapp 项目下如上图!

Vue.js2.0到APP【HBuilder】

一切 都是默认 因为 什么功能也没有!

Vue.js2.0到APP【HBuilder】

Vue.js2.0到APP【HBuilder】



Vue.js2.0到APP【HBuilder】