vue を試してみる

Javascript 系のものは全然うといので、最初から試してみる。
vim おぢさんなので、この機会に VSCode にも慣れてみる。

環境

Ubuntu 22.04 LTS

node はインストール済み

$ node -v
v20.14.0

vscode 1.83.1 に Vue-Official を追加しています。

今回インストールした vue のバージョンは 3.4.29 でした。 $ npm list vue で確認できます。

`

作業環境をつくる

適当な場所で vue インストール。途中で Project name: と聞かれた文字列がディレクトリ名になり、そこで作業をすることになります。

$ npm init vue@latest
Need to install the following packages:
create-vue@3.10.3
Ok to proceed? (y) y


> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in /home/nanbuwks/Downloads/vuetest/vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run dev

vscode で作成したフォルダを開く

VSCode 内ターミナルを開く。別に VSCode 内でなくてもいいのだけれども、VSCode に慣れてみる。
ターミナルから以下のように実行すると、package.json の記述に基づいてインストールされる。

$ npm install

added 27 packages, and audited 28 packages in 6s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

サンプルプログラムを実行

App.vue を開くとこんな感じだった。

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

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

ターミナルから実行

$ npm run dev

> vue-project@0.0.0 dev
> vite


  VITE v5.3.1  ready in 120 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

とのことなので、 http://localhost:5173/ を開けると以下の画面が出てきた。

オリジナルページを作る

サンプルプログラムはいろいろと入ってたので最低限のプログラムにしてみる。

いらないファイルを削除して、 src の中身を以下のようにする。

main.js を以下のように変更

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

更に、 assets/base.css の中身を空にしてしまいます。

App.vue の中身はこちら

<template>
<h1>Hello</h1>
</template>

実行できました。