【Vue.js】npmでvueのプロジェクトをHello Worldするまで

【Vue.js】npmでvueのプロジェクトをHello Worldするまで

はじめに

コジマです。

環境構築って大事なんだけど、あまりやらないから忘れちゃうのよね。

忘れてもいいように手順を残しておく。

1:nodeのインストール

https://nodejs.org/ja/
からnodeのインストールをする。
npmはnodeをインストールすると勝手についてくる。

npm(Node Package Manager)だからね!

設定はとりあえずデフォルト。

2:VSCodeのインストール

https://azure.microsoft.com/ja-jp/products/visual-studio-code/
からVSCodeをインストール。

これはエディタなので、みんなのお好みでよい。
個人的にVSCodeは使いやすくて気に入っています。

3:vue-cliのインストール

https://cli.vuejs.org/guide/installation.html

npm install -g @vue/cli

を実行。

vueコマンドが使えるようになる。

4:プロジェクトを作成する

C:/workの下にプロジェクトフォルダを作りたいからその下準備

cd c:\
mkdir work
cd work

https://cli.vuejs.org/guide/creating-a-project.html#vue-create

vue create hello-world

を実行。

こんな感じでプロジェクトフォルダができる

PS C:\work\hello-world> dir


    ディレクトリ: C:\work\hello-world


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2021/01/25      1:14                node_modules
d-----        2021/01/25      1:13                public
d-----        2021/01/25      1:13                src
-a----        2021/01/25      1:13            231 .gitignore
-a----        2021/01/25      1:13             73 babel.config.js
-a----        2021/01/25      1:14         464365 package-lock.json
-a----        2021/01/25      1:13            856 package.json
-a----        2021/01/25      1:14            323 README.md

5:プロジェクトを起動する

以下のコマンドを実行

cd hello-world
npm run serve

localhost:8080にアクセスして以下のようなページが表示されればOK

さいごに

こういうの初歩の初歩なんだけど、新しいPCゲットしたついでに環境を作って手順をまとめることにしました。

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

システムエンジニアのつらい部分のあるあるなんかをエンタメにしたチャンネルを作りました。
チャンネルはこちら
つらい部分も楽しくなればと思っているのでよかったらチャンネル登録や高評価してくれたらうれしいです。

以上、コジマでした。


Vue.js/Nuxt.jsカテゴリの最新記事