プロジェクト作成で参考にした記事を紹介
目的はローカルサーバーを立ち上げて以下の画面を出すこと
参考記事
①https://www.monster-dive.com/blog/web_creative/20180608_001789.php
②https://ajike.github.io/install-vue-cli/
①のアプリ開発をしたいと思い、最初に試したが、
vue init webpack
をコマンドで入力するとエラーになった。
②の
vue create [プロジェクト名]
の手順から始めたところ無事画面が表示された。
2020/7/24追記
久々にvue cliを使用しようとして、ターミナルでvueコマンドを打つとcommand not foundとなってしまった。
アンインストールしたり、npmを更新しようと試みるも失敗、、
解決方法
どうやらパスが合っていなかった様子。
https://qiita.com/masakun1150/items/01b231f48ee6a8d8899d
こちらの記事の方法で解決
npm bin -g
/Users/xxxxxxx/npm/bin
これでパスを通す内容を確認
$ export PATH=/Users/xxxxxxx/npm/bin:$PATH
これでパスを通す。
Vue CLIインストール時にviewsフォルダが作成されない件
```
vue create [プロジェクト名]
をした後にデフォルトではなく任意設定を選択する。
そこで元から選択されている「BabelとLinter / Formatter」に追加して「Router」も選択する。
参考：https://qiita.com/azukiazusa/items/fd82b3c35929add9dafe
その他の設定はひとまず全てエンターで問題なさそう。
# Vuetifyのインストール
作業ディレクトリ内でターミナルを開き
vue add vuetify
を入力。基本はエンターで進めれば良さそう
参考：https://vuetifyjs.com/ja/getting-started/quick-start/
# vuexのインストール
インストールしたいプロジェクトのディレクトリへ移動しターミナルで
vue add vuex
でインストール可能
Vue CLIでcreateする際にデフォルトではなく、カスタムでvuexを選択すると同様にインストール可能
インストールされると以下のファイルが作成される
<img width="305" alt="スクリーンショット 2020-08-06 14.40.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/ad9fa779-3e73-c12e-bbb3-e4b31eaa1b21.png">
# 作成したディレクトリをGitHubにpushする方法
以下の記事に記載あり
https://kirikko-scondcube.hatenablog.com/entry/2020/06/29/134515
git init
git add .
git commit -m "add new file"
git remote add origin [ギットハブのリポジトリのURL]
git push origin master
エラーが出なければ上記手順でpush可能
# yarnのインストール
npmの代わりにyarnを使用する場合、vue cliをインストールした後、対象のアプリのディレクトリへ移動しインストールする
//Project setup
yarn install
//Compiles and hot-reloads for development
yarn serve
//Compiles and minifies for production
yarn build
//Lints and fixes files
yarn lint
基本使うだけなら yarn installでインストールし、yarn serveでサーバーを立ち上げるのみ使えば良い