Vue CLIを使ってみる

Vue.jsのアプリケーション開発環境として、Vue.js公式から提供されているコマンドラインツール「Vue CLI」を簡単に触ってみます。

インストール

インストールする前の注意点として、Vue CLIのバージョン3以降はパッケージ名が「vue-cli」から「@vue/cli」に変更されました。
今回は「@vue/cli」を使用しますが、過去に「vue-cli」をグローバルにインストールしている場合、先にアンインストールする必要があります。

npmの場合
npm uninstall vue-cli -g

yarnの場合
yarn global remove vue-cli

また、Vue CLIのバージョン4.xではNode.jsのバージョン8.9以降が必要(10以降を推奨)となっていますので、インストール前にご確認ください。

実際にインストールを行ってみます。
コマンドで下記を実行します。

npmの場合
npm install -g @vue/cli

yarnの場合
yarn global add @vue/cli

これでグローバルにVue CLIがインストールできました。
インストール後、下記を実行してバージョン情報が表示されたらOKです。

vue --version

プロジェクトの作成

次にプロジェクトを作成します。

vue create プロジェクト名

プリセットの選択が表示されます。
デフォルトでは以下のような選択肢が表示されるかと思います。

? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

今回はVue2 + Babel + ESLint を選択しました。

少し待つとプロジェクトの作成が完了します。
作成したプロジェクトディレクトリに移動後、下記コマンドを実行します。

npm run serve

http://localhost:8080/ にアクセスすると、ページの表示を確認できました。

ディレクトリ構造

プロジェクトディレクトリ内の構造は以下のようになっています。

  • node_modules
  • public
    • favicon.ico
    • index.html
  • src
    • assets
      • logo.png
    • components
      • HelloWorld.vue
    • App.vue
    • main.js
  • .gitignore
  • babel.config.js
  • jsconfig.json
  • package.json
  • package-lock.json
  • README.md
  • vue.config.js

srcフォルダは主に開発用のファイルや、webpackでまとめるファイルを配置します。
main.jsがメインになるjsファイルで、デフォルトの内容は以下のようになっています。

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

Vue.config.productionTip = false

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

上記の2行目で読み込んでいるファイルがsrc/App.vueで、内容は以下のようになっています。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</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>

assetsフォルダは画像やCSSファイルなどのアセットファイル、componentsフォルダはコンポーネントファイルを配置します。
componentsフォルダ内にデフォルトで配置されているHelloWorld.vueの内容は以下のようになっています。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    ~ 略 ~
  </div>
</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>

publicフォルダはfaviconやrobots.txtのように、webpackでまとめないファイル(そのままの形を保持する必要があるファイル)などを配置します。
index.htmlはデフォルトの中身は以下のようになっています。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

15行目のコメントアウトの部分に、webpackでまとめたjsファイルが入ります。

ビルド

最後にビルド機能を試してみます。
下記コードを実行します。

npm run build

distディレクトリにビルドされたファイルが生成されました。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年6月
 1234
567891011
12131415161718
19202122232425
2627282930