{"id":48325,"date":"2024-01-10T18:22:26","date_gmt":"2023-06-10T23:16:57","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8-vue-js-%e5%92%8c-typescript-%e6%9d%a5%e6%90%ad%e5%bb%ba-amplify-%e7%9a%84%e8%bf%9c%e7%a8%8b%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/"},"modified":"2024-05-04T17:44:39","modified_gmt":"2024-05-04T09:44:39","slug":"%e4%bd%bf%e7%94%a8-vue-js-%e5%92%8c-typescript-%e6%9d%a5%e6%90%ad%e5%bb%ba-amplify-%e7%9a%84%e8%bf%9c%e7%a8%8b%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8-vue-js-%e5%92%8c-typescript-%e6%9d%a5%e6%90%ad%e5%bb%ba-amplify-%e7%9a%84%e8%bf%9c%e7%a8%8b%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e3%80%82\/","title":{"rendered":"\u4f7f\u7528 Vue.js \u548c TypeScript \u6765\u642d\u5efa Amplify \u7684\u8fdc\u7a0b\u5f00\u53d1\u73af\u5883"},"content":{"rendered":"

\u7b80\u5316\u3002<\/h1>\n
\"\"<\/div>\n

\u9996\u5148<\/h2>\n

\u203b\u6211\u5c062022\u5e743\u6708\u7684\u6587\u7ae0\u66f4\u65b0\u81f32022\u5e7411\u6708\u3002\uff08\u671f\u95f4\u6709\u76f8\u5f53\u6fc0\u70c8\u7684\u66f4\u65b0\u3002\uff09
\n\u6211\u5728JAWS-UG\u6d5c\u677e\u8fdb\u884c\u6d3b\u52a8\u3002\u6211\u4eec\u4e5f\u6709\u5728\u7ebf\u5b66\u4e60\u4f1a\u8bae\uff0c\u6b22\u8fce\u53c2\u52a0\u3002\u8c22\u8c22\u3002<\/p>\n

\u4f7f\u7528Amplify\uff0c\u6211\u4eec\u8fdb\u884c\u4e86\u4e00\u7cfb\u5217\u7684\u6559\u7a0b\u3002\u63a5\u4e0b\u6765\uff0c\u5f53\u6211\u4eec\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e9b\u4e1c\u897f\u65f6\uff0c\u6211\u4eec\u88ab\u4e0d\u65ad\u6709\u65b0\u7248\u672c\u66f4\u65b0\u7684\u5e93\u548c\u5927\u91cf\u7684Amplify\u8fd9\u4e2a\u8bcd\u6240\u56f0\u6270\u3002\u6b64\u5916\uff0c\u6a21\u62df\u529f\u80fd\u4e5f\u8868\u73b0\u4e0d\u7a33\u5b9a\uff0cAmplify push\u4e5f\u5931\u8d25\u4e86\uff0c\u5bfc\u81f4\u6211\u56db\u5904\u78b0\u58c1\uff0c\u6700\u7ec8\u4e0d\u5f97\u4e0d\u91cd\u65b0\u6784\u5efa\u5f00\u53d1\u73af\u5883\u3002\u5728Vue\u7684\u5f00\u53d1\u4e2d\uff0c\u4e5f\u9700\u8981\u5171\u4eab\u73af\u5883\u8bbe\u7f6e\uff08\u5982node.js\u548cVue\uff09\u6765\u9002\u5e94\u4e0d\u540c\u7684\u7248\u672c\u8981\u6c42\u3002<\/p>\n

\u73af\u5883\u6837\u4f8b<\/h2>\n

\u6587\u4ef6\u7ed3\u6784<\/p>\n

amplify-vuejs-docker\r\n\u251c\u2500\u2500 .devcontainer\/\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 devcontainer.json\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 docker-compose.yml\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 web\/\r\n\u2502\u00a0\u00a0\t  \u2514\u2500\u2500 Dockerfile\r\n\u2514\u2500\u2500 server\/\r\n<\/code><\/pre>\n
1. docker-compose.yml<\/h3>\n
1. Docker-compose.yml\u6587\u4ef6<\/p>\n
\u7531\u4e8e\u4f7f\u7528vuetify+vite\u6846\u67b6\uff0c\u5728\u8fd9\u6b21\u60c5\u51b5\u4e0b\u8fdb\u884c\u4e86\u7aef\u53e33000\u7684\u5f00\u653e\u3002\u800c\u7aef\u53e320002\u662f\u7528\u4e8e\u6a21\u62df\u7684\u3002
\n\u5728Windows\u73af\u5883\u4e0b\uff0c\u65e0\u9700\u8fdb\u884c\u6b64\u8bbe\u7f6e\u4e5f\u53ef\u4ee5\u4f7f\u7528\u3002<\/p>\n
version<\/span>:<\/span> '<\/span>3.8'<\/span>\r\n\r\nservices<\/span>:<\/span>\r\n  amplify<\/span>:<\/span>\r\n    build<\/span>:<\/span> .\/web<\/span>\r\n    ports<\/span>:<\/span>\r\n      # yarn dev<\/span>\r\n      -<\/span> 3000:3000<\/span>\r\n      # mock api<\/span>\r\n      -<\/span> 20002:20002<\/span>\r\n    stdin_open<\/span>:<\/span> true<\/span>\r\n    working_dir<\/span>:<\/span> '<\/span>\/app'<\/span>\r\n    volumes<\/span>:<\/span>\r\n      -<\/span> ..\/server:\/app<\/span>\r\n      # credential,config\u3092\u4fdd\u7ba1\u3057\u305f\u3044\u4eba\u5411\u3051<\/span>\r\n      # - ..\/dev\/aws\/:\/root\/.aws\/<\/span>\r\n    tty<\/span>:<\/span> true<\/span>\r\n<\/code><\/pre>\n
2. Dockerfile
\n2. Docker \u914d\u7f6e\u6587\u4ef6<\/h3>\n
\u4e3a\u4e86\u4f7f\u7528Amplify Mocking\uff08\u672c\u5730\u6a21\u62df\uff09\uff0c\u5b89\u88c5Java\u3002
\n\u5c1d\u8bd5\u4f7f\u7528Amazon Corretto\u3002
\n\u6211\u4eec\u4f7f\u7528\u6700\u65b0\u7a33\u5b9a\u7248\u672c\u7684Docker\u6765\u8fd0\u884cNode\u3002
\n\u91cd\u8981\u7684\u662f\u8981\u8fdb\u884c\u7248\u672c\u6307\u5b9a\u3002<\/p>\n
FROM<\/span> node:18.12.1<\/span>\r\n# java for Amplify Mock<\/span>\r\nRUN <\/span>apt update;<\/span> apt install<\/span> -y<\/span> wget software-properties-common apt-transport-https\r\nRUN <\/span>wget -O-<\/span> https:\/\/apt.corretto.aws\/corretto.key | apt-key add - \r\nRUN <\/span>add-apt-repository 'deb https:\/\/apt.corretto.aws stable main'<\/span>\r\nRUN <\/span>apt update;<\/span> apt-get install<\/span> -y<\/span> java-18-amazon-corretto-jdk\r\n# git-flow<\/span>\r\nRUN <\/span>apt install <\/span>git-flow\r\n# amplify<\/span>\r\nRUN <\/span>yarn global add @aws-amplify\/cli@10.5.1\r\n<\/code><\/pre>\n
3. \u5f00\u53d1\u5bb9\u5668\u7684\u914d\u7f6e\u6587\u4ef6 devcontainer.json<\/h3>\n
\u6211\u8981\u5206\u4eabVSCode\u7684\u8bbe\u7f6e\u3002
\n\u5982\u679c\u4f7f\u7528Vue 3.x\uff0c\u5c31\u8981\u4f7f\u7528volar\u63d2\u4ef6\u3002 (misterj.vue-volar-\u6269\u5c55\u5305)
\n\u6211\u8fd8\u4f1a\u6dfb\u52a0\u8981\u5171\u4eab\u7684\u73af\u5883\u4fe1\u606f\u7b49\u3002<\/p>\n
{<\/span>\r\n  \"name\"<\/span>:<\/span> \"Amplify Vue3\"<\/span>,<\/span>\r\n  \"dockerComposeFile\"<\/span>:<\/span> \"docker-compose.yml\"<\/span>,<\/span>\r\n  \"service\"<\/span>:<\/span> \"amplify\"<\/span>,<\/span>\r\n  \"workspaceFolder\"<\/span>:<\/span> \"\/app\"<\/span>,<\/span>\r\n  \"extensions\"<\/span>:<\/span> [<\/span>\r\n    \"misterj.vue-volar-extention-pack\"<\/span>,<\/span>\r\n    \"aws-amplify.aws-amplify-vscode\"<\/span>,<\/span>\r\n    \"GraphQL.vscode-graphql\"<\/span>,<\/span>\r\n    \"oderwat.indent-rainbow\"<\/span>,<\/span>\r\n    \"mhutchie.git-graph\"<\/span>,<\/span>\r\n    \"eamodio.gitlens\"<\/span>\r\n  ],<\/span>\r\n  \"settings\"<\/span>:<\/span> {<\/span>\r\n    \"eslint.options\"<\/span>:<\/span> {<\/span>\r\n      \"extensions\"<\/span>:<\/span> [<\/span>\".js\"<\/span>,<\/span> \".vue\"<\/span>,<\/span> \".ts\"<\/span>]<\/span>\r\n    },<\/span>\r\n    \"eslint.validate\"<\/span>:<\/span> [<\/span>\"typescript\"<\/span>,<\/span> \"javascript\"<\/span>,<\/span> \"vue\"<\/span>],<\/span>\r\n    \"editor.codeActionsOnSave\"<\/span>:<\/span> {<\/span>\r\n      \"source.organizeImports\"<\/span>:<\/span> false<\/span>,<\/span>\r\n      \"source.fixAll.eslint\"<\/span>:<\/span> true<\/span>,<\/span>\r\n      \"source.fixAll\"<\/span>:<\/span> true<\/span>\r\n    },<\/span>\r\n    \"typescript.preferences.importModuleSpecifierEnding\"<\/span>:<\/span> \"minimal\"<\/span>,<\/span>\r\n    \"eslint.format.enable\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"editor.defaultFormatter\"<\/span>:<\/span> \"esbenp.prettier-vscode\"<\/span>,<\/span>\r\n    \"prettier.trailingComma\"<\/span>:<\/span> \"all\"<\/span>,<\/span>\r\n    \"prettier.useEditorConfig\"<\/span>:<\/span> false<\/span>,<\/span>\r\n    \"prettier.jsxSingleQuote\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"prettier.printWidth\"<\/span>:<\/span> 100<\/span>,<\/span>\r\n    \"prettier.semi\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"prettier.singleQuote\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"prettier.tabWidth\"<\/span>:<\/span> 2<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u7528\u6cd5<\/h2>\n
    \n
  1. \n
      \u5b89\u88c5Docker<\/ol>\n<\/li>\n<\/ol>\n
      \u5b89\u88c5VSCode<\/p>\n
      \u5b89\u88c5VSCode\u7684Remote Development\u6269\u5c55<\/p>\n
      \u514b\u9686\u4ed3\u5e93<\/p>\n
      git clone https:\/\/github.com\/covasue\/amplify-vuejs-docker\r\n<\/code><\/pre>\n
      \u5c06\u514b\u9686\u7684amplify-vuejs-docker\u5bfc\u822a\u5230\u6307\u5b9a\u4f4d\u7f6e\u3002<\/p>\n
      cd <\/span>amplify-vuejs-docker\r\n<\/code><\/pre>\n
      \u5728\u8fd9\u91cc\u8fdb\u884c\u73af\u5883\u8bbe\u7f6e\u3002
      \n\u542f\u52a8VSCode\u5e76\u70b9\u51fb”\u5728\u5bb9\u5668\u4e2d\u91cd\u65b0\u6253\u5f00”\u3002<\/p>\n
      code .<\/span>\r\n<\/code><\/pre>\n
      \u7531\u4e8e\u521d\u59cb\u914d\u7f6e\u7684\u6784\u5efa\uff0c\u7b2c\u4e00\u6b21\u9700\u8981\u7ea64\u52305\u5206\u949f\u7684\u65f6\u95f4\u624d\u80fd\u5efa\u7acb\u5bb9\u5668\uff0c\u4f46\u662f\u4ece\u7b2c\u4e8c\u6b21\u5f00\u59cb\uff0c\u5bb9\u5668\uff08\u5f00\u53d1\u73af\u5883\uff09\u5c06\u57284\u52305\u79d2\u5185\u542f\u52a8\u3002
      \n\u4e00\u65e6\u5173\u95edVSCode\uff0c\u5bb9\u5668\u5c06\u81ea\u52a8\u505c\u6b62\u3002<\/p>\n
      \u5728Windows\u4e2d\uff0c\u5e94\u8be5\u901a\u8fc7WSL2\u6765\u8fd0\u884c\u3002<\/h3>\n
      \u5728\u4f7f\u7528\u8fdc\u7a0b\u5f00\u53d1\u65f6\uff0c\u539f\u672c\u5e94\u8be5\u53ef\u4ee5\u4ee5\u7206\u901f\u8fdb\u884c\u5f00\u53d1\u7684\uff0c\u4f46\u662f\u5374\u53d8\u5f97\u5f02\u5e38\u7f13\u6162\uff0c\u800c\u4e14\u5728webpack5 (vue\/cli@5)\u4e2d\u51fa\u73b0\u4e86\u65e0\u6cd5\u8fdb\u884c\u70ed\u91cd\u8f7d\u7684\u95ee\u9898\u3002\u7ecf\u8fc7\u8c03\u67e5\u53d1\u73b0\uff0c\u4e0d\u80fd\u6df7\u5408\u4f7f\u7528FileSystem\u3002\u8fd9\u4e2a\u7f51\u7ad9\u4e0a\u6709\u8be6\u7ec6\u7684\u8bf4\u660e\u3002
      \nhttps:\/\/levelup.gitconnected.com\/docker-desktop-on-wsl2-the-problem-with-mixing-file-systems-a8b5dcd79b22
      \n\u73b0\u5728yarn dev\u6216build\u751a\u81f3\u6bd4\u4f7f\u7528Docker\u4e4b\u524d\u8fd8\u8981\u5feb\uff0c\u7b80\u76f4\u8ba9\u4eba\u96be\u4ee5\u7f6e\u4fe1\u3002<\/p>\n
      \u5728\u4e0a\u8ff0\u7684\u73af\u5883\u4e2d\u7684\u4f18\u70b9<\/h2>\n
        \n
      • \n
          Amplify CLI\u3068Vue CLI\u3068Mock\u306e\u5fc5\u9808\u6761\u4ef6\u306eJDK\u3092\u305d\u308c\u305e\u308c\u30d0\u30fc\u30b8\u30e7\u30f3\u6307\u5b9a\u3057\u305f\u72b6\u614b\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u72b6\u614b\u306b\u306a\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n
           <\/p>\n
            \n
          • \n
              \u69cb\u7bc9\u4f5c\u696d\u3092\u7d42\u3048\u308b\u3068\u3001VSCode\u306e\u30ef\u30fc\u30af\u30b9\u30da\u30fc\u30b9\u3092\u958b\u304f\u3060\u3051\u3067\u3001Docker\u64cd\u4f5c\u3092\u7279\u306b\u610f\u8b58\u3059\u308b\u3053\u3068\u306a\u304f\u30b3\u30f3\u30c6\u30ca\u306b\u5165\u308a\u3001\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u306e\u3088\u3046\u306bVSCode\u304b\u3089\u30bf\u30fc\u30df\u30ca\u30eb\u3092\u305f\u305f\u304f\u3053\u3068\u304c\u3067\u304d\u308b<\/ul>\n<\/li>\n<\/ul>\n
               <\/p>\n
                \n
              • \n
                  git clone ,git checkout xxx, amplify init ,yarn\u3000\u6982\u306d4\u30b9\u30c6\u30c3\u30d7\u3067\u74b0\u5883\u518d\u73fe<\/ul>\n<\/li>\n<\/ul>\n
                   <\/p>\n
                    VSCode\u306e\u8a2d\u5b9a\u3092\u5171\u6709\u3067\u304d\u308b\u3002\u4f8b\u3048\u3070\u30bb\u30df\u30b3\u30ed\u30f3\u3001\u30af\u30a9\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u306e\u8a2d\u5b9a\u3092\u4fdd\u6301\u3067\u304d\u308b<\/ul>\n
                    \u6211\u5c06\u4f7f\u7528TypeScript\u6765\u5c1d\u8bd5\u516c\u5f0f\u6559\u7a0b\u3002<\/h2>\n
                    \u524d\u63d0\u6761\u4ef6\uff08\u6b65\u9aa41\uff09<\/h3>\n
                    \"\"<\/div>\n
                    \u9996\u5148\uff0c\u901a\u8fc7Amplify CLI\u7684\u547d\u4ee4\u201camplify configure\u201d\u521b\u5efaIAM\u7528\u6237\u3002
                    \n\u5728\u6b64\u8fc7\u7a0b\u4e2d\uff0c\u9700\u8981\u8bbf\u95eeWeb\u63a7\u5236\u53f0\uff0c\u8bf7\u51c6\u5907\u597d\u8bbf\u95eeWeb\u63a7\u5236\u53f0\u7684\u6761\u4ef6\u3002<\/p>\n
                    1. \u901a\u8fc7\u4f7f\u7528Amplify\u914d\u7f6e\u6765\u521b\u5efa\u65b0\u7684IAM\u7528\u6237\u3002<\/h4>\n
                    amplify configure\r\n<\/code><\/pre>\n
                    2. \u7531\u4e8e\u4ee5\u5bf9\u8bdd\u5f62\u5f0f\u8fdb\u884c\u63d0\u95ee\uff0c\u56e0\u6b64\u8bf7\u6309\u7167\u6307\u5bfc\u8fdb\u884c\u8f93\u5165\u3002<\/h4>\n
                    \u5efa\u8bae\u9009\u62e9\u4e1c\u4eac\u533a\u57df(ap-northeast-1)\u4f5c\u4e3a\u6700\u4f73\u9009\u62e9\u3002<\/p>\n
                    Specify the AWS Region\r\n? region:  # Your preferred region \r\nSpecify the username of the new IAM user:\r\n? user name:  # User name for Amplify IAM user\r\nComplete the user creation using the AWS console\r\n<\/code><\/pre>\n
                    3. \u6d4f\u89c8\u5668\u5c06\u6253\u5f00\u5e76\u63d0\u793a\u7528\u6237\u8fdb\u884c\u521b\u5efa\u3002<\/h4>\n
                    \u6700\u540e\uff0c\u5c06Access key\u548cSecret Access key\u4fdd\u5b58\u8d77\u6765\u3002<\/p>\n
                    4. \u8f93\u5165\u4e0b\u4e00\u90e8\u5206\u3002<\/h4>\n
                    Enter the access key of the newly created user:\r\n? accessKeyId:  # YOUR_ACCESS_KEY_ID\u3000\u3055\u304d\u307b\u3069\u4fdd\u5b58\u3057\u305fAccess key\r\n? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY \u3055\u304d\u307b\u3069\u4fdd\u5b58\u3057\u305f Secret Access key\r\nThis would update\/create the AWS Profile in your local machine\r\n? Profile Name:  # (default) \u4f55\u304b\u540d\u524d\u3092\u4ed8\u3051\u307e\u3057\u3087\u3046\u3002 \r\n\r\nSuccessfully set up the new user.\r\n<\/code><\/pre>\n
                    \u5728Step1\u7684\u64cd\u4f5c\u5df2\u7ecf\u5b8c\u6210\u3002
                    \nAccess key\u548cSecret Access key\u5728Step2\u4e2d\u4e5f\u4f1a\u7528\u5230\u3002<\/p>\n
                    \u521b\u5efa\u5168\u6808\u9879\u76ee\uff08\u7b2c\u4e8c\u6b65\uff09<\/h3>\n
                    \"\"<\/div>\n
                    \u5728\u8fd9\u4e00\u6b65\u4e2d\uff0c\u6211\u4eec\u5c06\u521b\u5efaVue\u9879\u76ee\uff0c\u5e76\u5b89\u88c5Amplify Libraries\u548cAmplify UI Components\uff0c\u7136\u540e\u5c06Amplify Libraries\u52a0\u8f7d\u5230Vue\u4e2d\u3002<\/p>\n
                    \u5982\u679c\u5f00\u53d1\u73af\u5883\u4e0e\u4e0a\u6b21\u76f8\u540c\uff0c\u5219\u8df3\u8fc7\u5b89\u88c5\uff0c\u56e0\u4e3a@vue\/cli\u5df2\u7ecf\u5b89\u88c5\u4e86\u3002<\/p>\n
                    \u521b\u5efa\u4e00\u4e2aVue\u9879\u76ee\uff08\u4f7f\u7528Vuetify\uff09<\/h4>\n
                    yarn create vuetify\r\n<\/code><\/pre>\n
                    myamplifyproject\u662f\u9879\u76ee\u7684\u540d\u79f0\u3002 (myamplifyproject is the project’s name.)<\/p>\n
                    yarn create v1.22.19[1\/4] Resolving packages...\r\n[2\/4] Fetching packages...\r\n[3\/4] Linking dependencies...\r\n[4\/4] Building fresh packages...\r\n\r\nsuccess Installed \"create-vuetify@1.0.4\" with binaries:\r\n      - create-vuetify\r\n[#######################################] 39\/39\r\nVuetify.js - Material Component Framework for Vue\r\n\r\n\u2714 Project name: \u2026 myamplifyproject\r\n\u2714 Use TypeScript? \u2026 No \/ Yes\r\n\u2714 Would you like to install dependencies with yarn, npm, or pnpm? \u203a yarn\r\n<\/code><\/pre>\n
                    \u9009\u62e9\u540e\uff0c\u7a0d\u7b49\u4e00\u4f1a\u513f\u4ee5\u7b49\u5f85\u9879\u76ee\u521b\u5efa\u5b8c\u6210\u3002\u4e00\u65e6\u521b\u5efa\u5b8c\u6210\uff0c\u5c31\u4f1a\u5207\u6362\u5230\u76ee\u5f55\u4e2d\u3002<\/p>\n
                    cd <\/span>myamplifyproject\r\n<\/code><\/pre>\n
                    \u6211\u4f1a\u68c0\u67e5Vue\u9879\u76ee\u662f\u5426\u6b63\u786e\u521b\u5efa\uff0c\u5e76\u542f\u52a8\u670d\u52a1\u5668\u8fdb\u884c\u786e\u8ba4\u3002
                    \n\u7aef\u53e33000\u5df2\u7ecf\u6253\u5f00\uff0cVuetify\u548cVue\u73af\u5883\u4f1a\u4ee5\u60ca\u4eba\u7684\u901f\u5ea6\u542f\u52a8\u3002<\/p>\n
                    yarn dev\r\n<\/code><\/pre>\n
                    \u4f7f\u7528Ctrl + C\u505c\u6b62\u670d\u52a1\u5668\u3002<\/p>\n
                    2. \u5f00\u59cb\u4e00\u4e2a\u65b0\u7684\u540e\u7aef<\/h4>\n
                    \u6267\u884c Amplify CLI \u7684\u547d\u4ee4 amplify init\u3002
                    \n\u4e4b\u524d\u7684 configure \u66f4\u591a\u662f\u7528\u6765\u521b\u5efa\u8d26\u6237\uff08IAM \u7528\u6237\uff09\u3002
                    \n\u800c\u8fd9\u6b21\u7684 init \u662f\u7528\u6765\u8fdb\u884c\u9879\u76ee\u7684\uff08\u521d\u59cb\uff09\u8bbe\u7f6e\u3002
                    \n\u8bf7\u786e\u4fdd\u5df2\u7ecf\u5207\u6362\u5230\u9879\u76ee\u6240\u5728\u7684\u76ee\u5f55\uff0c\u7136\u540e\u8f93\u5165\u547d\u4ee4\u3002
                    \n\u203b\u4f8b\u5b50\uff1aroot@farwq13fa:\/app\/myamplifyproject# amplify init<\/p>\n
                    amplify init\r\n<\/code><\/pre>\n
                    \u8bf7\u8bbe\u7f6e\u7528\u4e8e\u521b\u5efa\u540e\u7aef\u7684\u9879\u76ee\u540d\u79f0\u3002\u7531\u4e8e\u5b83\u5c06\u7528\u4f5c\u521b\u5efa\u8d44\u6e90\u65f6\u7684\u524d\u7f00\uff0c\u56e0\u6b64\u6700\u597d\u9009\u62e9\u4e00\u4e2a\u6613\u4e8e\u7406\u89e3\u7684\u540d\u79f0\u3002<\/p>\n
                    ? Enter a name for the project (myamplifyproject) todo\r\n<\/code><\/pre>\n
                    \"\"<\/div>\n
                    \u63a5\u4e0b\u6765\u5c06\u8fdb\u884cIAM\u7528\u6237\u7684\u8bbe\u7f6e\uff0c\u7528\u4e8e\u6b64\u9879\u76ee\u3002\u4f1a\u5148\u8be2\u95ee\u662f\u5426\u4f7f\u7528AWS\u914d\u7f6e\u6587\u4ef6\uff08AWS profile\uff09\u3002\u6211\u5c06\u4f7f\u7528\u521a\u624d\u83b7\u53d6\u5230\u7684\u8bbf\u95ee\u5bc6\u94a5\u548c\u79d8\u5bc6\u8bbf\u95ee\u5bc6\u94a5\u3002<\/p>\n
                    ? Do you want to use an AWS profile? (Y\/n)\r\n<\/code><\/pre>\n
                    \u8f93\u5165 n\u3002<\/p>\n
                    ? accessKeyId:  (<YOUR_ACCESS_KEY_ID>) #\u3055\u304d\u307b\u3069\u4fdd\u5b58\u3057\u305fAccess key\r\n? secretAccessKey:  (<YOUR_SECRET_ACCESS_KEY>) #\u3055\u304d\u307b\u3069\u4fdd\u5b58\u3057\u305f Secret Access key\r\n<\/code><\/pre>\n
                    \u63a5\u4e0b\u6765\u9009\u62e9\u5730\u533a\u3002<\/p>\n
                    ? region:  (Use arrow keys)\r\n\u276f us-east-1 \r\n  us-east-2 \r\n  us-west-2 \r\n  eu-west-1 \r\n  eu-west-2 \r\n  eu-central-1 \r\n  ap-northeast-1 \r\n(Move up and down to reveal more choices)\r\n<\/code><\/pre>\n
                    \u8bf7\u4eceStep1\u4e2d\u9009\u62e9\u60a8\u60f3\u8981\u7684\u5730\u533a\u3002\u5982\u679c\u9009\u62e9\u4e1c\u4eac\uff0c\u8bf7\u9009\u62e9ap-northeast-1\u3002
                    \n\u5c06\u5bf9\u9879\u76ee\u8fdb\u884c\u521d\u59cb\u5316\u3002\u8bf7\u7a0d\u7b49\u7247\u523b\uff0c\u76f4\u81f3\u521d\u59cb\u5316\u5b8c\u6210\u3002
                    \n\u5b8c\u6210\u540e\uff0c\u4ee5\u4e0b\u5904\u7406\u5c06\u5df2\u5b8c\u6210\u3002<\/p>\n
                      \n
                    • \n
                        amplify\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u5b9a\u7fa9\u304c\u5165\u3063\u3066\u3044\u307e\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n
                         <\/p>\n
                          \n
                        • \n
                            src\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306baws-exports.js\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002<\/ul>\n<\/li>\n<\/ul>\n
                             <\/p>\n
                              \u30ea\u30dd\u30b8\u30c8\u30ea\u3067\u5171\u6709\u3057\u306a\u3044\u307b\u3046\u304c\u826f\u3044\u30d5\u30a1\u30a4\u30eb\u306b\u3064\u3044\u3066.gitignore\u306b\u8ffd\u8a18\u3055\u308c\u307e\u3059\u3002<\/ul>\n
                              3. \u5b89\u88c5 Amplify \u5e93<\/h4>\n
                              \u5b89\u88c5Amplify Libraries\u548cAmplify UI Components\uff08Vue3\u7248\uff09\u3002\u8bf7\u6ce8\u610f\uff0cUI Components\u5728Vue2\u7248\u672c\u4e2d\u6709\u6240\u4e0d\u540c\u3002<\/p>\n
                              yarn add aws-amplify@^5.0.4 @aws-amplify\/ui-vue@3.0.2\r\n<\/code><\/pre>\n
                              4. \u642d\u5efa\u524d\u7aef<\/h4>\n
                              \u5c06\u5b89\u88c5\u7684Amplify\u5e93\u96c6\u6210\u5230Vue\u4e2d\u3002
                              \n\u6253\u5f00src\/main.ts\u6587\u4ef6\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u6e90\u4ee3\u7801\u3002<\/p>\n
                              \/\/ Components<\/span>\r\nimport<\/span> App<\/span> from<\/span> '<\/span>.\/App.vue<\/span>'<\/span>;<\/span>\r\n\r\n\/\/ Composables<\/span>\r\nimport<\/span> {<\/span> createApp<\/span> }<\/span> from<\/span> '<\/span>vue<\/span>'<\/span>;<\/span>\r\n\r\n\/\/ Plugins<\/span>\r\nimport<\/span> {<\/span> registerPlugins<\/span> }<\/span> from<\/span> '<\/span>@\/plugins<\/span>'<\/span>;<\/span>\r\n\/\/\u8ffd\u52a0\u3053\u3053\u304b\u3089<\/span>\r\nimport<\/span> {<\/span> Amplify<\/span> }<\/span> from<\/span> '<\/span>aws-amplify<\/span>'<\/span>;<\/span>\r\nimport<\/span> awsExports<\/span> from<\/span> '<\/span>.\/aws-exports<\/span>'<\/span>;<\/span>\r\nAmplify<\/span>.<\/span>configure<\/span>(<\/span>awsExports<\/span>);<\/span>\r\n\/\/\u8ffd\u52a0\u3053\u3053\u307e\u3067<\/span>\r\nconst<\/span> app<\/span> =<\/span> createApp<\/span>(<\/span>App<\/span>);<\/span>\r\n\r\nregisterPlugins<\/span>(<\/span>app<\/span>);<\/span>\r\n\r\napp<\/span>.<\/span>mount<\/span>(<\/span>'<\/span>#app<\/span>'<\/span>);<\/span>\r\n<\/code><\/pre>\n
                              Vue Vite \u914d\u7f6e<\/h5>\n
                              \u5f53\u4f7f\u7528Vite\u6765\u4f7f\u7528Amplify\u65f6\uff0c\u9700\u8981\u8fdb\u884c\u4ee5\u4e0b\u914d\u7f6e\u3002
                              \n\u8fd9\u4e9b\u662f\u521d\u5b66\u8005\u5bb9\u6613\u9047\u5230\u56f0\u96be\u7684\u5730\u65b9\u3002<\/p>\n
                              4.2.1 \u6dfb\u52a0 `