Vue.js導入が意外とめんどくさかった

NPMとは

NodeJSのパッケージマネージャっていうことで多分間違ってないと思う。

問題はNPM自体がNodeJSがインストールされていないと動かないということである。

NodeJSをアンインストール

古いNodeJSがインストールされていると不具合の下なのでまずは削除してしまおう。

sudo apt remove --purge nodejs
sudo apt autoremove

以下のURLを参考にさせていただきました

https://askubuntu.com/questions/786015/how-to-remove-nodejs-from-ubuntu-16-04

最新のNodeJSのインストール

sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt install -y nodejs

以下のURLを参考にさせていただきました

https://www.phusionpassenger.com/library/walkthroughs/deploy/meteor/ownserver/nginx/enterprise/install_language_runtime.html

よくわからんおまじない

curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
udo apt update && sudo apt-get install yarn

NPMのインストール

sudo apt-get install nodejs-dev node-gyp libssl1.0-dev
sudo apt-get install npm

これでなんとかうまくいきました。

最後にNPMを最新にしておきましょう。

 npm update -g npm

Vueのインストール

npm install -g @vue/cli
vue create project

いろいろきかれますが、とりあえずエンターキーを連打すればオッケーです

cd project
npm run serve

こうするとサーバが起動するので、あとはURL(http://localhost:8080/)にアクセスすればOKです。

Vue.jsの導入に成功しました!!

Vue.jsの仕組みとは

以下のサイトで詳しく解説されていたので自分なりに理解してみました。

https://qiita.com/567000/items/dde495d6a8ad1c25fa43
ファイル意味
public/index.htmlソースHTML
dist/index.html配布HTML
src/main.jsソースJS
src/App.vueプログラムファイル

どうやら弄るHTMLはpublic/index.htmlだけでいいようです。

そこからビルドすることで配布用のindex.htmlがつくられるという仕組みというわけですね。

ちなみに、ビルドは以下のコマンドで行なえますので覚えておきましょう。

npm run build

まとめ

今回はVue.jsが動作することろまでまとめました。

以前からNode.JSは導入したかったのですがいっつもエラーがでて困っていたので今回解決できてよかったです。

次回は実際にNode.JSを使ってウェブページを作るところまで進めたいと思います。