Nuxt.js
https://gyazo.com/520485c5fe5324c3414d5e48953cd86a
作成可能アプリ
ユニバーサルアプリケーション
コマンド: nuxt
静的生成アプリケーション
コマンド: nuxt generate
コマンド: nuxt -spa
Full Static機能
APIの呼び出しのキャッシュ化して、API叩く数減らす？
特徴
nuxt generateコマンドによる静的生成
部品
Vuex（ストアオプションを利用している場合に限る） pages
動的なルーティング
_id
layouts
default.vue
全てのページに適応される
一部のぞく
error.vue
エラーページ作れる
描画
app.html
{{APP}}
layouts/default.vue
<nuxt />
pages/index.vue
pages/about.vue
pagesコンポーネントがロードされると呼び出される
code:asyncData.js
asyncData({params}) {
return axios.get(url)
// httpResponse
.then((res) => {
return {users: res.data}
})
アセット
プロジェクトのルート URL からアクセス可能
static/favicon.ico → localhost:3000/favicon.ico
.env
npm i --save @nuxtjs/dotenv
.envファイル追加
code:nuxt.config.js
modules: [
'@nuxtjs/dotenv'
],
plugin
例
code:firebase.js
import firebase from 'firebase'
const config ={
projectId: process.env.FIREBASE_PROJECT_ID
}
if(!firebase.apps.length){
firebase.initializeApp(config)
}
export default firebase
version3 はバグありbeta
困った
共通cssの導入
@/assets/hoge.css の形で
/../..の形ダメ
code:nuxtconfig.js
dev startしても動かない
code:nvm.sh
nvm list
nvm use 12.6.0
キャッシュ残ってる
プライベートウィンドウで
勉強
TODO
何か作りたい
これよさげ