===== Windows10でVue CLI3.0のインストール ===== 2018年3月にVue CLI 3.0が発表されたとのことなので、試してみる。 ===== 開発環境 ===== Windows10 Pro (1803) Windows Subsystem for Linux (WSL) Ubuntu 18.04 VisualStudioCodeのターミナル画面をWSLのBashに設定 anyenv nodenv 1.1.2-69-gced0e70 node 10.14.2 Windowsの C:/Users/a/a/ Ubuntuの /mnt/c/Users/a/a/ を共有し、anyenv, nodenv, nodeその他はWSLのUbuntu 18.04にインストールしている状態。 ===== @vue/cliのインストール ===== *すでにvue-cliがインストールされている場合は、アンインストールします npm uninstall -g vue-cli *@vue/cli(Vue CLI 3.0)のインストール npm install -g @vue/cli 数分かかって、@vue/cli 3.2.1がインストールされた。 {{:vue:pasted:20181224-003034.png}} 参考:http://www.fumiononaka.com/Business/html5/FN1807002.html ===== exec $SHELL -l を忘れずに! ===== Windowsではそのようなことはなかったのですが、Ubuntuでは、npm installした後に、必ず、 exec $SHELL -l というコマンドを入力しないと、直前にインストールしたCLIなどのコマンドを利用することができません。 参考:https://blog.bgbgbg.net/archives/2366 2015/01/02 投稿者: BGBGBG bashスクリプトでの.bashrc変更内容を起動したシェルへ反映する ===== vue uiでGUI操作 ===== Vue CLI 3では、GUI操作でVue.jsアプリが作成できるらしいので、やってみます。まだbeta版だそうですが、楽しそうです! vue ui {{:vue:pasted:20181224-004700.png}} {{:vue:pasted:20181224-005330.png}} *一度、Ctrl+C でサーバ停止して、vue/ フォルダを作成して移動してから、再度、vue ui {{:vue:pasted:20181224-005540.png}} *作成 をクリック {{:vue:pasted:20181224-005634.png}} *ここに新しいプロジェクトを作成する をクリック {{:vue:pasted:20181224-005745.png}} *プロジェクト名を入力して、次へ をクリック {{:vue:pasted:20181224-010516.png}} *デフォルトをクリックして、プロジェクトを作成する をクリック {{:vue:pasted:20181224-010554.png}} 10分くらいかかる。 {{:vue:pasted:20181224-011906.png}} {{:vue:pasted:20181224-013044.png}} ===== 作成したアプリの実行 ===== {{:vue:pasted:20181224-013427.png}} {{:vue:pasted:20181224-013456.png}} {{:vue:pasted:20181224-013517.png}} これは面白い! ちなみに、作成したmyAppフォルダの中身は、以下のような構成になっている。 {{:vue:pasted:20181224-013739.png}} ===== Vue CLI 3.0のリンク ===== https://www.maytry.net/start-pwa-by-vue-cli-3/ vue-cli 3.0で始めるPWAとVue.jsのconfig周り開発Tips slontが2018年7月15日に投稿(2018年7月20日更新) https://speakerdeck.com/andoshin11/vue-cli-3-dot-0shi-dai-falsenuxt-dot-js vue-cli 3.0時代のNuxt.js andoshin11 March 27, 2018 https://nogson2.hatenablog.com/entry/2018/10/11/185620 2018-10-11 Vue CLI 3での開発環境を作るの基礎の基礎 ===== Vue.jsでお勧めの本 ===== とりあえず、何か動くものを作ってみたい場合は、以下の本がお勧めです!写経していて楽しいです! 一緒に、Vue.jsの基本を学ぶだめに以下の本がお勧めです。