Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Heobus

核爆試驗場,請小心輻射傷害。

Add Nuxt.js Modules

https://github.com/nuxt-community/awesome-nuxt#modules

Add bootstrap-vue

$ cd 2018
$ yarn add bootstrap-vue

Add Nuxt Font Awesome 5

$ cd 2018
$ yarn add qonfucius-nuxt-fontawesome
$ yarn add @fortawesome/fontawesome-free-brands
$ yarn add @fortawesome/fontawesome-free-solid

Edit nuxt.config.js

...
  fontAwesome: {
    packs: [
      {
        package: '@fortawesome/fontawesome-free-brands',
        icons: ['faGithub', 'faFontAwesome']
      },
      {
        package: '@fortawesome/fontawesome-free-solid',
        icons: ['faBus']
      }
    ]
  },
  modules: [
    '@nuxtjs/pwa',
    'bootstrap-vue/nuxt',
    'qonfucius-nuxt-fontawesome',
  ]
...

Project Initiation

Install vue-cli

$ npm install -g vue-cli
...
...
...
+ vue-cli@2.9.3
added 259 packages in 29.661s

Initiation

$ vue init nuxt-community/pwa-template 2018
...
...
...
   vue-cli · Generated "2018".

   To get started:

     cd 2018
     npm install # Or yarn
     npm run dev

Change dev web server port number by edit package.json

...
...
...
  "config": {
    "nuxt": {
      "port": "3084"
    }
  }
...
...
...

Run dev web server

$ cd 2018
$ yarn dev
...
...
...
 DONE  Compiled successfully in -8371ms

 OPEN  http://localhost:3084

Generate static files

$ cd 2018
$ yarn generate
$ aws configure --profile hoebus
AWS Access Key ID [None]: ********************
AWS Secret Access Key [None]: ****************************************
Default region name [None]: us-east-1
Default output format [None]: json
$

Upload to AWS S3 bocket

$ cd 2018/dist
$ aws s3 sync --profile hoebus --acl public-read --exclude .DS_Store . s3://s.hoebus.idv.tw
...
...
...
upload: ..\..\..\..\..\..\益\github\yihua1218\hoebus.idv.tw\2018\dist\_nuxt\vendor.93b0c8260fefcdb7f815.js to s3://s.hoebus.idv.tw/_nuxt/vendor.93b0c8260fefcdb7f815.js

CloudFront Invalidation

$ aws cloudfront create-invalidation --profile hoebus --distribution-id ELS5MFWQF4M40 --paths "/*"
{
    "Invalidation": {
        "Status": "InProgress",
        "InvalidationBatch": {
            "Paths": {
                "Items": [
                    "/*"
                ],
                "Quantity": 1
            },
            "CallerReference": "cli-1525541713-944104"
        },
        "Id": "I3UTIMZMSOB7BB",
        "CreateTime": "2018-05-05T17:35:18.038Z"
    },
    "Location": "https://cloudfront.amazonaws.com/2017-03-25/distribution/ELS5MFWQF4M40/invalidation/I3UTIMZMSOB7BB"
}

Issues

  1. Icons load incorrectly (very large) in server side when using library.add (Nuxt.js)

Edit nuxt.config.js and add css:

...
  css: [
    '@fortawesome/fontawesome/styles.css',
  ],
...

References

  1. 5 分鐘快速了解 FontAwesome 5, PJCHENder
  2. Nuxt Font Awesome 5
  3. Font Awesome

About

Website

Resources

Releases

No releases published
You can’t perform that action at this time.