vue.js入門2
はじめに
前回に続きvue.jsの入門を続けてみます。
参考文献
積読していた以下を使って進めます。 Vue.js&Nuxt.js超入門 | 掌田津耶乃 | 工学 | Kindleストア | Amazon
設定
書籍の記載によるとVue CLIを利用する際にVue cli-service-globalというものも必要なようなのでこれを インストールします。
https://www.npmjs.com/package/@vue/cli-service-global
Vue cli-service-globalのインストール
インストール方法は以下コマンドを実行します。
npm install -g @vue/cli-service-global
Hello APPを作る
ようやくフロントエンドを作成していきます。
vueファイルを用意
任意のディレクトリでapp.vueというファイルを作成します。 ファイルは以下のようにしました。
<template>
<div id="app">
<h1>Hello!</h1>
<p>This is message...</p>
</div>
</template>
※通常のHTMLとは異なる、のタグの中に必要なものを書くみたいなイメージですね。
実行
作成したファイルを実行します。以下で実行できます。 ※作成したvueファイルがあるディレクトリで実行します。
vue serve
上記コマンドを実行するとwebサーバが起動するという感じのようです。
以下にアクセスすると作成したHTMLが表示されるはずです。 http://localhost:8080/
ここでは以下のように表示されたのでOK。
ページのソースをみてみると以下のようになっていました。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Vue CLI App</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
app.vueで書いた内容以外のソースが生成されているのでこの部分がvueが行っていることのようです。
ここまでで、簡単なhelloAPPを作ることができました。 ※以下にuploadしました。 github.com
次により大きい単位のAPPを作ってみたいと思います。
プロジェクトを作る
前回も行ったのですが改めて作成していきます。
コマンド
vue create hello_app
プリセットの入力
以下の選択はプリセットというものを指定するということになるようです。
前回はVue 3を選択しましたが、今回はManuallyで進めてみます。
Please pick a preset
Manually select featuresを選択します。
Check the features needed for your project(組み込む項目の選択)
以下のような選択肢が表示されました。
ここでは以下画像のまま進めます。
※デフォルトでBabel、Linter/Formatterが選択されていました。
Choose a version of Vue.js that you want to start the project with(Vueのversion選択)
vueのversion選択をするようです。ここでは3.xを選択します。
Pick a linter / formatter config(linter/formatter選択)
組み込むlinter/formatterを選択します。ここではそのまま「ESLint with error prevention only」を選択
Pick additional lint features:(lintの追加設定)
Lint on saveで進めます。
Where do you prefer placing config for Babel, ESLint, etc.?(BabelやESLintなどの設定はどこに置くのがいいですか？)
In dedicated config filesを選択します。
Save this as a preset for future projects?
ここまでに選択したものを保存するかどうかという感じなので、ここではNを選択します。
プロジェクト実行
以下コマンドを実行し動作確認をします。
npm run serve
以下にアクセスし表示されるかを確認します。 http://localhost:8080/
前回と結果は変わらないのですが、以下の画面がでているのでOK。
作成されたプロジェクトの中身を確認する。
書籍でも解説があるのですが、自分でも確認してみます。
ファイル一覧
以下のディレクトリ、ファイルが作成されていました。 * README.md * babel.config.js * node_modules * package-lock.json * package.json * public * src
とりあえず直近で使っていきそうなのが、publicフォルダと、srcフォルダの２つとの ことなので、他はおいおいみていければ良いかなと思います。
プロジェクトのビルド
実際にWebサーバに配置して公開するときは公開用のファイルを作成します。 その際のコマンドは以下を実行するようです。
npm run build
上記の実行に成功したら、「dist」というフォルダが作成されるようです。 実行時にコンソールに出力されるログの中に確かにdistというものが見えます。
⠸ Building for production... DONE Compiled successfully in 8714ms 21:32:34 File Size Gzipped dist/js/chunk-vendors.18d432dd.js 82.65 KiB 30.98 KiB dist/js/app.9b8908c6.js 4.52 KiB 1.61 KiB dist/css/app.fb0c6e1c.css 0.33 KiB 0.23 KiB Images and other types of assets omitted. DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
lsしてみると実際にdistができています。
ls README.md dist package-lock.json public babel.config.js node_modules package.json src
このdistディレクトリの配下をさらにみてみると以下のようになっていました。
ls css favicon.ico img index.html js
上記が公開用のディレクトリになるので、ここに必要なものを用意すれば良いということになります。
まとめ
今回は簡単なvueファイルを作成して、その動作を確認する方法と 前回行ったプロジェクトを作成する方法をもう一度やり、作成されたファイルを見てみました。
次はようやく、基本的なコード部分に触れていこうと思います。
