uni-app的H5版使用注意事项

使用方式

1. 打开uni-app项目下的vue文件
2. 点击菜单 运行->运行到浏览器->Chrome
   
3. 在Chrome內打开调试模式（右键->检查）开启设备模拟，模拟移动设备（如果UI变形刷新即可）
   
4. HBuilderX修改代码后会自动刷新chrome的页面
5. 审查元素
   

   在chrome控制台安装vue devtools后可查看节点关系。
   安装方式自行搜索。
   每个页面都在page节点下，pageHead是微信和app下的原生导航栏，即pages.json里配的导航栏。
   pageBody是导航栏下的页面内容。
   所有标签为了避免和标准H5标签冲突，都加了U前缀。

6. 断点debug
   点chrome控制台的source，可以给js打断点调试。
   找到同名的文件，如果没有同名vue文件，一般会有一个同文件名的js文件，此时会提示检测到sourcemap，是否引入，点允许。然后就会有同名的vue文件。如果找不到，则把焦点放到source的代码区，然后敲ctrl+p打开文件查找窗口，然后敲入vue页面名字，然后打开vue页面。
   这个vue里，只有js，没有tag和css，但可以打断点调试。
   
   
   
   

发布方式

1. 配置发行后的路径（发行在网站根目录可不配置），比如发行网站路径是www.xxx.com/html5，在manifest.json可视化界面 - H5配置 - 运行的基础路径中设置，也可以在源码视图内编辑h5节点，router下增加base属性为html5。
   可视化界面设置：
   

   源码视图设置：

   
2. 点击菜单 发行->H5
3. 在当下项目下的unpackage/dist/build/h5目录找到出的资源，部署服务器（或者使用本地服务器预览，不要直接在浏览器打开html文件）。如果发布使用的history模式，需要服务端配合，参考：后端配置方式