vue.jsでプロジェクト作成して実行・表示する

vue.jsはじめました。

Angularをやっていたのですが、現状開発規模は小さい予定なので、学習コストが低いとのこともあり、vue.jsをはじめてみました！

ということで、ことはじめにプロジェクト作成→実行までです！

vue-cliインストール

>npm install -g vue-cli
>vue --version
2.9.6

プロジェクト作成

適当にGitHubでリポジトリを作成/Cloneしておく。

ぼくが作成したものは、コチラにコミットしていきます。

github.com

その中にプロジェクトを作成。

>vue init webpack vue-test02

? Project name vue-test02
? Project description Vue.js Test project
? Author user <mail-address@gmail.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Pick a test runner karma
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

はじめはこちらを参考に作ったのですが、こっちの記事を読んで、まずは無駄なもののないフラットな状態でやったほうがいいと感じました。

なのでvue-routerやテスト類について、全てNoにしています。

最終的にこんな感じで表示されればOK。

# Project initialization finished!
# ========================

To get started:

  cd vue-test02
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

GitHubで言語をNode.jsにしておいたら、gitignoreはデフォルトで一通りいらないのを排除してくれている模様

なので、このままAdd/Commit/Pushしても大丈夫そう！

実行する

作成後に表示されるコマンドを叩けば、プロジェクトが実行されます。

フォルダの中に入って、実行をするだけです。

> cd vue-test01
> npm run dev

実行して待ちます。

 DONE  Compiled successfully in 8324ms                                                          13:32:23

 I  Your application is running here: http://localhost:8080

こんな感じの表示が出るので、「http://localhost:8080」にアクセス！

OKですね！

参考

コチラを参考にしました。ありがとうございました！

qiita.com

qiita.com

www.shookuro.com

あとがき

最近のHelloWrold的なのかんたんすぎるだろ……ビビるわ……

なにか作れるようになるまで、頑張っていこうと思います。