Vue.js ver2 SingleFileComponent

Vue CLI(Command Line Interface)

webpackをラップしたVue開発プロジェクトを作成するツールインストール
npm install -g @bue/cli

moduleのImport/Export

SFC(シングルファイルコンポーネント)の名前は2語以上のパスカルケースで記述する
export defaultでエクスポートした場合、インポート時に任意の名前の割り当てができる
import時のパスで@の指定はsrcフォルダを意味する

Vue.config.productionTip

開発モードの場合「false」で指定

vm.$mount

Vueインスタンスのelオプションをしない場合に、どの仮想DOMにマウントするかを指定するメソッド

ScopedCSS

SFCファイル内のみ有効とするスタイル

Vue.config.js

https://cli.vuejs.org/config/#vue-config-js
書き出した時、ルートパスではなく相対パスに変更
npm run build　→ distフォルダに書き出し

const { defineConfig } = require(&#039;@vue/cli-service&#039;)
module.exports = defineConfig({
  transpileDependencies: true,
// 以下を追加
  publicPath: &#039;&#039;
})

VueCliでSass

npm create時に追加
npm で後から追加
```
    npm i --save-dev sass-loader sass
```
SFCのstyleタグにlang="scss"を指定すればSASS記法でスタイルを記述できる

VueCliでSCSSグローバル

// src/assets/sass/main.scssを作成したとしてvue.config.jsに下記を追記
module.exports = {
    css: {
        loaderOptions: {
            scss: {
                additionalData: `@import "@/assets/sass/main.scss;"`
            }
        }
    }
}

マルチページモード

エントリーポイントをページ毎で作成する。vue.config.jsの設定で指定可能。
html-webpack-plubinとpreload-webpack-pluginをインストールしておく
vue inspectコマンドで検証可能
https://cli.vuejs.org/config/#pages