Help us understand the problem. What is going on with this article?

Vue.jsの環境構築

More than 1 year has passed since last update.

はじめに

Vue.jsの勉強をした際に、環境構築をしたので、手順を残しておきます。

構築する環境

macOS Mojave 10.14.5
nodebrew: 1.0.1
npm: 6.9.0
node: 12.6.0
vue: 3.9.2

nodebrewのインストール

まずはNode.jsをインストールするために、nodebrewをインストールします。
nodebrewとはNode.jsのバージョンを管理するツールです。

nodebrewのインストールにはhomebrewが必要なのでインストールしておきます。
こちらは以前の記事内で書いているので省略します。
MacでRubyの環境構築(Homebrew、rbenv)

homebrewインストール後に、以下のコマンドを実行してnodebrewをインストールします。

brew install nodebrew

インストール後に以下の内容を.bash_profileファイルに追記します。
(.bash_profileは環境によります。)

export PATH=$HOME/.nodebrew/current/bin:$PATH

追記後、以下のコマンドを実行しておきます。

source .bash_profile

以下のコマンドを実行して、バージョン情報などが表示されたら成功です。

nodebrew help

そのままでは、Nodeのインストールができないので、以下のコマンドを実行しておきます。

nodebrew setup

Node.jsのインストール

nodebrew ls-remoteでインストール可能なバージョン一覧、nodebrew lsで現在インストールしているバージョン一覧を確認できます。

$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
v0.1.16   v0.1.17   v0.1.18   v0.1.19   v0.1.20   v0.1.21   v0.1.22   v0.1.23
v0.1.24   v0.1.25   v0.1.26   v0.1.27   v0.1.28   v0.1.29   v0.1.30   v0.1.31
v0.1.32   v0.1.33   v0.1.90   v0.1.91   v0.1.92   v0.1.93   v0.1.94   v0.1.95
v0.1.96   v0.1.97   v0.1.98   v0.1.99   v0.1.100  v0.1.101  v0.1.102  v0.1.103
v0.1.104  

v0.2.0    v0.2.1    v0.2.2    v0.2.3    v0.2.4    v0.2.5    v0.2.6    

v0.3.0    v0.3.1    v0.3.2    v0.3.3    v0.3.4    v0.3.5    v0.3.6    v0.3.7
v0.3.8    

v0.4.0    v0.4.1    v0.4.2    v0.4.3    v0.4.4    v0.4.5    v0.4.6    v0.4.7
v0.4.8    v0.4.9    v0.4.10   v0.4.11   v0.4.12   

v0.5.0    v0.5.1    v0.5.2    v0.5.3    v0.5.4    v0.5.5    v0.5.6    v0.5.7
v0.5.8    v0.5.9    v0.5.10   

v0.6.0    v0.6.1    v0.6.2    v0.6.3    v0.6.4    v0.6.5    v0.6.6    v0.6.7
v0.6.8    v0.6.9    v0.6.10   v0.6.11   v0.6.12   v0.6.13   v0.6.14   v0.6.15
v0.6.16   v0.6.17   v0.6.18   v0.6.19   v0.6.20   v0.6.21   

v0.7.0    v0.7.1    v0.7.2    v0.7.3    v0.7.4    v0.7.5    v0.7.6    v0.7.7
v0.7.8    v0.7.9    v0.7.10   v0.7.11   v0.7.12   

v0.8.0    v0.8.1    v0.8.2    v0.8.3    v0.8.4    v0.8.5    v0.8.6    v0.8.7
v0.8.8    v0.8.9    v0.8.10   v0.8.11   v0.8.12   v0.8.13   v0.8.14   v0.8.15
v0.8.16   v0.8.17   v0.8.18   v0.8.19   v0.8.20   v0.8.21   v0.8.22   v0.8.23
v0.8.24   v0.8.25   v0.8.26   v0.8.27   v0.8.28   

v0.9.0    v0.9.1    v0.9.2    v0.9.3    v0.9.4    v0.9.5    v0.9.6    v0.9.7
v0.9.8    v0.9.9    v0.9.10   v0.9.11   v0.9.12   

