LoginSignup
0
1

More than 5 years have passed since last update.

この記事は私の印象です。Vue.jsに使うのいい方法を共有したいです。
最初から開発できる「コードを書くこと」までのtutorialです。
もし、他の方法・質問・ご意見があったら、是非下にコメントしてください。
と間違えた日本語がある場合は申し訳ございませんでした。

バックグラウンド

この記事は、vue.jsを使っている人が最初の経験のためです。
その人を手伝うのためにこの記事を書きます。
多分最初からVue.jsを使う、ドキュメンテーションを読むすることがちょっと難しいと思います。
ドキュメンテーションには全部の説明が入るですから、最初セットアップのステップがあまり理解できません。
どこから?何が必要か?どうやって?いつこのものが使うか? この質問が出てくると思います
最初使っている人は多分複雑と思います。

これは全部自分からの経験です。最初は使う時いろいろなものを理解できませんでした。
他のサイトから調べますした。ちょっと時間がかかりました。そして理解することができる前に、自分で2~3回ぐらいセットアップしました。
ちょっと大変と思った、だからこの記事を書きます。
と他の問題も見つけた、vue 2 nativeを使ってtutorialがあまり見つけられません。

必要なもの

  • Node.js v8.11.0+ (NPM v5.6.0+)
  • vue-cli v3.0.0+

プロジェクト作る

プロジェクトを開始する、vue-cliを使います。
vue-cliを使うプロジェクトに開始する二つ方法があります。

  1. ターミナルを使います
    1. ターミナルに書きます vue create {project-name}
  2. vueのGUIを使います
    1. ターミナルに書きます vue ui

この記事はvueのGUIはおすすめします、なぜなら、vueのGUIはグラフィックとかボタンーがあります。もっと簡単に理解と思います。

作るステップ

1. オープンGUI UI

最初はターミナルに「vue ui」書きます。GUIページへリダイレクトまで待っています。
capture.png

2. プロジェクト作る

GUIを使用してプロジェクトを作るには、プロジェクトマネージャのクリエートタブを移動します。そして、「Create a new project here」のボタンをクリックして次のページに移動します
capture.png

3. プロジェクト詳細

プロジェクトフォルダ名を入力します、パッケージマネージャを選びます。
capture.png

4. プロジェクトプリセット

「Default preset」とか「Manual」を選びます。もし、「Default preset」を選んだならすぐにプロジェクトが作りします。もし、「Manual」を選んだなら次のページに移動します。
※「Manual」をおすすめします
capture.png

5. プロジェクトライブラリ

このページでは自分のプロジェクト設定のライブラリを選択できます。プロジェクト作ったあともこのページリストにないライブラリをインストールすることができます。
もし、「Router」をチェックしたなら次「Configuration」のページに移動します。
※「Babel、Router、Vuex」をチェックにおすすめします
capture.png

5.1. 「Router」のConfigurationページ

※Routerチェックしただけの画面
このオプションをチェックにおすすめします。でもチェックしなくても大丈夫です。プロジェクト作ったあともコードで変更ことができます。
capture.png

6. 設定を保存する

このモダールはさっきえらんだの設定を保存する。将来同じの設定プロジェクトのためです。もし保存しないなら、「Continue without saving」のボタンをクリックします。そしてインストールするに待っています。終わったなら次のページを移動します。
capture.png

7. Vue UIのダッシュボード

このページではサイドバーの部分5つのメニューがあります。プロジェクトをランするには、「Tasks」のボタンをクリックします。そして次のページに移動します。
もし他のライブラリをインストールしたいなら、「Dependencies」をクリックします。そしてDependenciesのページを移動します。
capture.png

8. Vue UIのTasksダッシュボード

プロジェクトを開始する「Run task」のボタンをクリックします。buildingを待っています。buildingあとは「Open app」のボタンをクリックすることができます。
capture.png

9. プロジェクトを開発することができます!

このページを見れば、すでにvueプロジェクトを設定は完成しました。開発することができます。コード書くことができます。
capture.png

ドキュメントリンク

  • Vue.js
  • Vue CLI 3
  • Vuex ー>おすすめのライブラリ
  • Vue Router ー>おすすめのライブラリ
  • Vuetify ー>他おすすめのライブラリ
  • axios ー>他おすすめのライブラリ
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1