Linux)上でVue.jsアプリを構築して立ち上げるところまでの手順をメモします。できるようになること以下のように、Vue.jsのデフォルト状態のアプリを作成して、ブラウザからアクセスして表示させます。Linux)のUbuntu上で行いました。6.1.0)はインストール済UbuntuにNode.jsをインストールする手順はnvmを使ってNode.jsをUbuntuにインストールする手順を見てみてください。(npmも一緒にインストールされます。CLIというツールを先にインストールします。コマンドプロンプトやPowerShellからWSL上のUbuntuにログインし、Ubuntu内で適当なフォルダに移動して以下のコマンドを実行します。CLIのインストールには、Node.jsのバージョンが8.9以上である必要があります。以降はすべてWSLのUbuntu上での作業になりますが、MacOSやLinux、仮想マシン上など他の環境でも同じ作業になると思います。27.319s以下のようにバージョンを確認することができます。2018年10月時点では、バージョン3系が最新になります。--version3.0.5なお、以下のようにvue-cliというパッケージ名でもインストールすることができますが、これは古いバージョンである2.9.6がインストールされ、deprecated(廃止予定)となっています。これについては公式サイトにおいてもアナウンスされています。9.706sもし間違ったバージョンをインストールした場合は、以下のようにアンインストールすることができます。2.415snpmコマンドについては以下が参考になりました。buildのような、便利なコマンドを使えるようにするために必要なcli-service-globalというパッケージもインストールしておきます。52.178s以上でVue.jsアプリ作成に必要な準備は完了です。CLIを利用してVue.jsアプリを作成していきます。CLIのcreateコマンドを使って対話形式で設定を行いながらVue.jsアプリを構築していきます。ここでは作成するアプリの名前をfirstappとしています。このアプリ名と同じフォルダ名が現在のフォルダ直下に作成され、その中に必要なファイルが用意されていきます。features)かを選択します。featuresで進めて行きます。featuresの設定内容は、次回でも同様の設定をすぐに行えるように最後に任意の名前で保存しておくことができます。features最初の設定項目は、作成するVue.jsアプリの機能についてです。以下のように、必要な機能を選択して進めます。矢印キーで必要な機能にカーソルをあわせてスペースキーで選択できます。選択したらEnterキーで次に進みます。Pre-processorsを選択しています。これらの選択肢についての説明は省略します。Routerのhisotryモードを使用するか確認されます。(Y/n)yhistoryモードについての説明はここでは省略します。以下が公式サイトの説明になります。pre-processorの設定です。StylusLinterの設定です。Linterとは、構文チェックを自動で行ってミスや推奨の書き方などを提示してくれるツールです。そこにスペースは入れるべきではないなども指摘してくれます。どこまで指摘するか、どういうルールに則って指摘するかは色々とあるためここで好みのLinterを選択します。PrettierLinterの実行タイミングの指定です。ファイル保存時かコミットした時かの選択です。commitBabelなどの設定ファイルをどこに保存するかの設定です。ここでは、package.jsonに保存します。package.jsonこれまでに行った設定を次回使えるよう保存しておくのかの確認です。(y/N)yを選択した場合は、任意の名前をつけてEnterします。次回createコマンドを使用した時に選択できるようになります。~/testまた、環境にもよりますが、以下のような確認がでる場合があります。これは、「オリジナルのnpmリポジトリだとダウンロードに時間かかりそうなので、より早いリポジトリからダウンロードするか?」という質問になります。早いリポジトリというのは、以下のURLを見て分かるようにリポジトリの場所がtaobao.orgとなっています。taobao.comは中国のAlibaba系列のWebショッピング会社のようですが、taobao.orgも同じ会社の管理下なのかについては未確認です。急ぎでもなければNoで拒否してオリジナルのリポジトリを使用してもOKと思います。(Y/n)Y完了すると、以下のようにVue.jsのプロジェクトの作成がはじまります。read-pkg@^4.0作成が完了すると、最終的に以下のようにターミナルに表示されます。yourself.上記に指示が書いてある通り、以下のコマンドを実行します。serveがVue.jsアプリの起動コマンドになり、まずはVue.jsアプリをビルドして起動します。実行すると、以下のように表示されます。あとは実際にブラウザからアクセスしてみます。build.あとはhttp://localhost:8080/でブラウザからアクセスできます。仮想マシン上でVue.jsアプリを作成して起動した場合は、localhostではアクセスできないため、仮想マシンのIPアドレスでアクセスします。アクセスすると以下のような画面が表示されると思います。これでVue.jsアプリの作成が完了です。uiというコマンドを実行することで、ブラウザからアクセスできるGUI画面上でVue.jsアプリの作成や管理を行うことができます。使用方法は簡単で、以下のコマンドを実行して、Webブラウザからhttp://localhost:8000/にアクセスするだけです。Vue.jsアプリにアクセスした時とはポート番号が変わっているので注意が必要です。uiではポート番号が8000になっています。http://localhost:8000http://localhost:8000/にアクセスすると、以下のようなダッシュボードが表示されます。uiを起動したい場合は、以下のように起動するホストマシンのIPを指定できるので、ここで仮想マシンのIPアドレスを指定することで起動できます。192.168.56.1まとめNode.js環境さえ整っていれば、わずかな時間でVue.jsアプリを作成できてしまいます。ここをスタートとして色々と応用し、まとめます。Nuxt.jsでBuefyを使っており、csvファイルをアップロードして読み込ませる必要がったので実装してみました。この記事では、Buefyというコンポーネントセットを使っています。Nuxt.jsでフォームのバリデーションをするためにVeeValidateを使ったので設定手順と簡単な使い方をまとめます。Nuxt.jsでBuefyを使っており、部分的にスタイルをカスタマイズしたい場面がありました。この記事では、Nuxt.jsで使っているBuefyのスタイルをカスタマイズする方法をまとめます。コメントをキャンセルメールアドレスが公開されることはありません。virtualiment。