【Web】Windows10でVue.jsのプロジェクトを作成&実行 (Web勉強記Vue.js編 3日目)

投稿日:2020年4月22日
最終更新日:2020年7月22日

Vue.jsのプロジェクトを作成してみる

前回はWindows10のノートPCにVue.jsをインストールした。今度はVue.jsのプロジェクトをつくって、ローカル環境で動かしてみる。

 

開発環境

Windows 10

node.js version 12.13.0

npm version 6.12.0

vue.js version 2.6.11

 

powershellでVue.jsのプロジェクトを作成

前回と同様、Windowsのpowershellを使ってVue.jsのプロジェクトを作ってみる。今回はvue_studyというディレクトリを作成し、そこをワークスペースとしてプロジェクトを作成する。

まずはpowershellからディレクトリを作成して、cdコマンドで移動する。

そして、以下のコマンドを実行してvue.jsのプロジェクトを作成する。今回のプロジェクト名は「vue-test」とした。

vue create vue-test

これでプロジェクトが実行できるはず…だったのだが、問題発生。「vue : このシステムではスクリプトの実行が無効になっているため、ファイル C:…を読み込むことができません。」というエラーが表示されてしまった。

調べてみると、powershellは実行ポリシーによってセキュリティ設定を変えられるが、初期設定ではもっとも厳しいポリシー(Restricted)になっているため、vueを実行することができない。くわしくはこちらの記事を参照。

そこで、vueの実行ポリシーをRemoteSignedまで緩めてみる。一通り操作が終わったら、実行ポリシーはRestrictedに戻しておいた方が安心。この状態で改めてcreateしてみる。

すると、以下のようにYour connection to the default npm registry seems to be slow.と表示された。これ使えばもっと早くインストールできるよ、とのことなので素直にyesを押してみる。するとPlease pick a presetと表示されたので、defaultを選択。

しばらく待つと、Successfully created project vue-testと表示された。無事にプロジェクト作成できたようだ。思ったより手こずったけど一安心。

 

Vue.jsのプロジェクトを実行してみる

この状態で、以下のコマンドを実行する。

cd vue-test

npm run serve

以下のように表示されれば無事に実行できている。

この状態で、Google ChromeなどのWebブラウザでローカルサーバーhttp://localhost:8080/にアクセスすると…

表示された!ちなみに、npmのrunを止める時はCtrl + Cを押せば「バッチ ジョブを終了しますか (Y/N)?」と出るので、yを押せばローカルサーバーを停止できる。

最終的にNetlifyにデプロイしようと思っているが、その前にローカルで少しいじってみたいと思う。続きはまた次回。

 

Web勉強記Vue.js編まとめ

この勉強記は以下のページにまとまっています。Vue.js以外の勉強記もあるので興味があればぜひ。

【Web】Vue.jsでHello Worldをやってみよう日記

 


投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください