Vue.jsで掲示板を作ってみよう vol.1 『Hello vueと表示させてみよう』

こんにちは、これから頑張りましょう!

yarn create nuxt-app [プロジェクト名]
（私は　yarn create nuxt-app board-app でしています）

下のように選択してください

create-nuxt-app v3.5.2
✨  Generating Nuxt.js project in board-app
? Project name: board-app
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele
ction)
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using 
typescript)
? Continuous integration: None
? Version control system: Git

cd　 [プロジェクト名]
board-appに移動します

yarn dev
これで実行します

 Nuxt @ v2.15.1                            
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   

http://localhost:3000/ を開くと　board-appの pagesのindex.vueが表示されています。
index.vueの中身を全て消して下のコードをコピペしてください。

<template>
  <div>
　　　<p>{{ message }}</p>
　</div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello Vue!"
　　　};
  },
  methods: {},
  computed: {}
};
</script>

次にnuxt_config.jsの dark:true を　falseにして画面を明るくします

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
　　　　　　：

この地点でこの画面になっていれば大丈夫です！