v0.10.0   v0.10.1   v0.10.2   v0.10.3   v0.10.4   v0.10.5   v0.10.6   v0.10.7
v0.10.8   v0.10.9   v0.10.10  v0.10.11  v0.10.12  v0.10.13  v0.10.14  v0.10.15
v0.10.16  v0.10.17  v0.10.18  v0.10.19  v0.10.20  v0.10.21  v0.10.22  v0.10.23
v0.10.24  v0.10.25  v0.10.26  v0.10.27  v0.10.28  v0.10.29  v0.10.30  v0.10.31
v0.10.32  v0.10.33  v0.10.34  v0.10.35  v0.10.36  v0.10.37  v0.10.38  v0.10.39
v0.10.40  v0.10.41  v0.10.42  v0.10.43  v0.10.44  v0.10.45  v0.10.46  v0.10.47
v0.10.48  

v0.11.0   v0.11.1   v0.11.2   v0.11.3   v0.11.4   v0.11.5   v0.11.6   v0.11.7
v0.11.8   v0.11.9   v0.11.10  v0.11.11  v0.11.12  v0.11.13  v0.11.14  v0.11.15
v0.11.16  

v0.12.0   v0.12.1   v0.12.2   v0.12.3   v0.12.4   v0.12.5   v0.12.6   v0.12.7
v0.12.8   v0.12.9   v0.12.10  v0.12.11  v0.12.12  v0.12.13  v0.12.14  v0.12.15
v0.12.16  v0.12.17  v0.12.18  

v4.0.0    v4.1.0    v4.1.1    v4.1.2    v4.2.0    v4.2.1    v4.2.2    v4.2.3
v4.2.4    v4.2.5    v4.2.6    v4.3.0    v4.3.1    v4.3.2    v4.4.0    v4.4.1
v4.4.2    v4.4.3    v4.4.4    v4.4.5    v4.4.6    v4.4.7    v4.5.0    v4.6.0
v4.6.1    v4.6.2    v4.7.0    v4.7.1    v4.7.2    v4.7.3    v4.8.0    v4.8.1
v4.8.2    v4.8.3    v4.8.4    v4.8.5    v4.8.6    v4.8.7    v4.9.0    v4.9.1


v5.0.0    v5.1.0    v5.1.1    v5.2.0    v5.3.0    v5.4.0    v5.4.1    v5.5.0
v5.6.0    v5.7.0    v5.7.1    v5.8.0    v5.9.0    v5.9.1    v5.10.0   v5.10.1
v5.11.0   v5.11.1   v5.12.0   

v6.0.0    v6.1.0    v6.2.0    v6.2.1    v6.2.2    v6.3.0    v6.3.1    v6.4.0
v6.5.0    v6.6.0    v6.7.0    v6.8.0    v6.8.1    v6.9.0    v6.9.1    v6.9.2
v6.9.3    v6.9.4    v6.9.5    v6.10.0   v6.10.1   v6.10.2   v6.10.3   v6.11.0
v6.11.1   v6.11.2   v6.11.3   v6.11.4   v6.11.5   v6.12.0   v6.12.1   v6.12.2
v6.12.3   v6.13.0   v6.13.1   v6.14.0   v6.14.1   v6.14.2   v6.14.3   v6.14.4
v6.15.0   v6.15.1   v6.16.0   v6.17.0   v6.17.1   

v7.0.0    v7.1.0    v7.2.0    v7.2.1    v7.3.0    v7.4.0    v7.5.0    v7.6.0
v7.7.0    v7.7.1    v7.7.2    v7.7.3    v7.7.4    v7.8.0    v7.9.0    v7.10.0
v7.10.1   

v8.0.0    v8.1.0    v8.1.1    v8.1.2    v8.1.3    v8.1.4    v8.2.0    v8.2.1
v8.3.0    v8.4.0    v8.5.0    v8.6.0    v8.7.0    v8.8.0    v8.8.1    v8.9.0
v8.9.1    v8.9.2    v8.9.3    v8.9.4    v8.10.0   v8.11.0   v8.11.1   v8.11.2
v8.11.3   v8.11.4   v8.12.0   v8.13.0   v8.14.0   v8.14.1   v8.15.0   v8.15.1
v8.16.0   

