「Nuxt.js」ライブラリvue-wizard-stepsを使用してプログレスバーを作成する
環境
Windows 10 Home 64bt
node v14.18.3
npm 6.14.15
1.Nuxt.jsを環境構築します
1.1 「nuxtdemo」という名前でプロジェクトを作成してます
c:\>npx create-nuxt-app nuxtdemo
1.2 create-nuxt-appの設定を行います
create-nuxt-app v4.0.0
? Project name: nuxtdemo
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: Git
略
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive
create-nuxt-app v4.0.0
Generating Nuxt.js project in nuxtdemo
? Project name: nuxtdemo
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: Git
略
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive
create-nuxt-app v4.0.0Generating Nuxt.js project in nuxtdemo ? Project name: nuxtdemo ? Programming language: JavaScript ? Package manager: Yarn ? UI framework: None ? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Testing framework: None ? Rendering mode: Universal (SSR / SSG) ? Deployment target: Server (Node.js hosting) ? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? What is your GitHub username? ? Version control system: Git 略 warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive
1.3 環境構築の結果
Successfully created project nuxtdemo
To get started:
cd nuxtdemo
yarn dev
To build & start for production:
cd nuxtdemo
yarn build
yarn start
Successfully created project nuxtdemo
To get started:
cd nuxtdemo
yarn dev
To build & start for production:
cd nuxtdemo
yarn build
yarn start
Successfully created project nuxtdemo To get started: cd nuxtdemo yarn dev To build & start for production: cd nuxtdemo yarn build yarn start
2.vue-wizard-stepsをインストールします
作成したプロジェクトに移動します
c:\>cd nuxtdemo
vue-wizard-stepsインストール
c:\nuxtdemo>yarn add vue-wizard-steps
c:\nuxtdemo>yarn add vue-wizard-steps
c:\nuxtdemo>yarn add vue-wizard-steps
3.vue-wizard-steps使い方
「C:\nuxtdemo\plugins」フォルダを作成します
plugin.jsに以下のコードを編集します
import Vue from 'vue'
import WizardSteps from 'vue-wizard-steps';
Vue.component("wizard-steps", WizardSteps);
import Vue from 'vue'
import WizardSteps from 'vue-wizard-steps';
Vue.component("wizard-steps", WizardSteps);
import Vue from 'vue' import WizardSteps from 'vue-wizard-steps'; Vue.component("wizard-steps", WizardSteps);
nuxt.config.jsに以下のコードを編集します
modules: [
],
plugins: [
{
src: '@/plugins/plugin',
mode: 'client'
}
],
modules: [
],
plugins: [
{
src: '@/plugins/plugin',
mode: 'client'
}
],
modules: [ ], plugins: [ { src: '@/plugins/plugin', mode: 'client' } ],
pages配下にindex.vueに以下のコードを編集します
<template>
<div class="container">
<wizard-steps :sections="sections" />
</div>
</template>
<script>
export default {
data() {
return {
sections: {
titles: ["メールアドレス入力", "パスワード入力", "確認"],
fillCount: 2,
},
};
},
};
</script>
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<template>
<div class="container">
<wizard-steps :sections="sections" />
</div>
</template>
<script>
export default {
data() {
return {
sections: {
titles: ["メールアドレス入力", "パスワード入力", "確認"],
fillCount: 2,
},
};
},
};
</script>
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<template> <div class="container"> <wizard-steps :sections="sections" /> </div> </template> <script> export default { data() { return { sections: { titles: ["メールアドレス入力", "パスワード入力", "確認"], fillCount: 2, }, }; }, }; </script> <style> .container { flex-direction: column; justify-content: center; align-items: center; } </style>
4.yarn起動
c:\nuxtdemo>yarn dev
c:\nuxtdemo>yarn dev
yarn run v1.22.17
$ nuxt
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.8 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
c:\nuxtdemo>yarn dev
yarn run v1.22.17
$ nuxt
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.8 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
c:\nuxtdemo>yarn dev yarn run v1.22.17 $ nuxt ╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.8 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