VUE模板開發
項目目錄結構
|—— build
│ ├── common // JS API公共文件目錄
├── /html/ // html文件
├── /js/ // JS API腳本文件
├── /css/ // 公共組件庫樣式文件
├── /assets/ // 資源目錄
├── /images/ // 公共圖片資源
├── /media/ // 公共媒體資源
│ └── apps // 開發的We碼應用包文件目錄
├── /local/ // 應用名稱
├── /0/ // 應用的構建環境。打包時，cli 會打包該文件夾下的文件
├── /html/ // 應用的html文件
├── /js/ // 應用的js文件
├── /css/ // 應用的css樣式文件
├── package.json // node相關環境的配置文件
├── public // 靜態資源目錄，內容會直接拷貝到打包目錄中
├── scripts // 編譯相關
├── src // 源代碼目錄
│ ├── common // 公共資源，包括 css/js 等
│ ├── components // 組件
│ ├── config // 配置項，包括 api 等
│ ├── i18n // 國際化
│ ├── en_US // 英文配置信息
│ └── zh_CN // 中文配置信息
│ ├── router // 路由
│ ├── store // store，頁面數據按模塊存儲
│ ├── utils // 提供一些小工具
│ ├── views // 頁面
│ ├── App.vue // 主頁
│ ├── index.html // 主頁 html
│ ├── main.js // webpack打包入口
├── test // jest測試集
└── vue.config.js // vue-cli3.0 配置文件
使用說明
安裝依賴
npm intsall
本地調試
第一步：在終端中執行啓動命令：
npm run start
第二步：等待第一步啓動完之後，在 wecode.json 中配置 serverUrl，再點擊本地調試。
"serverUrl": "http://localhost:8081/apps/local/0/html/index.html"
其中，端口號已實際的爲準。
手機預覽調試
預覽調試之前，需先執行 npm run build，確保 build/apps/local/0 目錄產生編譯文件後，纔可點擊預覽功能。
點擊插件的“預覽”來進行We碼構建，插件會編譯、打包、上傳We碼，並彈出二維碼供手機掃碼查看。
上傳We碼
上傳We碼，之前，也需先執行 npm run build，確保 build/apps/local/0 目錄產生編譯文件後，纔可點擊預覽功能
調試好We碼後，點擊“上傳”上傳We碼，然後在開放平臺頁面進行新版本的審覈提交。
單元測試
npm run test:unit
添加業務功能
項目跑起來了後，可以開始加入我們想要的功能了。
我們來看一下index.html：
<!DOCTYPE html>
<html>
<head>
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<meta charset="utf-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="icon" href="../logo.png">
<link href="../../../../common/css/hwh5.css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
<%= htmlWebpackPlugin.options.vconsole === true ? '<script type="text/javascript" src="../../../../common/js/vconsole.js"></script>' : '' %>
<script type="text/javascript" src="../../../../common/js/hwh5.js"></script>
</body>
<script>
document.body.addEventListener('touchstart', function () {});
console.log(window.hwh5)
</script>
</html>
body內部引入了一些腳本：
vconsole.js - 類似於開發者工具，方便在手機端進行控制檯調試的。
hwh5.js - 提供一些原生能力的api