概要

私は、考えるより手を動かすタイプだ

という方向けにチュートリアルなどを使用しながら、
Webアプリケーション開発していく方法を書いていきたいと思います。

ターゲット層

考えるより感じたいという方
JavaScriptを始めてみようかなと考えている方
開発業務に携わったことがない方

使用エディタ

Visual Studio Code

これからVisual Studio Codeを使用していきたいが、
インストールしていないという方は、
インストール手順をググってみてください。
※スクリーンショットがあるサイトが見やすいと思います。

※事前にVSCodeにお好みで拡張機能を入れておくと楽になります。
VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定
 Vueの開発におすすめなVSCodeの拡張機能を紹介！！

事前準備

Node.jsのインストール

以下の記事を参考にしてみてください。
windows10にNode.jsをインストールする

VSCodeでGit Bashをターミナルに設定する※私がLinuxコマンド使い慣れているため

以下の記事を参考にしてみてください。
WindowsのVSCodeでGit Bashをターミナルに設定する

実践その１（Vue.js・Vuetifyのインストール）

バージョン確認

ターミナル

node -v
v12.16.2
※これは私が使用しているNode.jsのバージョンです。

npm -v
6.14.4
※これは私が使用しているNode.jsのバージョンです。

Vue.jsインストール

以下を参考にさせていただいております。
Vue.jsについての基礎(インストール)

ターミナル

# インストール
npm install -g vue-cli

# バージョン確認
vue -V
→バージョン情報が表示されること

実践その２（プロジェクト作成）

以下を参考にさせていただいております。
Vuetifyをインストールして使ってみる

ターミナル

# プロジェクトを作成するディレクトリにcdしてから実行してください
# 作成に時間がかかります。。
vue create vue-project

? Please pick a preset: Manually select features
? Check the features needed for your project: 
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) N

# 作成したプロジェクトディレクトリへ移動
cd vue-project

# プロジェクト実行
npm run serve

# 以下URLへアクセス
http://localhost:8080/ 

→Vueのロゴページが表示されていること

Vuetifyインストール

ターミナル

# 現在位置確認
pwd
→vue-projectにいること

# Vuetifyインストール
vue add vuetify

? Choose a preset: Default (recommended)

# Vuetify反映確認
npm run serve

# 以下、URLにアクセス
http://localhost:8080/

→Vuetifyロゴページが表示されていること

まとめ

Vue.js・Vuetifyの記事は、ググれば色々と出てきます。
個人的には、公式サイトがおすすめです。

Vuetify公式サイトクリックスタート

次回は、Vuetify公式にあるレイアウトを使用していきたいと思います。

Vuetify公式サイトレイアウト

実践で覚えるVue.js(Vuetify) その２

以上