Edit
Vue.JS

Vueの特徴的な機能

Edit
Microsoft Visual Codeを利用した開発環境

Visual Code をインストール後、Node.jsサイトからnode.jsをインストールする。また vue.js 本体は、下記拡張機能をインストールしてから、visual code のターミナルから、npm install vue vue-cli でインストール。

Edit
Visual Codeの拡張機能で以下のものをインストール

Japanese Language Pack for Visual Studio Code
Language pack extension for Japanese
Node.js Modules Intellisense
Autocompletes Node.js modules in import statements
Vue.js Extension Pack
Popular VS Code extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense,
Debugger for Chrome
Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
Beautify
Beautify code in place for VS Code(自動整形)
Vue 2 Snippets
A Vue.js 2 Extension(Vue 2のコードヒントが増える)
Bracket Pair Colorizer
A customizable extension for colorizing matching brackets(括弧を色分けする) 
Code Spell Checker
Spelling checker for source code(単語チェッカー)
Path Autocomplete
Provides path completion for visual studio code
Regex Previewer
Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.
Duplicate action
Ability to duplicate files in VS Code
Material Icon Theme
Material Design Icons for Visual Studio Code
Live Server
Launch a development local Server with live reload feature for static & dynamic pages
Code Runner
Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim, D, Lisp,

※ちなみにインストールされた拡張機能は、@builtinで検索すると一覧が見られる.

Edit
一読リンク

Edit
Nuxt

Edit
app開発の為の前処理

# npm install -g create-nuxt-app

Edit
ポート指定

package.json内の nuxt 設定の場所に記述

"config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": "3333"
  }
},
"scripts": {
  "dev": "nuxt"
}

ちなみに、ここでホストを、0.0.0.0 にしないと、初期値が localhost となるため、別のPCからページを見る際にIP、またはドメイン指定するとホスト名が違ってしまうために、ローカルPC以外からアクセスできなくなる。(これは npm run nuxtでホットロードさせる場合)

Edit
フォルダ構造

├ assets/        # Sassや画像などのWebpackで扱うもの
├ components/    # コンポーネント
├ layouts/       # ヘッダーやフッターを含む共通のレイアウト
├ middleware/    # ページのレンダリング前に実行したい関数(認証など)
├ pages/         # 各ページを表すコンポーネント(このディレクトリをもとにルーテ ィング)
├ plugins/       # プラグイン
├ static/        # assetsに含めたくない静的ファイル
├ store/         # Vuex
└ nuxt.config.js # Nuxt.jsの設定ファイル

詳細はここ https://ja.nuxtjs.org/guide/directory-structure/

Edit
初期環境の定義

# vue init nuxt-community/starter-template <作成プロジェクト名>

上記コマンドによって、プロジェクトフォルダと必要なパッケージを自動的に作成し、すぐに開発に入れる環境を作ってくれる。

# cd <作成プロジェクト名>
# npm install
# npm run dev

他にも

# npx create-nuxt-app <作成プロジェクト名>

という初期環境ツールがある。こちらのほうが新しく利用ライブラリについて細かく設定できる。

Edit
静的にサイトを構築する。

# npm run generate

このコマンドを利用すると ./dist フォルダが作成され、コンパイルされた html ファイルが格納される。そのためここをルートフォルダにしてWEB公開すれば、アクセスは早くなるが動的にページを作られないために設計に注意が必要。

Edit
すべてのページに読み込むCSSを指定する

# vi nuxt.config.js
 module.exports = {
   css: [
     'bulma',
     '@/assets/scss/app.scss'     <- プロジェクト内
   ],
   modules: [
     ['bootstrap-vue/nuxt', { css: false }]
   ],
 }

cssディレクティブで指定される cssファイル は、sass-loader がインストールされていれば、nuxtが拡張子を見て、sassや、scss 拡張子のファイルを自動変換してくれる。※ちなみにここでは app.scss内で bootstrapの scssを読み込んでいるので、module側では css の読み込みを false にしている

# npm install --save-dev node-sass sass-loader

Edit
Vuetifyの利用

# npm install @nuxtjs/vuetify

Edit
vuexについて

# npm install vuex

Edit
bootstrapのインストール

# npm i bootstrap-vue

nuxtで利用する場合でもこのモジュールで問題ない。

Edit
axios(サーバーとクライアントとの通信ライブラリ)

各ファイルで import axios と書くと、axios は重複してバンドルファイルに含まれてしまう。そこで axios をアプリケーション内で一度だけインクルードするには nuxt.config.js 内で build.vendor キーを使う。

module.exports = {
  build: {
    vendor: ['axios']
  }
}

Edit
ページ表示方式

Edit
SPA(Single Page Application)の注意点

Edit
トラブルシューティング

ESList で「TypeError: Cannot read property 'eslint' of undefined」というエラーがでる。