webpack构建h5plus多页面移动app

fast-h5plus

说明

• 使用webpack构建多页面移动APP开发的快速框架
• 使用scss预处理器提升app样式开发效率
• 使用h5plus库调用移动端底层接口
• 使用vue提升开发效率，远离dom操做的繁琐
• 使用移动端布局终极解决方案hotcss让移动端布局开发更加容易
• 框架默认使用750px的设计稿，开发过程当中在样式文件里直接书写像素px单位，webpack编译后会自动转换成对应的rem值
• 支持es6，es7语法，打包编译自动转es5，让你感觉丝滑通常的开发畅快

使用

获取fast-h5plus

git clone git@github.com:CC4J/fast-h5plus.git

安装依赖

npm install

若安装缓慢可切换淘宝源

npm install --registry=https://registry.npm.taobao.org

开发

新建页面

新建一个页面咱们须要作两步操做。

第一步是在 src/pages/ 目录下新建每一个页面的入口js文件以及入口vue文件，如咱们新建一个登录页，咱们须要在src/pages/下新建src/pages/login/login.js与src/pages/login/login.vue。

第二步须要在根目录下的config目录中修改page.config.js文件，如：

exports.pageSet = [
  {title: '登录页', filename: 'login'}
]

页面调试

新建完页面以后，咱们须要在手机或pc浏览器中调试页面，须要进行三步操做。

第一步：修改根目录下的config目录中修改page.config.js文件，如：

exports.devPage = 'login';

在这里你们要注意，调试哪个页面，就须要将devPage的值修改为对应页面的文件名。

第二步：修改src/config/ 目录下的api.js文件，如

var devMode = true;

将devMode的值改成true，做用有两处，一是开发阶段将使用webpack-dev-server的反向代理功能进行跨域请求。二是启动vconsole模块，方便在手机端调试时查看控制台的输出信息。这一步操做在整个开发过程当中只进行一次。

第三步：在命令行运行npm start指令，启动webpack-dev-server服务。控制台会打印当前服务器的ip地址与端口号，咱们只须要在Hbuilder中修改manifest中的入口为此ip地址与端口号则可启动进行真机调试。

注意：每次新建一个页面以后须要先停掉webpack-dev-server服务，按上面步骤操做以后再从新运行npm start命令便可。Hbuilder启动一次以后不须要再从新启动，你甚至能够停掉Hbuilder项目，手机中的调试基座仍会进行自动刷新。

打包

整个开发结束以后，咱们须要对项目进行打包成apk或者ipk。打包以前须要进行如下操做：

第一步：修改src/config/ 目录下的api.js文件，如

var devMode = false;

将devMode的值改成false将关闭页面vconsole控制台，关闭webpack-dev-server反向代理进行跨域功能。

第二步：修改Hbuilder中manifest.json文件的入口，如咱们app的入口页是登录页面，则入口修改成dist/login.html.

第三步：使用Hbuilder打包时须要将除dist之外的文件或目录添加到un'pa'ckage非打包清单中，减小咱们app的体积。

结束

求个star,嘿嘿