Nuxt.jsで爆速開発最高だぜ勉強会@2018-11-16
https://gyazo.com/ad0755fc9babcc4f48c7080944f04ac4
create-nuxt-appを使う
npx create-nuxt-app nuxt-lp
vue-cliによるvue init nuxt-community/starter-templateというのもあったがdeprecatedになったyamanoku.icon 爆速環境構築を感じる
code:zsh
$ npx create-nuxt-app nuxt-lp
コマンド入力
code:zsh
? Project name nuxt-lp
? Project description My super-excellent Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name yamanoku
? Choose a package manager yarn
質問いろいろ聞かれるが、まずEnter連打でOK
終わった時点で作成したディレクトリ名内でnode_modulesのインストール完了済
cd nuxt-lp
yarn dev or npm run dev
https://gyazo.com/f9a64bd3edb4c235a2a94beaf64a31bc
ここまでで何分かかったか？
爆速を感じられましたでしょうか？
ディレクトリ構成を確認する
code:nuxt-lp
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
└── yarn.lock
基本使うディレクトリ
assets
画像系
components
コンポーネント系
layouts
根幹部分
pages
ページ管理
static
静的ファイル
faviconが入ってる
それ以外のディレクトリ消してよし（LP程度なので）
共通コンポーネントをつくる
すでにあるものから見てみる
components/Logo.vue
ロゴのコンポーネント
componens/Header.vue
ヘッダーを作ってみる
code:header.vue
<template>
<header>
<h1>ヘッダーです</h1>
</header>
</template>
layout.vueでそれを読み込んでみる
code:layout.vue.html
<template>
<div>
<header-comp />
<nuxt/>
</div>
</template>
<script>
import HeaderComp from '~/components/Header.vue'
export default {
components: {
HeaderComp
}
}
</script>
なぜHeaderCompにしているかというと
<header />というテンプレート要素で読もうとすると
単純にHTMLのheaderタグとして読まれるため、そうではなくimportしてきたものとして差別化するため
地味に気をつけたほうがいいやつですyamanoku.icon
https://gyazo.com/f91c2e7b1bf76d1df7fb1bef2dbfdc96
CSS設計思想なんぞをぶっ壊すものyamanoku.icon
vueファイル内でCSSを完結させる
他コンポーネントには影響がでない
<style scoped>とscoped属性をつける
https://gyazo.com/630865eb2262db9f2d5697b2dc94b976
ランダムなハッシュ値データ属性が付与される
そのままでは使えない
yarn add --dev node-sass sass-loader
code:scss.vue.html
<style lang="scss">
.hoge {
background-color: white;
}
</style>
mixin, 変数ファイルなどを使う際は？
nuxt-sass-resources-loaderを使う
code:nuxt.config.js
modules: [
[
'nuxt-sass-resources-loader',
[
'assets/_various.scss',
'assets/_mixins.scss'
]
]
]
generateしてみる
基本静的実装となる場合はこのコマンドで出力
yarn generate
dist直下に静的ファイルが生成される
npx http-server distでどう見えるか確認
ページを分けて作りたい
通常のまま下記のようにpages作成すると
code:nuxt-pages
pages
├── about.vue
└── index.vue
about.htmlではなく
about/index.htmlが作成される
code:nuxt.config.js
module.exports = {
generate: {
subFolders: false,
}
}
上記設定すると以下のようにビルドされる
code:build
dist/
├── about.html
└── index.html
ちなみにサブディレクトリを作ってindex.vueを生成した場合
http://localhost:8000/aboutにはアクセスできるが
index.htmlにアクセスはできない
about.vueみたいなのにはhttp://localhost:8000/about/about.htmlにアクセスできる
駄目
しかし自分もそこまで鬼ではない yamanoku.icon
staticにscripts.jsを設置
code:nuxt-config.js
module.exports = {
head: {
script: [
{ src: 'scripts.js' }
]
}
}
Vueコンポーネント内でjQueryを使う場合
mounted内で $refs を使いDOMを取得
code:jquery-vue.vue.html
<template>
<div class="container">
<button type="button" class="btn" ref="btn">click it</button>
</div>
</template>
<script>
import $ from 'jquery';
...
mounted: (){
$(this.$refs.btn).on('click', () => {
console.log('click');
});
},
...
</script>
headで直接ソース読み込み
code:head.js
export default {
head: {
script: [
],
}
}
code:mounted.js
mounted: function() {
$(document).ready(function() {
$("hoge").magnificPopup({
type: "iframe",
preloader: true,
fixedContentPos: true
});
});
}
というか直接DOM触らないほうがいい yamanoku.icon スライダーに関するTips
そのまま使うとwindow is not definedとかになる
<no-ssr>設定をする
code:plugins/vue-carousel.js
import Vue from 'vue';
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
code:nuxt.config.js
{
}
code:compoents.vue
<template>
<no-ssr>
<carousel>
<slide v-for='i in 10' :key='i'>Slide {{ i }}</slide>
</carousel>
</no-ssr>
</template>
yamanoku.icon 静的ジェネレータであればSSRすることもなかろうと思うので上記エラーがあったら基本<no-ssr> Google Tag Manager埋め込み
公式のタグマネージャー追加ツール
code:nuxt.config.js
modules: [
]
Yahooのタグマネージャーはないので別途対応方法 app.htmlをドキュメントルートで作成
以下みたいに入れる
code:app.html
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
<script type="text/javascript">
(function () {
var tagjs = document.createElement("script");
var s = document.getElementsByTagName("script")0; tagjs.async = true;
tagjs.src = "//s.yjtag.jp/tag.js#site=XXXXXXX";
s.parentNode.insertBefore(tagjs, s);
}());
</script>
<noscript>
<iframe src="//b.yjtag.jp/iframe?c=XXXXXX" width="1" height="1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</noscript>
</body>
</html>
高速化
@nuxt/pwa-module
code:nuxt.config.js
modules: [
],
code:.gitignore
# PWA
sw.*
サクッと1枚つくるスピード重視であれば抜きでもいいんだけど
eslintの場合
create-nuxt-app時にUse eslintでyesを選択
以下設定ファイルができる
code:.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'plugin:vue/recommended',
'plugin:prettier/recommended'
],
// required to lint *.vue files
plugins: [
'vue',
'prettier'
],
// add your custom rules here
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
ない状態で作った場合は以下インストール
yarn add -D babel-eslint eslint eslint-loader eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier
ディレクトリ直下に上記設定ファイル（.eslintrc.js）を作成しておく
package.json のnpm scriptsに以下追加
code:package.json
"scripts": {
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
以下が参考になった
code:.stylelintrc.json
{
"extends": "@geekcojp/stylelint-config",
"plugins": [
"stylelint-scss"
]
}
browserslist入れとかないといかんかも yamanoku.icon
本をみるのが一番いいかも知れない（昇順で読むとよさそう）
モダンフレームワークの中で一番日本語ドキュメントが充実している
これはVue.jsに限らない話ですyamanoku.icon