Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@Takumi_Mori

フロントエンド初心者によるVue.jsスタートガイド

自分用のメモなので、任意追加します。
最終更新 : 2018/04/12

ネイティブアプリの開発者です。
フロントエンドの開発をすることになりましたが、全くわかりません。
開発に際して覚えることが多すぎるので、後から見返すためのメモがてら記事を書きます。

ちなみに、"$"マークから始まっている記述はCUIで入力するコマンドの先頭を明示するのに使われているだけなので、実際に入力する必要はありません。
例えば$ npm -vと書いてあった場合、実際に入力するのはnpm -vだけです。

mac向けです

開発準備

まずはvue-cliをインストールする必要がありますが、
完全にフロントエンドに触ってない場合は色々と前段階でインストールする必要があります。
すでにインストール済みのものがある場合は、任意スキップ。

Node.jsのインストール

参考 : node.jsのversionを管理するためにnodebrewを利用する
上記を参考に、nodebrewを使ってNode.jsをインストールする。
Node.jsをインストールすれば、npmが使えるようになります。

vue-cliをインストール

$ npm install --global vue-cli

開発環境

頑張ればあとはテキストエディタでも開発はできますが、
ちゃんとIDE使った方がいいです。

WebStormがVue.jsをサポートしていますのでおすすめ。
※日本語の代理店サイトの方を貼ってます。
https://samuraism.com/jetbrains/webstorm
私はWebStormを内包したIntelliJ IDEA Ultimateを使います。
https://samuraism.com/jetbrains/intellij-idea

新規作成

File > New > Project...
Static Web > Vue.js
スクリーンショット 2018-04-11 12.24.14.png

適当にプロジェクト名を付けたりしつつNext連打していればプロジェクトが作成されます。

エディタの設定

エディタは日本語化も可能ですが、わからないことをGoogleで調べるときに困難なので
基本的に英語のままで作業することをおすすめ。

日本語化の戻し方

Pleiadesを使って日本語化してしまったよ、という場合
ヘルプ > カスタム VM オプションの編集...
おおよそ最終行にあるjavaagentの先頭に#記号を追加してIDEを再起動

#-javaagent:/Users/xxx/Library/Preferences/IntelliJIdea2018.1/jp.sourceforge.mergedoc.pleiades/pleiades.jar

ナビゲータの表示

View > Tool Window > Project
View > Tool Window > Terminal
View > Tool Window > npm
スクリーンショット 2018-04-11 12.50.03.png
devをダブルクリックすれば起動できる

スクリーンショット 2018-04-11 12.51.14.png
ビルド結果のリンク部分をクリックすれば表示できる。
確認が終わったら停止も忘れずに

インデント設定

スクリーンショット 2018-04-11 12.54.47.png
.editorconfigのindent_sizeを変更する。普段は4で作業している。

標準設定の内容について

IDEから新規作成するときに色々とプラグインを使うかどうか、など聞かれているが
初学者がそんなものわかるわけがなくて、実際動かしてみると標準と違う構文になっててなんだこれはってなる

◆ 以下、色々書いてたけど、既に解説済みの記事があった。
vue-cliでVue.jsをインストールしたときのファイルについて

vue-router

スクリーンショット 2018-04-11 12.58.02.png
https://router.vuejs.org/ja/
 ぼんやりと学習してると、なんでわざわざこんな面倒な真似してリンクの制御なんてしないといけないんだ? 普通にアンカータグでいいじゃんとか思ってた。
 冷静に考えたらこうやってルーティングを制御しないと各フォルダにindex.htmlとか置いてフォルダの規則を厳密に制御してファイルの移動もできないとかはるかに窮屈な感じになるんだよね。
 ここで定義するだけで自由にファイルのリンクもできるし、動的なルートマッチングもできるとか素晴らしいじゃないか。

書式や書き方については解説されている記事が既に色々あるのと、テンプレート作成時にsrc/router/index.jsに作成されている物を参照。

ESLint

スクリーンショット 2018-04-11 12.58.38.png
静的検証ツール
括弧の使い方や、文法上の誤りなどの検知、スタイルの統一をするのに便利

vue-loader

https://vue-loader.vuejs.org/ja/
 テンプレートから作成したVue.jsのプロジェクトが、なんだか検索で出てくる情報と微妙に文法が違ってるような気がします。
 そう、vue-loaderの記法になってるからです。

 なぜvue-loaderを使うのか、それによる利点などは公式のgithubを読むのが手取り早いです。
 https://github.com/vuejs/vue-loader/tree/master/docs/ja

トランスパイルって頻繁に出てくる単語の意味は以下
- JavaScript(ECMAScript)のトランスパイル(transpile)とPolyfillの違いについてまとめてみた

Type Script

Vue.jsではversion2.5からType Scriptへのサポートが強化されています。
Type Script使わないと、型宣言が無いとか怖い。
https://jp.vuejs.org/v2/guide/typescript.html

20
Help us understand the problem. What is going on with this article?
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
20
Help us understand the problem. What is going on with this article?