example

次にvue.jsの書き方を紹介します。

./bsky-web
├── package.json
├── src
│   ├── App.vue
│   └── main.js
└── vue.config.js

{
  "name": "bsky-web",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.25.0",
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.15"
  }
}

module.exports = {
    publicPath: "./",
    configureWebpack: {
        output: {
            filename: '[name].js',
            chunkFilename: '[name].js'
        }
    },
    css: {
        extract: {
            filename: '[name].css',
            chunkFilename: '[name].css'
        },
    },
}

<template>
    <div id="app">
        <div v-if="record" class="bluesky-record">
            <div v-for="i in record.data.records">
                <p><span class="handle">@{{ handle }}</span></p>
                <p><span class="text">{{ i.value.text }}</span></p>
                <p><span class="time"><a :href="i.uri">{{ i.value.createdAt }}</a></span></p>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data () {
        return {
            handle: "yui.syui.ai",
            record: null,
        }
    },
    mounted () {
            axios
                .get("https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=" + this.handle + "&collection=app.bsky.feed.post&limit=1")
                .then(response => (this.record = response));
    }
}
</script>

<style>
div#app {
    background-color:rgb(255, 214, 10);
}
</style>

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

では、これらのsrcをpreview(プレビュー)します。

$ nvm install 14
$ yarn install
$ yarn serve

$ curl localhost:8080

最後にbuildして、それをweb-serverに置くとページにアクセスできるようになります。

$ yarn build

./dist
├── app.js
├── app.js.map
├── chunk-vendors.js
├── chunk-vendors.js.map
└── index.html