バージョン3系のVue.js環境を構築

Vue.jsの開発環境をインストールします。バージョン2についても以前は記述していましたが、バージョン3がリーリースされてから時間も経ちましたので3だけを対象にしてリライトします。

ここでのインストール環境はWindwos10(64bit)です。

もし、AngularやReactのようなJavaScriptのフレームワークを触った事がなくVue.jsとはどんなものかを手短に知りたい場合は、開発環境を作らずにそのままHTMLに記述できるインライン記法の方がわかりやすいかもしれません。そちらの方法はリンク先の記事を参照していただければと思います。

環境の構築

Vue.js環境を作るためにはJavaScriptの実行環境であるNode.jsが必要です。Node.jsの詳細やインストール方法についてはリンク先の別記事を参考にしてください。

Node.jsのインストールが終わったら、ターミナル(コマンドプロンプトやPower Shell)から、管理ツールである「vue-cli」をグローバル領域にインストールします。

PS> npm install -g @vue/cli  
...

次に、Vue.jsのプロジェクトを作成します。「vue create プロジェクト名」としてコマンドを実行すると、名付けたプロジェクト名のフォルダがカレントフォルダに作成され、Vue.jsのプロジェクトが初期化されます。この時、こバージョンを確認されますので、3を選択します。

公式ガイドにあるように、一連の作業が終わったら、プロジェクトのディレクトリに移動し「vue upgrade --next」を実行しします。

PS> mkdir d:¥vue
PS> cd d:¥vue
PS> vue create test-project
Vue CLI v5.0.6
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
...
PS> cd test-project
PS> vue upgrade --next
DONE  Seems all plugins are up to date. Good work!

他になにも機能のない状態ですが、プロジェクトの生成はこれで完了です。

テスト稼働

すでにサンプルコードがセットされていますので、テスト稼働が可能です。実行するには「npm run serve」とします。

PS> npm run serve
PS> cd d:¥vue
...
DONE  Compiled successfully in 41263ms 
...
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.11.2:8080/
...

コマンドがnpmになっていることからもわかるように、Node.jsを利用してアプリケーションを起動しています。この設定はプロジェクトフォルダにある「package.json」ファイルに記述されていて、間接的に「vue-cli-service serve」が呼ばれる設定になっています。

package.json

{
  "name": "test-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
  "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...

「npm run serve」コマンドは、プロンプトが戻らず待機し続けます。その過程で、ブラウザで表示されている「http://localhost:8080/」にアクセスするとVue.jsプロジェクトが表示されます。待機状態を終了させるにはCtl+Cを押します。

アプリの構成

先のテストアプリの核の部分はプロジェクトのルートフォルダ¥src¥components¥HelloWorld.vueとなっています。このファイルは、エントリーポイントとなる、ルートフォルダ¥src¥App.vueファイルで、importされ利用されています。

これらのvueファイルの中身は、templete、script、styleタグからなる不完全なHTMLファイルのような構造になっています。

この構造は単一ファイルコンポーネント(SFC)と呼ばれ、Vue.jsの特徴のひとつです。templeteに表示用のHTML、scriptに変数や関数、styleにcssを記述するようになっていて、ひとつのファイルでひとつのコンポーネントが完結するスタイルです。

App.vueファイルでは、HelloWorld.vueファイルをインポートして、componentsとして定義して、テンプレートに記述することでその箇所にコンポーネントを表示するように設定されています。

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>

HelloWorlde.vue側では、propertyとして、親コンポーネントからmsgプロパティを受け取るように設定したうえで、それをテンプレートに組み込んだコンポーネントとなっています。style内で「scoped」を設定することにより、ここでのCSSでの設定を他に影響させないようにしています。

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
     ...
   </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

ビルド

本番環境ではビルドをして、先に紹介したようなファイル群をまとめます。

必須ではないですが、ビルドする前に「npm run lint」を実行してエラーの確認をします。これも先のserve同様に、npmを使って間接的に「vue-cli-service lint」を呼ぶコマンドとなっています。

PS> npm run lint

> test-project@0.1.0 lint
> vue-cli-service lint

 DONE  No lint errors found!

エラーがなければbuildします。これもnpm経由です。

PS> npm run build

> test-project@0.1.0 build
> vue-cli-service build

All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


-  Building for production...

 DONE  Compiled successfully in 26012ms

  File                              Size      

  dist\js\chunk-vendors.cb848940.js 75.76 KiB
  dist\js\app.1aad6ed9.js           13.06 KiB
  dist\css\app.2cf79ad6.css         0.33 KiB

  Images and other types of assets omitted.
  Build at: 2022-06-21T07:21:00.538Z - Hash: feaf1067c1ee3a9c - Time: 26012ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

メッセージからもわかるように、ビルドの生成物はデフォルトではルートフォルダのdistサブフォルダに出力されます。

distファイルの中身をそのまま、webサーバーのドキュメントルートに持っていけば意図したように表示されますが、webサーバーの子フォルダに入れるとVue.jsのコンテンツが表示されず真っ白な画面になります。

1ft-seabass.jp.MEMOにその対象方法が掲載されていました。参考になりました。ありがとうございました。

プロジェクトのルートフォルダにある、vue.config.jsファイルに次のようにpublicPath記述を加えて相対パスに変更する必要があるそうです。

HelloWorld.vue

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "./"
})

投稿:2021/12/11 - 更新: facebookで共有 twitterで共有 pocketに追加

バージョン3系のVue.js環境を構築

環境の構築

テスト稼働

アプリの構成

ビルド

close close

投稿:2021/12/11 - 更新:　