開場白

本來說是要上週更新的，然後上週有點事情沒有及時的更新。所以放到這周了，這個課題主要是讓大家瞭解微服務的部分使用，裡面可能有很多細節的東西，看情況講，有的以後會單獨開個分類講。
還有就是我自己也是本著學習的心態弄的，可能會有錯誤的地方，也請大家能夠及時的給我提出，這個專案算是簡單的接觸到微服務，其實裡面在生產中還有很多需要注意的地方，我也在慢慢學習。
不說那麼多了，直接開始上程式碼了。

新建專案

今天主要是專案的初始搭建，基本結構。（我是window系統）

• 前端

  用的Vue + TypeScript + AntDesignVue

1. 下載npm包，去官網下載，直接安裝就可以了。直接百度就可以。安裝完成之後，在本機開啟PowerShell，輸入：npm -v 如果能正確顯示版本說明安裝成功。

2. 安裝Vuecli腳手架，執行指令：npm install -g @vue/cli安裝最新版本的腳手架包。

3. 在對應資料夾下，安裝通過vue建立專案，執行指令：vue create xxx（專案名稱）緊接著會出現選項，我是選擇的如下選項：
   

4. 進入到專案下，我用的vscode，開啟對應專案資料夾。在vscode上新建終端。

5. 執行命令安裝ant-design-vue,執行命令：npm install ant-design-vue --save，等待安裝完成。然後執行指令安裝babel-plugin-import，可以按需引入ant模組樣式，比較方便。
   執行指令：npm install babel-plugin-import --save。

6. 以上都安裝完成之後，因為用的ts模板，所以需要在新的專案中新增幾個檔案：在src資料夾下新增shims-ant-design-vue.d.ts檔案，這個主要是ant-design是中文顯示：
   

更改根目錄下的babel.config.js檔案，新增點程式碼：

module.exports = {                                                           
  presets: [                                                                
    '@vue/cli-plugin-babel/preset',                                           
  ],                                                                          
  plugins: [                                                                  
  [                                                                           
    "import",                                                                 
    { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' }   
  ]                                                                           
]}
 

還有一個檔案尤為重要，要在根目錄下新增vue.config.js檔案(不然的話，antdesign樣式無效)，及配置檔案：

module.exports = {
  chainWebpack: (config) => {
  },
}

7. 以上都完成之後，即可在src的main.ts下進行ant元件的引用和在App.vue下設定ant元件中文顯示配置：
   

8. 最後試著在檔案中新增一個ant元件按鈕，執行指令：npm run serve,訪問localhost:8080，出現按鈕。
   

9. 以後會增加vuex狀態管理，和以及基本結構檔案，以上就是前端專案的簡單搭建。

• 後端

閘道器使用.net core 3.1 webapi建立專案，後臺服務使用.net core 3.1 grpc建立專案，建立專案的時候選擇支援docker(也可以後面配置)。

1. 這裡主要發下專案結構如下：
   

2. grpc服務使用DDD思想編寫，分層（分層也是看部落格園的大牛學的：老張的哲學，感覺蠻不錯的），應用層，領域層，基礎設施層，ui呼叫層。DDD後面會開個單獨的分類。

• 以上就是這個專案的簡單結構，大家可以在自己主機上安裝docker環境或者虛擬機器上安裝都可以。下一篇會講nginx，進行負載均衡，在docker上部署。會順帶說下一些docker的相關指令。

GitHub原始碼地址：https://github.com/woniuSnail/OZTF.Blog.git