#author("2019-05-21T22:28:46+09:00","default:narushima","narushima")
#author("2019-05-21T22:29:57+09:00","default:narushima","narushima")
#contents

*Vue.JS [#u563bf1c]
Vueの特徴的な機能
- リアクティブな変数:変数を更新すると更新されたことが Vueで認識される。
- 算出プロパティ(computed:)という、インスタンスの変更が更新されていなければ、前回の計算結果をそのまま返す事で処理の省略をする。ちなみに通常のメソッドは、更新にかかわらず必ず実行される。
- 監視プロパティ(watch:)(別名:ウォッチャー)。更新があった場合を明示的に記述する方法。

*Microsoft Visual Codeを利用した開発環境 [#f372feba]
[[Visual Code:https://code.visualstudio.com/download]] をインストール後、[[Node.jsサイト:https://nodejs.org/ja/]]からnode.jsをインストールする。また vue.js 本体は、下記拡張機能をインストールしてから、visual code のターミナルから、npm install vue でインストール。
[[Visual Code:https://code.visualstudio.com/download]] をインストール後、[[Node.jsサイト:https://nodejs.org/ja/]]からnode.jsをインストールする。また vue.js 本体は、下記拡張機能をインストールしてから、visual code のターミナルから、npm install vue vue-cli でインストール。


**Visual Codeの拡張機能で以下のものをインストール [#n708b002]

 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で検索すると一覧が見られる.



*** 一読リンク [#w11a0932]
- [[SPA(Single Page App)やUniversalについて:https://qiita.com/kyrieleison/items/4ac5bcc331aee6394440]]


** Nuxt [#v09c6255]
***app開発の為の前処理 [#ke25846e]
 # npm install -g create-nuxt-app


*** ポート指定 [#v9c5b9fe]
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でホットロードさせる場合)

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

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

*** 初期環境の定義 [#oc9a4173]
 # vue init nuxt-community/starter-template <作成プロジェクト名>
上記コマンドによって、プロジェクトフォルダと必要なパッケージを自動的に作成し、すぐに開発に入れる環境を作ってくれる。
 # cd <作成プロジェクト名>
 # npm install
 # npm run dev

他にも
 # npx create-nuxt-app <作成プロジェクト名>
という初期環境ツールがある。こちらのほうが新しく利用ライブラリについて細かく設定できる。

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

*** すべてのページに読み込むCSSを指定する [#d31a06df]

 # 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 拡張子のファイルを自動変換してくれる。&color(red){※ちなみにここでは app.scss内で bootstrapの scssを読み込んでいるので、module側では css の読み込みを false にしている };
 # npm install --save-dev node-sass sass-loader


** Vuetifyの利用 [#h7e40b1d]
 # npm install @nuxtjs/vuetify


** vuexについて [#i9b8d621]
 # npm install vuex


** bootstrapのインストール [#u6010ca9]
 # npm i bootstrap-vue
nuxtで利用する場合でもこのモジュールで問題ない。

** axios(サーバーとクライアントとの通信ライブラリ) [#i8c0cafd]
各ファイルで import axios と書くと、axios は重複してバンドルファイルに含まれてしまう。そこで axios をアプリケーション内で一度だけインクルードするには nuxt.config.js 内で build.vendor キーを使う。
 module.exports = {
   build: {
     vendor: ['axios']
   }
 }


** ページ表示方式 [#l8d3362e]
*** SPA(Single Page Application)の注意点 [#nfbe84c6]
- OGP(Open Graph Protocol)をページ毎に設定できない。OGP(OGとも言う)とは、そのページの記事のタイトル、URL、代表する画像、サマリーなどを正しく整形して表示するため、特に各ソーシャルメディアに伝えるためのメタ要素
 例: 
    <meta property="og:title" content="タイトル" />
    <meta property="og:image" content="画像URL" />


**トラブルシューティング [#e08099be]
ESList で「TypeError: Cannot read property 'eslint' of undefined」というエラーがでる。
- https://qiita.com/m1ul24/items/efd2b9af1954cce6bcc7