CentOs8に Vue.jsの環境を構築してHello Worldしてみる

CentOs8にVue.jsの環境の構築手順を記述してます。

環境

• OS  CentOS Linux release 8.0.1905 (Core)
• node V10.16.3
• npm 6.9.0
• @vue/cli 4.0.5

※centos8にnodeのインストール手順はこちら

Vue.jsとは

JavaScriptのフレームワークで、 MVVMフレームワークで、学習がしやすく、また、日本語ドキュメントも充実しています。

@vue/cliインストール

ローカルインストールにします

## インストール
npm i -D @vue/cli

## バージョン確認
npx vue --version

ローカルインストールとグローバルインストールについてはこちら

Vueプロジェクト作成

プロジェクトを作成する

## vueappというプロジェクトを作成
npx vue create vueapp

Firewall設定

外部からアクセスできるようにfirewallを設定します

## 3000番ポートを恒久的に許可
sudo firewall-cmd --add-port=8080/tcp --zone=public --permanent
 
## 再起動
sudo firewall-cmd --reload

起動

起動してみる

## 移動
cd vueapp

## 起動
yarn serve
or
npm run serve

ブラウザよりhttp://プライベートIP:8080にアクセスすると下記の画面が表示されます。

Hello Worldしてみる

vueapp/src内のApp.vueを下記のように編集する

<template>
  <div>
    <p>
      {{msg}}
    </p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

ブラウザよりhttp://プライベートIP:8080にアクセスすると下記の画面が表示されます。