Vue.js,Node.js学習スタート
Vue jsとは
「ユーザーインターフェースの構築のための JavaScript フレームワーク。」
※フレームワーク：システム開発がしやくすくなるようにつくられた、プログラムなどのひな形のこと
Node jsとは
「Node.jsは、サーバーサイドJavaScriptと呼ばれる実行環境のひとつ」
※サーバーサイド：サーバの中で動くプログラム
ダウンロードしよう
今回使用するモノ
- コマンドプロンプトもしくはターミナル
- VScode
【node jsのダウンロード】
各種、OSに対応しものをダウンロードする
【インストール確認コマンド】
node -v
npm -v
コマンドプロンプトもしくはターミナル上で、バージョンが出たら正常にインストールできてるからOK！
次に、Vue.jsを便利にするための、vue-cliをインストールする
インストールするにあたって、npmをつかう必要があるので、必ずnpm -vを確認して、ダウンロードできているか確認しよう！
npm install -g @vue/cli
hello-worldの表示させよう！
コマンドプロンプトもしくはターミナル上で自分が作業したいディレクトリをつくり、そのディレクトリに移動する
mkdir 自分が作成したいディレクトリ名
cd 上記で作ったディレクトリ名
ディレクトリを移動したら、下記のコマンドを打ち、vueで動作するディレクトリを作成する
vue create hello-world
上記を打つと、ローカルのディレクトリをつくってよいかきかれるので、「Y」で次にすすむ。
次に進むとDefault(Vue3,Vue2)かマニュアルがを聞かれるのでどちらかを選択する。
（今回はVue3を選択）
コマンドプロンプトもしくはターミナル上でhello-worldのディレクトリに移動(cd hello-world)し、vue.jsが起動する下記コマンドを実行
npm run serve
実行が成功すると、App running at: 配下にlocalhostとnetworkのURLがでてくるので、それのどちらかをブラウザの検索窓にコピペするとVueのWelcome画面が現れる！
Welcome画面表示後、一旦バッチを止める。
次に、VScodeでVeturという拡張機能をインストール。
インストール後、hello-world > src > components 配下に（もともとのHelloWorld.vueとは別に）NewPage.vueファイルを新規作成し、コードを記述する。
<template>
<div class="helloworld">
{{ msg2 }}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
msg2: String
}
}
</script>
また、hello-world > src > App.vueファイルのコードを編集する。
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcom to Your Vue.js App"/>
+ <HelloWorld msg2="HelloWorld"/>
</template>
<script>
//import HelloWorld from './components/HelloWorld.vue'
+ import HelloWorld from './components/NewPage.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
.
.
再度、コマンドプロンプトもしくはターミナルで、サーバーを立ち上げて（npm run serve）以下のように表示出来たら成功！
参照サイト等
Vue.js ドキュメント
【入門】Node.jsとは？利用シーンやメリットなどをわかりやすく解説
Vue.js,Node.jsについて
Node.jsとは？
フレームワークとは
サーバーサイドとは
Vue.jsとVueCLIは違う！CDN版から書き換えて理解してみる
Vue CLIを「npm run serve」で立ち上げた後、Macのターミナルでの終了方法がわかりません。
Discussion