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,嘿嘿