Help us understand the problem. What is going on with this article?

vue.jsを初めて触ってみたので、環境構築の整理

More than 1 year has passed since last update.

vue.jsを初めて触ってみたので、環境構築の整理

vue.jsを触った目的

これまではJavascriptのフレームワークとしてReactを中心に触っていた。しかし、最近周りのエンジニアがvueを使い出したことと、業務においてもvueを使うことが出てくるようになったため、1からvueを学習しておこう、という経緯。
とはいっても、同じJavasciptのフレームワークであるので、学習コストは普通よりかは削減されるだろうと推測している。
また、Reactよりも容易にコードがかけるという点からも、がっつり短期間で集中すれば問題ないと判断。

そもそもvue.jsとは?

vue.js公式サイト

vue.jsは、Javascriptのオープンソースのフレームワークであり、以下の特徴を持つ。
- リアクティブプログラミング:様々なデータが更新されると、自動的にそれらのデータを利用している画面表示も更新される。
- コンポーネントシステム:Reactでもお馴染みのやつ。部品として簡単に作成が可能。それを配置すれば自動的に必要な表示や処理ができる。
- テンプレート:実際に利用するときに、「コンポーネントとして定義されたプログラム」としてではなく、HTMLの延長上として記述ができる。

vue.jsの利用方法

CDN(Content Delivery Network)を使用

一般的なHTMLファイルの<head>に、<script>として、以下のURLを追加する。

src="https://unpkg.com/vue"

このアドレスは、多くのWebサイトで利用されているコンテンツの配信を行うCDNと呼ばれるサイトである。

vueの基本コード

<!DOCTYPE html>
<html>
<head>
  <title>Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message }}
  </div>

  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  })
  </script>
</body>
</html>

vueでプロジェクト開発

Node.jsのインストール

ここでは、詳しいやり方は省略する。

Vue CLIをインストールする。

Vue.js開発に必要なソフトウェアをインストールする。

$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global

アプリケーションを作成する

任意の場所にフォルダを作成し、その中に端末しが.vueのファイルを作成する。
以下にサンプルコードを記載しておく。

<template>
  <div id="app">
    <h1>Hello!</h1>
    <p>This is message...</p>
  </div>
</template>

作成したあと、対象フォルダに移動し、コマンドを実行する。

$ vue serve

プロジェクトで作成する場合

  • プロジェクト:プログラムの作成に必要なスクリプトファイル、イメージファイル、ライブラリ、フレームワークなどをまとめて管理するためのもの。

実際にサンプルプロジェクトを作成してみる。

$ vue create sample_app

Vue CLI v3.9.3
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

なんか色々と出てくるが、何もこだわりがなければ、基本的にdefault (babel, eslint)を選択すれば良い。
そうすると、プロジェクトが完成するので、実際に実行して表示してみる。
ちなみに、自分はYarnを用いて開発しているので、Yarnコマンドを利用する。

$ yarn serve

これで表示がされるはず。

プロジェクトの中身について

必要なものだけを説明する。
- node_modules: npmで管理されるmodule類がまとまってある。
- public: 公開フォルダ。HTMLやCSSなど公開されるファイル類が保管されてある。
- src: Vue.jsで作成したファイルなどがまとまってある。

基本的にはpublicsrcを中心に編集する。場合に応じて、package.jsonbabel.config.jsを利用する場合もある。

プロジェクトのビルド

作成したプロジェクトをWebサーバにアップして公開するときには、公開用のファイルを作成する。

$ yarn build

これにより、distフォルダが作成される。

AkihideEgashira
Freelancer. UI / UX designer. Front-End Engineer(Vue.js). 使用言語: HTML5 / CSS3(Sass, Stylus) / JS(vanilla JS, jQuery, vue, React, node.js) 最近Golangも勉強中。
https://www.behance.net/shingashi09a9b
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away