僕がよくやるVueでWebアプリ作成のための準備

はじめに

webアプリ作って、自分なりのいいやり方が固まってきたので、ここで公開しておきます。
参考になれば幸いです。

準備

mkdir hoge
cd hoge
yarn init

まずはディレクトリを作って、コードを書く場所を準備します。
yarnの質問は適当に答えておいてください。
めんどくさい場合は、改行連打でOKです。

yarn add --dev parcel

parcel入れます。
依存関係はすべてparcelにおまかせ。
parcel最高です。

mkdir src

コードを管理するディレクトリを作ります。
なくても大丈夫ですが、整理整頓のために準備します。

コード

index.pug

doctype html
html
    head
        meta(charset="UTF-8")
        meta(name="viewport" content="width=device-width, initial-scale=1.0")
        title スターターキット
    body
        div#app
    script(src="index.ts")

index.ts

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

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

new Vue({
    el: '#app',
    render: h => h(App)
})

App.vue

<template lang='pug'>
  div.hero.is-fullheight
    div.hero-body
      div.container.has-text-centered
        h1.title オレオレスターターキット
        h2.subtitle それっぽいでしょ

        div.container
          a.link-stylus(href="https://buefy.org/") buefyはスッキリかけて、僕は好きです。

    div.hero-foot
      div.container.has-text-centered
        span &copy; 2020
        a(href="https://twitter.com/nucosenpai" target="_blank")
          span ぬこ先輩

</template>

<script lang='ts'>
  import {Component, Vue} from "vue-property-decorator"

  @Component
  export default class App extends Vue {
  }
</script>

<style lang="stylus" scoped>

.link-stylus
  border: 1px solid

</style>

srcディレクトリに上の3つのファイルを準備します。
templateにpugを使ってることで、かなり見やすくなっていると思います。
見た目のために僕はbuefyを使いましたが、ここはお好みで。

yarn parcel src/index.pug --open

yarnが自動的に依存関係を調べてくれて、必要なモジュールをすべてインストールしてくれます。
hot reloadにも対応してますので、動作を確認しながら開発ができます。

おわりに

できたアプリはvercelで公開してみるといいと思います。

vercel
vercel --prod

僕が最近作ったアプリはマンダラチャートが書けて、画像として保存できます。
mandara
目標設定などに使ってみてください。