如何用vue快速開發app的鷹架工具

這篇文章主要介紹了用vue快速開發app的鷹架工具，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

前言

多頁面應用於結構較於簡單的頁面,因為簡答的頁面使用router又過於麻煩.本腳手架出於這樣的場景被開發出來.

使用腳手架搭配Hbuilder也同樣可以快速使用vue開發安卓和IOS APP.

本文最大特點:

1. webpack4

2. #多頁

3. ##跨網域Proxy代理

4. VConsole行動裝置偵錯,手機上的開發者工具

##es6/es7 babel 轉換
#專案位址GitHub

使用手冊
#MogoH5 是vue 多頁面鷹架工具,結合H5 可以快速開發安卓與蘋果APP.

即使不適用Hbuilder 打包成APP,本腳手架同樣可以作為多頁網頁生成的參考項目.

支援Npm 生態
#支援vue 文法,以及vue 生態,例如vux,mint,vant
##支援ES6/ES7 語法
使用VCon​​sole 偵錯
VSCode 友善
#區域網路便捷調試
相容部分mui 語法
這些特性其實不是什麼新鮮特性,只是單獨在Hbuilder 無法使用.

快速上手
#直接下載專案然後根據需求客製化打包,最後透過Hbuilder 雲端打包即可產生APP.

本文自帶一個案例是使用VantUI 開發的幾個介面,如果你喜歡其他UI 同樣可以替換成其他的UI.

// 1.安装模块
npm i // or yarn
// 2.调试
npm start  // 将manifest.json 的`页面入口` 修改成 http://your_ip:8082/
// 3.打包
npm run build

##使用

主要怎麼使用MogoH5 做正式的開發,在開發過程中一定要遵守目錄規則,否則會有意想不到的錯誤.

目錄結構

.
├── docs // 文档
├── index.html // 入口模板
├── jsconfig.json //js配置
├── manifest.json //hbuilder 入口文件
├── src 
│  ├── components //组件文件夹
│  │  └── List.vue //组件
│  ├── index.js //主页入口文件
│  ├── index.vue // 主页vue文件
│  ├── page // 页面
│  └── utils // 工具
├── unpackage // hbuilder 构建目录
│  └── res
└── webpack.config.js //webpack配置目录

新頁面

如果我們要新建一個名稱為list 的頁面作為商品列表,我們就要在./src/page/goods 下新建list.js 和list.vue 兩個檔案. list.js 作為多頁面的入口, list. vue ,腳手架自帶了幾個頁面可供參考.

遵循相對路徑原則,如果在src 訪問這個頁面則就是./goods/list.html !!! 後綴一定是.html

新元件

元件放入./src/components 目錄下,如果元件較多,可自行建立目錄.例如demo 中使用的Logo 元件可以作為參考.

新工具庫

工具庫./​​src/utils 主要放一些公用函數,比如請求,開啟webview,支付,分享等執行函數. demo 中封裝了部分來自mui 的函數例如自訂事件, webview .這些函數可以作為參考.

common.js` 是每個頁面都需要載入的一個js,裡面載入了`fastclick `和`vconsole`.如果全域需要加統計,全域執行的函數,可以放在這個檔案裡面.

`./src/utils` 做了`alias`別名,可以直接這樣載入`import common from "Utils/common"`.

發送請求

#請求庫

demo 的請求使用的是axios ,同樣你喜歡什麼函式庫都可以自己去封裝.

#常見的請求函式庫有fetch , request , SuperAgent , jquery-ajax .

#跨域

由於npm start 後,偵錯網頁是掛在區域網路上,並且作為Hbuilder 的頁面入口,因此,在請求時會出現跨域.

#在./build.js 中使用本地代理,將下面的https://api.douban.com 修改成自己使用的業務網域即可.

proxy: {
  "/api": {
   name:"DOUBANAPI", // 自己取名
   target: "https://api.douban.com",
   pathRewrite: { "^/api": "" },
   changeOrigin: true,
   secure: false
  },
   "/baidu_api": {
   name:"BAIDUAPI", // 自己取名
   target: "https://api.baidu.com",
   pathRewrite: { "^/api": "" },
   changeOrigin: true,
   secure: false
  },
  ...
 }

如果有更多業務網域可以繼續在proxy 新增.

只有開發的時候才會有跨域問題,打包後的文件網址會被替換成被代理的網址,因此發送請求一定要加上名稱DOUBANAPI

request({
 url: DOUBANAPI + "/bookList"
});

#調試

在Hbuilder 中調試會有諸多問題,例如:

不能直接列印數組, 物件,需要轉成字串.

1. 即使使用webview調試,仍然不能打印出數組,在mac 上使用也非常不方便.

2. 使用VCon​​sole ,調試的問題基本上就脫離Hbuilder 了,使用VCon​​sole 主要優點如下

#可以列印數組,物件

1. 可以查看請求,cookie,Localstorage

2. 在System欄位中可以看到頁面載入速度

3. #可以查看元素

4. 
   

   基本上就是一個簡化的開發者工具列,對於偵錯來說非常簡單了.

#打包

npm run build

运行命令后会有一个 dist 目录,里面的经过压缩的静态文件.

Hbuilder 发行打包

在使用 Hbuilder 制作安装包前,请将 入口文件 修改成 dist/index.html . 然后可以安心的打包了.

兼容 mui.js

对于兼容 mui 部分函数的问题,已经在移植部分函数到Utils中,在未来的更新中会慢慢移植.

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

在vscode中vue编码风格统一的方法介绍

以上是如何用vue快速開發app的鷹架工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！