v9.0.0    v9.1.0    v9.2.0    v9.2.1    v9.3.0    v9.4.0    v9.5.0    v9.6.0
v9.6.1    v9.7.0    v9.7.1    v9.8.0    v9.9.0    v9.10.0   v9.10.1   v9.11.0
v9.11.1   v9.11.2   

v10.0.0   v10.1.0   v10.2.0   v10.2.1   v10.3.0   v10.4.0   v10.4.1   v10.5.0
v10.6.0   v10.7.0   v10.8.0   v10.9.0   v10.10.0  v10.11.0  v10.12.0  v10.13.0
v10.14.0  v10.14.1  v10.14.2  v10.15.0  v10.15.1  v10.15.2  v10.15.3  v10.16.0


v11.0.0   v11.1.0   v11.2.0   v11.3.0   v11.4.0   v11.5.0   v11.6.0   v11.7.0
v11.8.0   v11.9.0   v11.10.0  v11.10.1  v11.11.0  v11.12.0  v11.13.0  v11.14.0
v11.15.0  

v12.0.0   v12.1.0   v12.2.0   v12.3.0   v12.3.1   v12.4.0   v12.5.0   v12.6.0


io@v1.0.0 io@v1.0.1 io@v1.0.2 io@v1.0.3 io@v1.0.4 io@v1.1.0 io@v1.2.0 io@v1.3.0
io@v1.4.1 io@v1.4.2 io@v1.4.3 io@v1.5.0 io@v1.5.1 io@v1.6.0 io@v1.6.1 io@v1.6.2
io@v1.6.3 io@v1.6.4 io@v1.7.1 io@v1.8.1 io@v1.8.2 io@v1.8.3 io@v1.8.4 

io@v2.0.0 io@v2.0.1 io@v2.0.2 io@v2.1.0 io@v2.2.0 io@v2.2.1 io@v2.3.0 io@v2.3.1
io@v2.3.2 io@v2.3.3 io@v2.3.4 io@v2.4.0 io@v2.5.0 

io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1 
$ nodebrew ls
v12.6.0

current: v12.6.0

実際にインストールする場合は、以下のコマンドを実行します。

nodebrew install-binary "バージョン"
(例:nodebrew install-binary v12.6.0)

また、nodebrew install-binary latestとすることで、最新バージョンをインストールすることができます。
次に、使用するバージョンを指定します。

nodebrew use "バージョン"
(例:nodebrew use v12.6.0)

こちらも、nodebrew use latestで最新バージョンを指定できます。
最後に、以下のコマンドを実行して、バージョンが表示されたら成功です。

node -v

また、npmも同時にインストールされていますので、以下のコマンドでバージョンを確認できます。

npm -v

vue-cliのインストール

vue-cliとは、Vue.jsの雛形などを作ってくれる開発ツールです。
以下のコマンドを実行してインストールします。

npm install -g @vue/cli

以下のコマンドを実行して、Vueのバージョンが表示されたら成功です。

vue -V

プロジェクトの作成

以下のコマンドを実行すると、Vue.jsのプロジェクトを作成できます。

vue create "プロジェクト名"
(例:vue create sample)

質問を聞かれますので、デフォルトとマニュアルを選択できます。
デフォルトであれば、そのままプロジェクトを作成してくれます。マニュアルの場合は、いくつか質問をされますので答えていきます。

プロジェクト作成後は、作成されたディレクトリに移動後、npm run serveを実行して、プロジェクトを起動します。

cd  sample
npm run serve

以下のような表示が出ますので、http://localhost:8080/にアクセスすることで、雛形のページを表示できます。

  App running at:
  - Local:   http://localhost:8080/ 

以下のようなページが表示されます。
image.png

minuro
ゲーム作りやWeb系を頑張ろうと思っている初心者です Ruby on Rails/Vue.js勉強中
https://minuro.github.io/portfolio/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした