fnmでパッケージ管理しnode.jsをインストールしている際などに、インストール先を知る方法。
% npm bin -g
/Users/USER_NAME/Library/Application Support/fnm/node-versions/v16.17.0/installation/binwindows環境やnfm下で管理していてwhichコマンドでインストール先を調べれらないときに便利です。
※Mac, Windowsでも使えます
export default defineComponent({
props: {
data: {
type: Object as PropType<Playlist>,
},
},
})ここでは、Playlistというオリジナルの型で型指定をしている
Cannot find module '#app' or its corresponding type declarations.というエラーが、Nuxt Bridge(TypeScript)の開発時に、VS Codeで発生。
例えば、このようなコードでエラーが発生する
import { readonly, useState, Ref } from '#app'Nuxt Bridgeの導入環境
tsconfig.jsのpathsを以下の様に修正
"paths": {
"~/*": ["./*"],
"@/*": ["./*"],
"#app": ["./node_modules/@nuxt/bridge/dist/runtime/index.d.mts"]
},nuxiが生成する.nuxt/tsconfig.jsonで設定される#appのパスが、TypeScript用のファイルに通っていないのが原因の模様。
"#app": [
"node_modules/@nuxt/bridge/dist/runtime/index"
],NUXT_ENV_IMG_URL='https://hoge.com:10000/v1/json'export default {
computed: {
img: () => {
return (
process.env.NUXT_ENV_IMG_URL + "foo.png"
);
},
}
}Nuxtでは、プロジェクトのルートフォルダに置く.envで、環境変数を設定できる。ただし、prefixでNUXT_ENV_を変数名に付けないと、コンポーネントから参照できない。
コンポーネントからは、process.env.NUXT_ENV_*の形で参照できる。
公式ドキュメント
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/
export default {
// ...
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'something',
htmlAttrs: {
lang: 'en'
},
bodyAttrs: {
class: 'hoge-class'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
//...
}Nuxtでは、HTMLタグやBODYタグが自動生成されてしまうため、classを直接指定出来ないが、nuxt.config.js内でクラスを指定できる。
FullCalendarが5.xへバージョンアップした際に、いくつかのAPIが廃止されて、新しい設定方法が必要になっている。曜日の表記方法の指定の仕方も、変更されている。
曜日を設定するには、dayHeaderFormatという設定項目に、ファンクションを渡す。
dayHeaderFormat: function (date) {
const days = ["日", "月", "火", "水", "木", "金", "土"];
return days[date.date.marker.getDay()];
},daysという配列に、日曜からの表示したい文字列を入れていく。このメソッドに、渡されるdataの中に、該当の日付情報が入ってくるので、その中から何曜日かをdate.date.marker.getDay()から取得し、キーとして配列から文字列を取得し、返すようにする。
Nuxt(Vue)で、FullCalendarを使うには、vueコンポーネントの<template>内に、コンポーネントとして以下の様に読み込む。
<template>
<div>
<FullCalendar :options="config" >
</div>
</template>Vuexと連携して、FullCalendarの内容を更新するには、optionsで指定するmodelをcomputedで動的に返す必要がある。
例えば、eventsというstoreの中にスケジュールデータが入っており、getterからスケジュールデータを取得する場合、configOptionsの返値の中のeventsで、storeのgetterを与えるようにする。
computed: {
config() {
return {
...this.configOptions,
};
},
configOptions() {
return {
firstDay: 1,
editable: false,
navLinks: false,
selectable: false,
events: this.events,
weekends: this.weekendsVisible,
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
}
}
//...
...mapGetters("events", ["events"]),
}詳しくは、こちらのコードを参照
https://github.com/fullcalendar/fullcalendar-example-projects
Ver.3.xと最新のVer.6.xで違いがあったのでメモ
const now = new Date();
const midnight = d3.utcDay.floor(now);const now = new Date();
const midnight = d3.time.day.utc.floor(now);APIの使用が変わったらしく、最新バージョンでは、d3.time.*は使えない
$ npm install -D pixi.js
$ npm install -D @types/pixi.js$ npm install terser-webpack-plugin --save-devライブラリの読み込み
const TerserPlugin = require('terser-webpack-plugin');プラグインの読み込み
module.exports = {
//module.exports = ( env, argv ) => ({
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};