建立Vue x Amplify的專案

• 安裝Vue-CLI
• 安裝Amplify-CLI

僅供參考

在安裝Amplify-cli時，需要設定後續操作amplify-cli的IAM user

CLI會問你“`? Profile Name:“`，我是輸入**amplify**可參考命名設定檔

初始化專案

$ vue create amplify-vue-project
$ cd amplify-vue-project
$ amplify init # 初始化amplify，幾乎都選預設值，environment輸入dev

到這邊其實就完成了，接下來非常建議要先看看Typical workflows知道用amplify pull/push管理雲上的資源

如果是團隊開發，記得要看看Team environments下每一篇才能在這個專案在各個環境切來切去的時候比較有頭緒

如果在同個專案、多aws帳號各自建立環境時，遇到從dev分支merge到production分支後，出現衝突的狀況…
可以來參考看看這篇

加上 AppSync GraphQL API

照著Create a GraphQL API做吧

更新GraphQL

你可以透過更新 project folder 下的“`backend/api/~apiname~/schema.graphql“`更新GraphQL API
雖然還有其他方式，但在這邊做的好處是，CLI會一併幫你處理一些事情：

• 加上“`@model“`會幫你開 dynamodb
• 加上“`@key“`幫你定義 dynamodb table 的 primary key，或者LSI以及GSI
• 加上“`@auth“`替你在根據這份檔案產生出來的 mutation, query 及 resolver 內加上權限控管

其他方式？有哪些？

也可以直接到 AppSync控制台 開一個 sample api，sample api 好像會用 cloudformation 一併幫你開好 dynamodb table。

也可以先手動開好 dynamodb table，再去 AppSync控制台 開一個空白api，到**DataSource**分頁使用『建立資料來源』，裡面便可以直接把 dynamodb table 匯入成 graphql api，也會一併產生 resolver，但整體上來說還是沒有用 Amplify CLI 產生來的便利

想要過濾Subscription

可以參考Filter Subscriptions by model fields and/or relations而且要額外補充Using Subscription Arguments，其中的 **Argument null value has meaning** 章節很重要又很有趣

想要自訂resolver

參考Add a custom resolver that targets a DynamoDB table from @model吧

用不到後端資源了，想刪掉？

如果你使用過 Terraform…
要小心使用 amplify delete 指令，它的刪除跟 terraform 不一樣！

well
你可以執行“`amplify delete“`
但它的問題是，它不僅會把(目前env下)已經佈置上雲的後端資源收掉，還會把專案資料夾下所有後端資源的設定刪光光