Python（Django）＋Vue.js（Nuxt.js,Vuetify）を使ったシステムの開発です。
今回からフロントエンドの開発です。
今から作るものは架空のPCショップの見積もりサイトになります。
昨年作ったLaravel＋Vue.jsでProgramingで作ったものと同等のものになります。
トップページと見積もりページの２ページだけの簡単なものですが、
Vue.jsのSPA（SinglePageApplication）を使ったパソコンパーツを組み合わせて自作PCを作るためのパーツを購入するページになります。
パーツを選ぶと金額が加算され、トータル金額が算出されるものでになります。
そのまま同じものを作っても味気ないのでNuxt.jsとVuetifyを使ってモダンなものにする予定です。
NuxtとVuetifyについて
いままで、Vue.jsにVuexやVueRouter、Axionなど自前で組み込んで使っていましたがそれらがパッケージされたフレームワークがあるので今回はそちらを使ってみようと思います。無くても組めるのですが、楽にかっこいいサイトにしたいので。😄
Nuxt.jsとは
Vue.jsに基づいたフレームワークだそうです。
Nuxt.js詳しくはこちら。
VueRouterやVuexを予め組み込んでさらに使いやすくしてくれものです。
Vuetifyとは
VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。
Vuetify
少し癖があるな、と感じましたが慣れてくると簡単に美しいデザインができるようになります。素晴らしい。他にも同じジャンルのフレームワークがありますが、使いやっすそうだったのでこれを選びました。
開発環境
私はnodebrewを導入しています。使いたいVersionを選んで実行できるので便利です。Macの場合はおすすめです。
導入方法はこちらをどうぞ。
作成時点の最新の安定Versionで開発を行いました。（偶数バージョンは安定版です）
% node --version
v10.19.0パッケージ管理システムyarnのインストール
npmでも良かったのですが、yarnを使ったことがなかったので使ってみることにしました。npmでも問題なく使えると思います。
（？なんて読むの？ヤ〜ン？😅）
% brew install yarn --ignore-dependencies
% yarn -v
1.22.0プロジェクトの作成
それではVue.jsのプロジェクトを作成します。
プロジェクト名は[mitsumori-app]とします
% yarn create nuxt-app mitsumori-app実行すると
yarn create v1.22.0
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-nuxt-app@2.14.0" with binaries:
- create-nuxt-app続けて質問攻めにあいます！
create-nuxt-app v2.14.0
✨ Generating Nuxt.js project in mitsumori-app
? Project name mitsumori-app ←アプリ名、ENTER押下
? Project description My breathtaking Nuxt.js project ←詳細、適当でENTER押下
? Author name marosuke ←作者名を入れてENTER押下
? Choose the package manager Yarn ←パケージ管理システムはYarnを選択
? Choose UI framework Vuetify.js ←UIフレームワークはVuetifyを選択
? Choose custom server framework None (Recommended) ←サーバは自前で用意するので選ばずにENTER押下
? Choose Nuxt.js modules Axios, DotEnv ←AxiosとDotEnvを選んでENTER押下
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) ←ENTER押下
? Choose test framework None ←ENTER押下
? Choose rendering mode Single Page App ←SPAを選んでENTER押下
? Choose development tools jsconfig.json (Recommended for VS Code)
←IDEでVSCodeを使っているならjsconfig.jsonを選んでENTER押下
🎉 Successfully created project mitsumori-app
To get started:
cd mitsumori-app
yarn dev
To build & start for production:
cd mitsumori-app
yarn build
yarn start
✨ Done in 190.85s.以上でベースになるシステムのインストールは完了です。
実行
一応動作のチェック
% cd mitsumori-app
% yarn dev
yarn run v1.22.0
$ nuxt
╭─────────────────────╮
│ │
│ Nuxt.js v2.11.0 │
│ Running in development mode (spa) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰─────────────────────╯
ℹ Preparing project for development 11:06:46
ℹ Initial build may take a while 11:06:46
✔ Builder initialized 11:06:46
✔ Nuxt files generated 11:06:46
✔ Client
Compiled successfully in 6.09s
ℹ Waiting for file changes 11:06:55
ℹ Memory usage: 345 MB (RSS: 464 MB)実行情報の中に http://localhost:3000/ を見るように書かれているので
開いてみます。
http://localhost:3000/
この様に表示されれば正しくインストールは完了しています。
何もしていない状態ですがサイドメニューなど基本的な部分は動作するようになっています。
次回から、プログラムを書いていきます。
コメント