+++
date = "2021-07-03"
tags = ["hugo", "vue"]
title = "お絵かきの枚数が増えてきたので自動表示してみた"
slug = "vue-img"
+++
今まで新しい絵を追加するたびに、手動でhtmlを書き換えてたんですが、面倒だなあと思いつつ、しかし、載せるタイミングは操作できるので別にいいかと思っていたのですが、流石に枚数が増えてきたので自動化しました。
```html:src/App.vue
```
```js:src/main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
```
```js:vue.config.js
module.exports = {
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js'
}
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
},
},
}
```
pngは`static/img/c_0x.png`に置くと仮定して、自動化にはgh-actionsなどを活用してください。
```sh
$ ln -s ./static ./src/public
$ echo VUE_APP_IMGNUMBERC=`ls ./static/img/c_*.png|wc -l` >> .env
$ yarn add vue
$ yarn serve
$ yarn build
```
hugoに対応させるため、以下のファイルを用意します。
```sh
$ mkdir -p static/img
$ cp -r src/dist/*.js static/img/
$ cp -r src/dist/*.map static/img/
```
```html:content/img.md
---
type: img
---
```
なお、cssを追加したい場合、App.vueの`