概要

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

という方向けにチュートリアルなどを使用しながら、
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) その２

以上