1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.js始め方~ちゃんとインストールする方法~

Last updated at Posted at 2020-10-20

1000番煎じくらいだけど社内用に15分で作ったやつをとりあえず残します

Node.js をインストール

ここからインストーラーをダウンロード

自分の OS のインストーラーを選択

LTS の方を選んだ方がいい!

install_node.png

Mac の場合ターミナルで以下のコマンドを実行

brew install node

vue-cli をインストール

コマンドプロンプト、ターミナルを起動して以下のコマンドを実行

これ以降はコマンドプロンプト、ターミナルで手順を行う

npm i -g @vue/cli

早速プロジェクト作成!

適当なフォルダ/ディレクトリに移動して以下のコマンドを実行

vue create new-project

new-project は適当な名前で OK

なんか色々質問されるけど適当に Enter 押しとけば OK!

ローカルサーバーをうごかす

作成されたフォルダに移動

cd new-project

サーバー起動!

npm run serve

アクセスしてみる

http://localhost:8080/

vuelocal.png

なんか適当にいじってみる

HelloWorld.vue を開く

new-project/src/App.vue

4 行目の msg の中身を書き換える

- <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <HelloWorld msg="Vue.js始めてみた!!"/>

vuestart.png

勝手にブラウザが変更される!

おわり

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?