AWS AmplifyのUI Componentsを利用する

$ vue create ui_components
$ cd ui_components
$ npm run serve

$ npm install aws-amplify @aws-amplify/ui-vue

$ amplify init

  Enter a name for the project uicomponents
  Enter a name for the environment dev
  Choose your default editor: Visual Studio Code
  Choose the type of app that you're building javascript
  Please tell us about your project
  What javascript framework are you using vue
  Source Directory Path:  src
  Distribution Directory Path: dist
  Build Command:  npm run-script build
  Start Command: npm run-script serve

<template>
  <amplify-authenticator>
    <div id="app">
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
  <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

$ amplify add auth

  Do you want to use the default authentication and security configuration? Default configuration
  Warning: you will not be able to edit these selections. 
  How do you want users to be able to sign in? Username
  Do you want to configure advanced settings? No, I am done.

$ amplify push

<template>
  <amplify-authenticator>
    <div id="app">
      <amplify-chatbot
        bot-name="yourBotName"
        bot-title="My ChatBot"
        welcome-message="Hello, how can I help you?"
      />
    </div>
  <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

$ amplify add interactions

  Provide a friendly resource name that will be used to label this category in the project: lexd2e694d4
  Would you like to start with a sample chatbot or start from scratch? Start with a sample
  Choose a sample chatbot: BookTrip
  Please indicate if your use of this bot is subject to the Children's Online   Privacy Protection Act (COPPA).
  Learn more: https://www.ftc.gov/tips-advice/business-center/guidance/complying-coppa-frequently-asked-questions No

$ amplify push

const awsmobile = {
    "aws_project_region": "ap-northeast-1",
    "aws_cognito_identity_pool_id": "ap-northeast-1:67ad2bbf-fa4b-4320-8640-efbd3629c79c",
    "aws_cognito_region": "ap-northeast-1",
    "aws_user_pools_id": "ap-northeast-1_E865y2qqq",
    "aws_user_pools_web_client_id": "7akqir1rjttsl6ndljr1tcumss",
    "oauth": {},
    "aws_bots": "enable",
    "aws_bots_config": [
        {
            "name": "BookTrip_dev",
            "alias": "$LATEST",
            "region": "ap-southeast-2"
        }
    ]
};

export default awsmobile;

<template>
  <amplify-authenticator>
    <div id="app">
      <amplify-s3-image img-key="example.png" />
    </div>
  <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

$ amplify add storage

  Please select from one of the below mentioned services: Content (Images, audio, video, etc.)
  Please provide a friendly name for your resource that will be used to label this category in the project: s34863edf5
  Please provide bucket name: uicomponents4e22abf46e7b421f871b3bb9dbb20218
  Who should have access: Auth users only
  What kind of access do you want for Authenticated users? create/update, read, delete
  Do you want to add a Lambda Trigger for your S3 Bucket? No

$ amplify push