vue-cli のインストールはされているものとして、簡単なサンプルを作成します。
インストールの状況
$ vue --version @vue/cli 4.3.1 $ npm list -g vue /usr/lib └─┬ @vue/cli@4.3.1 └── vue@2.6.11
次のページを参考にしました。
Nuxt.js アプリケーションをスクラッチから作る
Nuxt.js使ってみた
1) 作業フォルダーの作成
mkdir proj01
cd proj01
mkdir pages
mkdir store
2) package.json の作成
package.json
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
3) nuxt のインストール
npm install --save nuxt
package.json が書き換えられます。
4) 外部からアクセスできるように package.json を修正
ekzemplaro.org をホストとすると、
package.json
{
"name": "my-app",
"scripts": {
"dev": "nuxt --hostname ekzemplaro.org"
},
"dependencies": {
"nuxt": "^2.5.1"
}
}
5) pages/index.vue の作成
pages/index.vue
<template>
<section class="container">
<div>
<h1>カウンター</h1>
<blockquote>
<p><h2>{{count}}</h2></p>
</blockquote>
<button @click="addCount">アップ</button><p />
<button @click="subtractCount">ダウン</button><p />
<button @click="clearCount">クリア</button><p />
</div>
<blockquote>
Apr/3/2019<p />
</blockquote>
</section>
</template>
<script>
export default {
computed: {
count () { return this.$store.state.counter.count }
},
methods: {
addCount (e) {
this.$store.commit('counter/add')
},
subtractCount (e) {
this.$store.commit('counter/subtract')
},
clearCount (e) {
this.$store.commit('counter/clear')
}
}
}
</script>
6) store/counter.js の作成
store/counter.js
export const state = () => ({
count: 0
})
export const mutations = {
add (state) {
state.count += 1
},
subtract (state) {
state.count -= 1
},
clear (state) {
state.count = 0
}
}
7) サーバーの起動
npm run dev
8) ブラウザーで http://ekzemplaro.org:3000 にアクセス
ボタンをクリックすれば、カウンターの値が変わります。
ufw を使っている時は次のようにして、ポートを開けます。
sudo ufw allow 3000