概要
私は、考えるより手を動かすタイプだ
という方向けにチュートリアルなどを使用しながら、
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公式にあるレイアウトを使用していきたいと思います。
以上