nodeのインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Konsoleを再起動

nvm install stable

これでnode v14.4.0 (npm v6.14.5)がインストールされました。

yarnとは - Qiita

npmに代わってyarnを使うことにしようと思ったのですが、npmでインストールしたyarnでvueをインストールするとパスが~/.yarn/bin/vueになってパスが通ってなかったのでnpmでインストールしたyarnはアンインストールしました。

ちなみにvueのインストールにyarnでは60.09sに対してnpmでは85.5.64sかかりました。

Vueのインストール

Vue CLI UIでお手軽にVueプロジェクトを作成・管理しよう - Qiita

npm install -g @vue/cli

@vue/cli@4.4.4がインストールされました。

 VueCli UI launch error: GraphQL error: Cannot return null for non-nullable field Project.name · Issue #2198 · vuejs/vue-cli · GitHub

Chromiumだとvue uiでのプロジェクトの作成に失敗するので、デフォルトブラウザをFirefoxに変更します(結局その後何故かFirefoxも同様の症状になりました。プロジェクトの作成に失敗しているのではなく作成されたプロジェクトのインポートに失敗しているようです)。

スタート -> アプリケーション -> KDEシステム設定。

アプリケーション -> デフォルトのアプリケーション。

ウェブブラウザがFirefoxであることを確認します。

vue ui

これでFirefoxが立ち上がりVueプロジェクトマネージャが起動しました。

Vueプロジェクトの作成

作成。

homeにVueProjectという名前のフォルダを作成してそこで「+ここに新しいプロジェクトを作成する」ボタンをクリックします。



プロジェクトフォルダ名を入力して「次へ」。



デフォルトプリセットを選択して「プロジェクトを作成する」をクリック。

これでプロジェクトが作成されてそのプロジェクトダッシュボードが開きます。

しかしもう一つのPCでは同じ構成のはずなのにSuccessfully created project.と下のステータスバーに表示されてなぜか画面が変わりませんでした。

そのときはホーム画面に戻って作成されたプロジェクトをインポートする必要があります。

プロジェクトにVuetifyをインストールする

プロジェクトダッシュボードの左にあるプラグインボタンをクリックして、「＋プラグインを追加する」ボタンをクリック。


 vuetifyで検索してでてきたvue-cli-plugin-vuetify 2.0.5の+ボタンをクリックしてインストールします。

presetはDefaultのままにしました。

設定 ー＞ Vuetify configuration ー＞ LocaleでJapaneseが選択できますが、保存ボタンをクリックするとEnglishに戻ってしまいます。

サンプルプロジェクトのビルド

vuetifyをインストールするとサンプルが入っているのでそれを起動してみます。


タスク ー＞ serve　の「タスクの実行」をクリックするとビルドが始まります。

ビルドが成功すると「アプリを開く」ボタンがクリックできるようになるので、それをクリックするとサンプルが描画されます。


これでVuetifyプロジェクトができました。

プロジェクトをインポートする 

左下にあるホームアイコンをクリックしてホーム画面に戻ります。

 インポートボタンをクリック。

 インポートしたいプロジェクトのルートフォルダを開くと下に「このフォルダをインポートする」ボタンがでてくるのでそれをクリックします。


「とにかくインポート」をクリック。

vue uiの依存の画面から更新ボタンをクリックして依存モジュールのインストールはできるのですが、ひとつずつやらないといけないのと、実際やってみたら一つ目の依存モジュールでインストールに失敗しました。

なので依存モジュールのインストールはyarn installでしました。

ちなみにnode-sassのインストールでエラーがでましたが、なぜかnpm install node-sassでインストールしたら解決しました。

node-sassはネイティブコンパイルするのでいつもひっかかります。