【Vue-CLI】CentOS7でVue-CLI 3を使用する
こんにちは。かくすけです！
このブログの記事を書くのはいつぶりでしょうか
別にさぼってたわけじゃないですよ！！
かくすけWebページのフロント部分を強化しようとしていました。
しかしVue.js初心者過ぎて記事を書けるほどの進捗がなかったのです...
なにごとも最初はつらいものです。でも続けてればちょっとずつわかるようになるはず！
ということで内容にはいります。
上で述べた通り、最近はかくすけWebページのフロント部分を何とかしようとしていました。
以下のページを参考にVuetifyというUIフレームワークを導入しようとしていました。(普段はBootstrapを使ってます)
かくすけWebページはもともとwebpackerを使っているのでwebpackerを使ってVuetifyを導入する方法を探していました。
そして、調べている中で「webpackerは複雑だしあんまりおすすめしない」という記事をいくつか見かけたのです。
ここでVue-CLIに切り替えることに決めました！(まだ始めたばかりの今のうち！)
今回はVue-CLIを使う手順を書き残していきます！(今回こそ記事公開までたどり着きたい)
目次
Vue CLI インストール
まずはVue CLIそのものをインストールします。
次のコマンドを実行
$ npm install -g @vue/cli実行後にバージョンを確認すると
$ vue --versionYou are using Node v6.16.0, but this version of vue-cli requires Node >=8.9.
Please upgrade your Node version.あら、Nodeのバージョンが低いと怒られてしまいました。
以下のページを参考にNode.jsのバージョンを上げます。
すでにインストールしているnode.js用のファイルを削除して
$ rm /etc/yum.repos.d/nodesource-el.repoNode.jsそのものを削除
$ yum -y remove nodejsNode.jsのページを確認したところ、推奨版がv10.16となっていたので、v10.xのファイルを取得します。
nodejs.org
$ curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -そしてインストール
$ sudo yum install nodejsバージョンを確認すると正しくv10.16.0がインストールされていることが確認できました！
$ node -v
v10.16.0Vue-CLIバージョン確認リベンジ
$ vue --version
3.8.2今回はちゃんとバージョンを返してくれました♪
Vue-CLI を使ったアプリケーション作成
一番簡単なページを作りましょう！わくわく！
ここから先は次のページを参考にさせていただきます！
ではvue createでアプリケーションを作りましょう！
ここではプロジェクト名を「kakusuke-front」としました。
$ vue create kakusuke-front色々設定値をきかれますが今回は試しなのでとりあえず全部yで答えました。
参考ページではちゃんと設定値の意味も紹介されていますのでそちらを参考にされてください！
つらつらと処理が走り...
完了の表示が出ました！
表示された通りに以下二つのコマンドを実行します
$ cd kakusuke-front
$ npm run serveしばらく処理が走って
DONE Compiled successfully in 4522msみたいな文字列が表示されたらその下に表示されているURLにアクセスします。
やったね！デフォルトページが表示されました！
私は一度ページ開くのこけたのですが単純にポート8080を開放していないだけでした。
次のコマンドで開放後、無事にアクセスできました
# firewall-cmd --zone=public --add-port=8080/tcp --permanent
# firewall-cmd --reload私の場合はローカルの開発環境なのでぽんぽん開放してますが
ポート開放は気を付けて行いましょう。
