\u76ee\u6807\u6559\u7a0b<\/h1>\n
<\/p>\n
\u524d\u63d0\u6761\u4ef6<\/h1>\n\u73af\u5883<\/h2>\n
\u73af\u5883\u8981\u7d20<\/p>\n
Node.js v14.x or later\r\nnpm v6.14.4 or later\r\ngit v2.14.1 or later\r\n<\/code><\/pre>\n\u5728\u672c\u5730\u73af\u5883\u4e0b\u4f7f\u7528Windows10\u548cWindows Terminal\u3002<\/p>\n
\u276f node -v\r\nv16.13.1\r\n\u276f npm -v\r\n8.1.2\r\n\u276f git --version\r\ngit version 2.39.0.windows.2\r\n<\/code><\/pre>\nAWS\u8d26\u6237<\/h2>\n
\u5229\u7528\u73b0\u6709\u7684\u4e1c\u897f\u3002<\/p>\n
\u5b89\u88c5 Amplify CLI<\/h2>\n![\"image.png\"](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d810b913a08637a6ac1a2\/14-0.png\" "\\"\\"")
<\/div>\n\u589e\u5f3a\u8bbe\u7f6e<\/h2>\namplify configure\r\n<\/code><\/pre>\n\u6307\u5b9a\u4f7f\u7528\u533a\u57df\u548cIAM\u7528\u6237\u3002<\/p>\n
Specify the AWS Region\r\n? region: us-east-1\r\nSpecify the username of the new IAM user:\r\n? user name: amplify-test\r\n<\/code><\/pre>\n\u6dfb\u52a0IAM\u7528\u6237<\/h2>\n![\"image.png\"](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d810b913a08637a6ac1a2\/20-0.png\" "\\"\\"")
<\/div>\n![\"image.png\"](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d810b913a08637a6ac1a2\/21-0.png\" "\\"\\"")
<\/div>\n\u521b\u5efa\u7528\u6237\u8bbf\u95ee\u5bc6\u94a5\uff0c\u5e76\u8bb0\u4e0b”Access key ID”\u548c”Secret access key”\u3002
\n\u5728\u7ec8\u7aef\u4e0a\u8f93\u5165\u5e76\u8f93\u5165\u914d\u7f6e\u6587\u4ef6\u540d\u79f0\u3002\uff08\u7531\u4e8e\u4e0d\u60f3\u4f7f\u7528\u9ed8\u8ba4\u914d\u7f6e\uff0c\u6211\u8fdb\u884c\u4e86\u6307\u5b9a\u3002\uff09<\/p>\n
Enter the access key of the newly created user:\r\n? accessKeyId: ********************\r\n? secretAccessKey: ****************************************\r\nThis would update\/create the AWS Profile in your local machine\r\n? Profile Name: amplify-test\r\n<\/code><\/pre>\n\u5efa\u7acb\u5168\u6808\u9879\u76ee<\/h1>\n\u521b\u5efaVue3\u5e94\u7528\u7a0b\u5e8f<\/h2>\n\u276f npm init vue@3\r\nNeed to install the following packages:\r\n create-vue@3\r\nOk to proceed? (y) y\r\n\r\nVue.js - The Progressive JavaScript Framework\r\n\r\n\u221a Project name: ... myamplifyproject\r\n\u221a Add TypeScript? ... No\r\n\u221a Add JSX Support? ... No\r\n\u221a Add Vue Router for Single Page Application development? ... No\r\n\u221a Add Pinia for state management? ... No\r\n\u221a Add Vitest for Unit Testing? ... No\r\n\u221a Add an End-to-End Testing Solution? \u00bb No\r\n\u221a Add ESLint for code quality? ... No\r\n<\/code><\/pre>\n\u5b89\u88c5\u6240\u9700\u7684\u6a21\u5757\u3002<\/p>\n
cd myamplifyproject\r\nnpm install\r\n<\/code><\/pre>\n\u5e94\u7528\u7a0b\u5e8f\u7684\u8fd0\u884c<\/p>\n
npm run dev\r\n<\/code><\/pre>\n\u4ece\u7ec8\u7aef\u663e\u793a\u7684\u672c\u5730URL\u5904\u8fdb\u884c\u67e5\u770b\u3002<\/p>\n
VITE v4.0.3 ready in 1166 ms\r\n\r\n \u279c Local: http:\/\/127.0.0.1:5173\/\r\n \u279c Network: use --host to expose\r\n \u279c press h to show help\r\n<\/code><\/pre>\n![\"image.png\"](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d810b913a08637a6ac1a2\/33-0.png\" "\\"\\"")
<\/div>\n\u521d\u59cb\u5316\u65b0\u7684\u540e\u7aef<\/h2>\namplify init\r\n<\/code><\/pre>\n\u276f amplify init\r\nNote: It is recommended to run this command from the root of your app directory\r\n? Enter a name for the project todo <--- TODO \u3068\u6307\u5b9a\r\nThe following configuration will be applied:\r\n\r\nProject information\r\n| Name: todo\r\n| Environment: dev\r\n| Default editor: Visual Studio Code\r\n| App type: javascript\r\n| Javascript framework: vue\r\n| Source Directory Path: src\r\n| Distribution Directory Path: dist\r\n| Build Command: npm.cmd run-script build\r\n| Start Command: npm.cmd run-script serve\r\n\r\n? Initialize the project with the above configuration? Yes\r\nUsing default provider awscloudformation\r\n? Select the authentication method you want to use: AWS profile <---\u8a8d\u8a3c\u306fprofile\r\n? Please choose the profile you want to use amplify-test <--- \u5148\u307b\u3069\u4f5c\u6210\u3057\u305f\u3082\u306e\u3092\u6307\u5b9a\r\n<\/code><\/pre>\n\u4f7f\u7528 CloudFormation \u521b\u5efa\u3002<\/p>\n
Adding backend environment dev to AWS Amplify app: **********\r\n\r\nDeployment completed.\r\nDeployed root stack todo [ ======================================== ] 4\/4\r\n AuthRole AWS::IAM::Role CREATE_COMPLETE\r\n DeploymentBucket AWS::S3::Bucket CREATE_COMPLETE\r\n UnauthRole AWS::IAM::Role CREATE_COMPLETE\r\n amplify-todo-dev-***** AWS::CloudFormation::Stack CREATE_COMPLETE\r\n\r\n\u221a Help improve Amplify CLI by sharing non sensitive configurations on failures (y\/N) <--- N\u3092\u6307\u5b9a\r\nDeployment bucket fetched.\r\n\u221a Initialized provider successfully.\r\n\u221a Initialized your environment successfully.\r\n\r\nYour project has been successfully initialized and connected to the cloud!\r\n<\/code><\/pre>\n\u5b89\u88c5Amplify\u5e93<\/p>\n
npm install aws-amplify @aws-amplify\/ui-vue\r\n<\/code><\/pre>\n\u524d\u7aef\u8bbe\u7f6e<\/h2>\n
\u4fee\u6539 src\/main.js<\/p>\n
import<\/span> {<\/span> createApp<\/span> }<\/span> from<\/span> '<\/span>vue<\/span>'<\/span>\r\nimport<\/span> App<\/span> from<\/span> '<\/span>.\/App.vue<\/span>'<\/span>\r\n\r\nimport<\/span> '<\/span>.\/assets\/main.css<\/span>'<\/span>\r\n\r\nimport<\/span> {<\/span> Amplify<\/span> }<\/span> from<\/span> '<\/span>aws-amplify<\/span>'<\/span>;<\/span> \/\/\u8ffd\u52a0<\/span>\r\nimport<\/span> awsExports<\/span> from<\/span> '<\/span>.\/aws-exports<\/span>'<\/span>;<\/span> \/\/\u8ffd\u52a0<\/span>\r\nAmplify<\/span>.<\/span>configure<\/span>(<\/span>awsExports<\/span>);<\/span> \/\/\u8ffd\u52a0<\/span>\r\n\r\ncreateApp<\/span>(<\/span>App<\/span>).<\/span>mount<\/span>(<\/span>'<\/span>#app<\/span>'<\/span>)<\/span>\r\n<\/code><\/pre>\n\u4fee\u590dVue Vite\u914d\u7f6e<\/h2>\n
\u5728index.html\u4e2d\u6dfb\u52a0\u5185\u5bb9<\/p>\n
<!DOCTYPE html><\/span>\r\n<html<\/span> lang=<\/span>\"en\"<\/span>><\/span>\r\n <head><\/span>\r\n <meta<\/span> charset=<\/span>\"UTF-8\"<\/span>><\/span>\r\n <link<\/span> rel=<\/span>\"icon\"<\/span> href=<\/span>\"\/favicon.ico\"<\/span>><\/span>\r\n <meta<\/span> name=<\/span>\"viewport\"<\/span> content=<\/span>\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\r\n <title><\/span>Vite App<\/title><\/span>\r\n <\/head><\/span>\r\n <body><\/span>\r\n <div<\/span> id=<\/span>\"app\"<\/span>><\/div><\/span>\r\n <script <\/span>type=<\/span>\"module\"<\/span> src=<\/span>\"\/src\/main.js\"<\/span>><\/script><\/span>\r\n <!-- \u8ffd\u52a0 --><\/span>\r\n <script><\/span>\r\n window<\/span>.<\/span>global<\/span> =<\/span> window<\/span>;<\/span>\r\n var<\/span> exports<\/span> =<\/span> {};<\/span>\r\n <\/script><\/span>\r\n <!-- \u8ffd\u52a0 --><\/span>\r\n <\/body><\/span>\r\n<\/html><\/span>\r\n<\/code><\/pre>\n\u4fee\u6539\u522b\u540d\u7684\u5185\u5bb9<\/p>\n
import<\/span> {<\/span> fileURLToPath<\/span>,<\/span> URL<\/span> }<\/span> from<\/span> '<\/span>node:url<\/span>'<\/span>\r\n\r\nimport<\/span> {<\/span> defineConfig<\/span> }<\/span> from<\/span> '<\/span>vite<\/span>'<\/span>\r\nimport<\/span> vue<\/span> from<\/span> '<\/span>@vitejs\/plugin-vue<\/span>'<\/span>\r\n\r\n\/\/ https:\/\/vitejs.dev\/config\/<\/span>\r\nexport<\/span> default<\/span> defineConfig<\/span>({<\/span>\r\n plugins<\/span>:<\/span> [<\/span>vue<\/span>()],<\/span>\r\n resolve<\/span>:<\/span> {<\/span>\r\n alias<\/span>:<\/span> [<\/span>\r\n {<\/span>\r\n find<\/span>:<\/span> '<\/span>.\/runtimeConfig<\/span>'<\/span>,<\/span>\r\n replacement<\/span>:<\/span> '<\/span>.\/runtimeConfig.browser<\/span>'<\/span>,<\/span>\r\n },<\/span>\r\n ]<\/span>\r\n }<\/span>\r\n})<\/span>\r\n<\/code><\/pre>\n\u4e0d\u4f7f\u7528TypeScript\uff0c\u6240\u4ee5\u4e0d\u9700\u8981\u4fee\u6539tsconfig.json\u3002<\/p>\n
3. \u5c06API\u548c\u6570\u636e\u5e93\u8fde\u63a5\u5230\u5e94\u7528\u7a0b\u5e8f\u4e0a\u3002<\/h1>\n\u521b\u5efaGraphQL API\u548c\u6570\u636e\u5e93\u3002<\/h2>\namplify add api\r\n<\/code><\/pre>\n\u276f amplify add api\r\n? Select from one of the below mentioned services: (Use arrow keys)\r\n> GraphQL\r\n REST\r\n<\/code><\/pre>\n? Provide API name: todo\r\n? Choose the default authorization type for the API (Use arrow keys)\r\n> API key\r\n Amazon Cognito User Pool\r\n IAM\r\n OpenID Connect\r\n Lambda\r\n? Enter a description for the API key: \u00bb 7\r\n<\/code><\/pre>\n? Here is the GraphQL API that we will create. Select a setting to edit or continue (Use arrow keys)\r\n\r\n Name: todo\r\n Authorization modes: API key (default, expiration time: 7 days from now)\r\n Conflict detection (required for DataStore): Disabled\r\n> Continue <--- \u3053\u3053\u306fContinue\u3067\u6b21\u3078\u9032\u3080\r\n<\/code><\/pre>\n? Choose a schema template: (Use arrow keys)\r\n> Single object with fields (e.g., \u201cTodo\u201d with ID, name, description)\r\n One-to-many relationship (e.g., \u201cBlogs\u201d with \u201cPosts\u201d and \u201cComments\u201d)\r\n Blank Schema\r\n<\/code><\/pre>\n\u5728\u6307\u5b9a\u7684\u7f16\u8f91\u5668\u4e2d\u6253\u5f00\u4e86\u6a21\u5f0f\u6587\u4ef6\u3002<\/p>\n
\u221a Do you want to edit the schema now? (Y\/n) \u00b7 yes\r\nEdit the file in your editor: C:\\Users\\***\\myamplifyproject\\amplify\\backend\\api\\todo\\schema.graphql\r\n<\/code><\/pre>\n\u4f3c\u4e4e\u662f\u4e3a\u4e86\u4f7f\u6a21\u578b\u7684\u63cf\u8ff0\u88abAmplify\u7cfb\u7edf\u8bc6\u522b\u800c\u8fdb\u884c\u7684\u63cf\u8ff0\u3002<\/p>\n
input<\/span> AMPLIFY<\/span> {<\/span> globalAuthRule<\/span>:<\/span> AuthRule<\/span> =<\/span> {<\/span> allow<\/span>:<\/span> public<\/span> }<\/span> }<\/span> # FOR TESTING ONLY!<\/span>\r\n\r\ntype<\/span> Todo<\/span> @<\/span>model<\/span> {<\/span>\r\n id<\/span>:<\/span> ID<\/span>!<\/span>\r\n name<\/span>:<\/span> String<\/span>!<\/span>\r\n description<\/span>:<\/span> String<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\nGraphQL API \u7684\u90e8\u7f72<\/h2>\n