一：使用webstorm创建vue项目

参考：手把手一步步使用webStrom创建vue项目

二：build项目生成dist文件

执行npm run dev 后打开链接可看到界面说明项目初始化正常，

然后编辑build命令

点击绿色三角形运行执行npm run build，生成dist目录及相关文件：

生成的结构如下：

然后用浏览器打开dist 文件夹中的index.html文件验证build是否正常，如果空白说明失败：

解决方法：

打开config/index.js文件，将build标签下的将 assetsPublicPath: ‘/’ 修改为 assetsPublicPath: ‘./’ 即添加一个点，如下：

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

正常后的界面应该和npm run dev运行的界面相同。

三：使用hbuilder构建APP

Hbuilder官网地址

注意：推荐下载使用红色图标的Hbuilder，我是在360软件管家里面下载的

版本号：
VERSION 9.0.4
BUILD .201805232049

导入刚才生成的dist文件夹，此时会看到HBuilder项目下多了一个W标识（表示web项目）的项目，

右键菜单选择‘转换成移动‘转换成移动App’，然后‘myApp’前面的标识就变成了‘A’,至此就已经转换成移动app了，

生成app，文件夹会多一个manifest.json文件，

随后就可以利用HBuilder连接真机运行或者发行成为原生app。