一、建立專案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做額外配置；