公式: NUXT JS
Vue.js に基づいたプログレッシブフレームワーク
Universalモード、SPAモード、Generateモードの3つのモードで柔軟にサイトを設計できる
### 機能
– Vue ファイルで記述できること(*.vue)
– コードを自動的に分割すること
– サーバーサイドレンダリング
– 非同期データをハンドリングするパワフルなルーティング
– 静的ファイルの配信
– ES2015+ のトランスパイレーション
– JS と CSS のバンドル及びミニファイ化
– 要素の管理
– 開発モードにおけるホットリローディング
– プリプロセッサ: Sass, Less, Stylus など
– HTTP/2 push headers ready
– モジュール構造で拡張できること
### 動作
Vue2(Vue本体), Vue Router(Routing), Vuex(Vue版Flux), Vue Server Render(ServerSideレンダリング), Vue Meta(メタ情報管理)
### NuxtJSを始めよう
$ cat /etc/os-release
NAME=”Ubuntu”
VERSION=”18.04.4 LTS (Bionic Beaver)”
// 以下略
// npm, nodejsインストール
$ sudo apt install -y nodejs npm
$ node -v
v8.10.0
$ npm -v
3.5.2
// npmを最新化
$ sudo npm install npm@latest -g
$ sudo npm install -g vue-cli // sudo権限がないとエラーになる
$ vue init nuxt-community/starter-template sample
? Project name sample
? Project description Nuxt.js project
? Author hpscript
$ cd sample
$ ls
README.md components middleware package.json plugins store
assets layouts nuxt.config.js pages static
$ sudo npm install
$ sudo npm run dev
> sample@1.0.0 dev /home/vagrant/local/sample
> nuxt
FATAL Unexpected token { 13:12:14
} catch {
^
ん? nodeがv8.10.0では古いよう。
最新に上げます。
$ sudo npm install n -g
$ sudo n stable
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l
$ node -v
v12.18.3
$ npm -v
6.14.6
$ sudo npm run dev
vagrantのprivate networkが192.168.33.10なので、
nust.config.jsのサーバの設定も変更する必要があります。
module.exports = { // 省略 server: { port: 8000, // デフォルト: 3000 host: '192.168.33.10' // デフォルト: localhost }, // 省略 }
/pages/users/index.vue
<template> <section class="container"> <div> <h1>user index page</h1> <p>count={{count}}</p> <button @click="addCount">カウントアップ</button> </div> </section> </template> <script> export default { computed: { count() { return this.$store.state.counter.count } }, methods: { addCount(e){ this.$store.commit('counter/add') } } } </script>
/store/counter.js
export const state = () => ({ count: 0 }) export const mutations = { add (state){ state.count += 1 } }