一、創建項目DD項目（vue.環境配置 ）
vue init webpack dd
注意點：創建項目時注意不要使用ESLint
創建完成使用vscode打開，目錄結構如下圖1，control+shift+y 打開控制台，終端中輸入 npm run dev 啟動項目，結果如下圖2
二、釘釘H5應用
1.根據文檔,安裝 dingtalk-jsapi：
2..根據文檔,對代碼做出如下改動：
在src-components-HelloWorld.vue中
1 <template> 2 <div class="hello"> 3 <h1>{{ msg }}</h1> 4 <h2>Essential Links</h2> 5 <ul> 6 <li> 7 <a 8 href="https://vuejs.org" 9 target="_blank" 10 > 11 Core Docs 12 </a> 13 </li> 14 <li> 15 <a 16 href="https://forum.vuejs.org" 17 target="_blank" 18 > 19 Forum 20 </a> 21 </li> 22 <li> 23 <a 24 href="https://chat.vuejs.org" 25 target="_blank" 26 > 27 Community Chat 28 </a> 29 </li> 30 <li> 31 <a 32 href="https://twitter.com/vuejs" 33 target="_blank" 34 > 35 Twitter 36 </a> 37 </li> 38 <br> 39 <li> 40 <a 41 href="http://vuejs-templates.github.io/webpack/" 42 target="_blank" 43 > 44 Docs for This Template 45 </a> 46 </li> 47 </ul> 48 <h2>Ecosystem</h2> 49 <ul> 50 <li> 51 <a 52 href="http://router.vuejs.org/" 53 target="_blank" 54 > 55 vue-router 56 </a> 57 </li> 58 <li> 59 <a 60 href="http://vuex.vuejs.org/" 61 target="_blank" 62 > 63 vuex 64 </a> 65 </li> 66 <li> 67 <a 68 href="http://vue-loader.vuejs.org/" 69 target="_blank" 70 > 71 vue-loader 72 </a> 73 </li> 74 <li> 75 <a 76 href="https://github.com/vuejs/awesome-vue" 77 target="_blank" 78 > 79 awesome-vue 80 </a> 81 </li> 82 </ul> 83 </div> 84 </template> 85 86 <script> 87 import * as dd from 'dingtalk-jsapi';//引入dingtalk-jsapi 88 export default { 89 name: 'HelloWorld', 90 data () { 91 return { 92 msg: 'Welcome to Your Vue.js App' 93 } 94 }, 95 mounted:function(){ 96 dd.ready(function() { 97 // dd.ready參數為回調函數，在環境准備就緒時觸發，jsapi的調用需要保證在該回調函數觸發后調用，否則無效。 98 dd.runtime.permission.requestAuthCode({ 99 corpId: "dingxxxxxxxxxxxxxxxc288",//修改為自己的corpID 100 onSuccess: function(result) { 101 /*{ 102 code: 'hYLK98jkf0m' //string authCode 103 }*/ 104 }, 105 onFail : function(err) {} 106 107 }); 108 }); 109 dd.error(function(error){ 110 /** 111 { 112 errorMessage:"錯誤信息",// errorMessage 信息會展示出釘釘服務端生成簽名使用的參數，請和您生成簽名的參數作對比，找出錯誤的參數 113 errorCode: "錯誤碼" 114 } 115 **/ 116 alert('dd error: ' + JSON.stringify(error)); 117 }); 118 } 119 } 120 </script> 121 122 <!-- Add "scoped" attribute to limit CSS to this component only --> 123 <style scoped> 124 h1, h2 { 125 font-weight: normal; 126 } 127 ul { 128 list-style-type: none; 129 padding: 0; 130 } 131 li { 132 display: inline-block; 133 margin: 0 10px; 134 } 135 a { 136 color: #42b983; 137 } 138 </style>
3.測試頁面：
頁面還是vue的頁面，但是報錯了，原因是當前不是釘釘環境；
三、配置釘釘H5應用環境
1.創建H5應用
2.配置開發管理
服務器出口IP可以直接寫自己的IP;
應用首頁地址和PC端首頁地址 就是當前應用地址（當前訪問地址為localhost:8080，http://joylixiuming.vaiwan.com/#/ 對localhosthost:8080做了內網穿透，下一節會講到）
3.配置權限管理：保證你有權限開發；
4.配置監控中心：
5.版本管理和發布：發布版本；
6.在微應用調試工具—RC版(windows)中查看：
如果沒有顯示在OA工作台中，嘗試清除緩存，點擊自己的頭像，找到系統設置，清除緩存即可；
7.測試應用：
點擊 當前應用圖標顯示如下。調試 鼠標左鍵，然后F12 就可以調試了
四、應用首頁地址和PC端首頁地址的內網穿透
文檔地址https://developers.dingtalk.com/document/resourcedownload/http-intranet-penetration?pnamespace=app
1.下載工具
1 git clone https://github.com/open-dingtalk/pierced.git
也可以直接瀏覽器下載：https://github.com/open-dingtalk/pierced.git比較快；
目錄結構為：
2.windows cmd 打開 pierced
1 cd windows_64 2 ding -config=ding.cfg -subdomain=abcde 8080
這里的ding.cfg -subdomain=abcde 8080，abcde為自定義的；比如我自定義了joylixiuming
此處http://joylixiuming.vaiwan.com 代理了localhost:8080 的意思，所以http://joylixiuming.vaiwan.com 和localhost:8080效果是一樣的；
3.測試穿透結果
如果頁面顯示 Invalid Host header；需要在 build-webpack.base.conf.js做額外配置；
