Vue 3.0 インストール方法 Ubuntu20.04

VueCLIをubuntu20.04にインストールし，Vue3.0プロジェクトを作成するまでの手順を記載しました．

• VueCLIのインストール

install_vuecli.sh

curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
sudo apt install -y nodejs npm
node -v
npm -v
sudo npm install -g @vue/cli
vue --version

(ref) https://houdoukyokucho.com/2021/01/19/post-2913/

上記実施しvueを実行したらnodejsのバージョンが古いと怒られた

• nodejsのアップデート

update_nodejs.sh

sudo apt install -y nodejs npm
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm
exec $SHELL -l
node -v # v18.14.0

(ref) https://qiita.com/seibe/items/36cef7df85fe2cefa3ea

ここまでの手順でVueCLIがインストールできました．

ここからサンプルを実行していきます．

• プロジェクトの作成

プロジェクトの作成はvue create {プロジェクト名}で行えるようです．試しにhello-vueというプロジェクトを作成してみます．バージョンの選択で,今回はVue3を選択しました

vue create hello-vue 

プロジェクトが生成できたら,npm run serveコマンドでプロジェクトを実行できます．

cd hello-vue
npm run serve

ビルトが完了したら,表示されたURLにアクセスすることで立ち上がったサーバーを確認できます．
今回URLは http://localhost:8081/ でした．

アクセスすると以下のような画面が表示されます．

(ref) https://codelikes.com/vue-cli/

• おまけ

ちなみにメインのプログラムはsrc/App.vueに記載されているみたいで以下のようなプログラムになっています．

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vueのロゴファイルパスは./Assets/logo.pngみたいでこのpngファイルを変えてみたらロゴを変えることができました．

また<HelloWorld msg="Welcome to Your Vue.js App"/>がロゴ下の文章を生成しているようです．このタグをコメントアウトしてみました．がエラーが発生．

ろご下の文章HelloWorldクラス?を消すには以下の手順が必要でした．

• HelloWorldタブのコメントアウト
• HelloWold コンポーネントの import コメントアウト
• componets設定内のHelloWorldをコメントアウト

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!--HelloWorld msg="Welcome to Your Vue.js App"/-->
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
//    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ロゴだけになった!