【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
スポンサーリンク
目次
Vue-CLI+Quasar+Pugで静的サイトを作ってみる
フロントの技術はめまぐるしい変化を遂げてますが、最近はVue.jsに落ち着いた感が出てきている気がします。
The Progressive
JavaScript Framework
なぜ VUE.JS ? はじめる Vue.js
そこで、今回はVue.jsを使ったプロジェクトを作成するところまでを試してみようと思います♪
手順
Dockerfileの作成
まずは入れ物となるDockerfileを作成しましょう。
|
1 2 3 |
FROM node:12.16.1 WORKDIR /usr/src/app RUN yarn global add @vue/cli |
vue-cliさえ使えれば良いのでここでは特にモジュールは入れない事とします。
docker-compose.ymlの作成
次にdocker-compose.ymlを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
version: '3' services: app: build: . container_name: portfolio-vue ports: - "10080:10080" volumes: - .:/usr/src/app working_dir: /usr/src/app stdin_open: true tty: true |
イメージのBuild
では、一旦ここまでの設定でDockerイメージをビルドしてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Building app Step 1/3 : FROM node:12.16.1 12.16.1: Pulling from library/node Digest: sha256:46f4c17e1edbde36d60a9f6362db7912cfe301bac89afef7cc92421ab3e7ca18 Status: Downloaded newer image for node:12.16.1 ---> 88c089733a3b Step 2/3 : WORKDIR /usr/src/app ---> Using cache ---> 311e9471c5a2 Step 3/3 : RUN yarn global add @vue/cli ---> Running in 446ee64187cb yarn global v1.22.0 [1/4] Resolving packages... mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.) [2/4] Fetching packages... info fsevents@1.2.12: The platform "linux" is incompatible with this module. info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "@vue/cli@4.3.1" with binaries: - vue Done in 175.56s. Successfully built 311e9471c5a2 Successfully tagged portfolio-vue_app:latest |
ビルドが成功したのでコンテナを起動してみます。
|
1 2 |
Creating network "portfolio-vue_default" with the default driver Creating portfolio-vue ... done |
正常にコンテナが起動しましたね♪
コンテナ内の作業
では、次はコンテナに入ってプロジェクトを整えていきましょう。
docker-compose exec app /bin/bashでコンテナの中に入りましょう。
Vue-CLIでプロジェクトを作成
まずはVue-CLIを使ってプロジェクトの雛壇を作成しましょう。
設定はよしなに選んでください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
? Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? Yes Vue CLI v4.3.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, PWA, CSS Pre-processors, Linter ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Basic ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No ? Pick the package manager to use when installing dependencies: Yarn Vue CLI v4.3.1 ✨ Creating project in /usr/src/app/vue. ⚙️ Installing CLI plugins. This might take a while... yarn install v1.22.0 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.12: The platform "linux" is incompatible with this module. info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform "linux" is incompatible with this module. info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. info To upgrade, run the following command: $ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash Done in 176.63s. 🚀 Invoking generators... 📦 Installing additional dependencies... yarn install v1.22.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.12: The platform "linux" is incompatible with this module. info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform "linux" is incompatible with this module. info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. Done in 107.25s. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project vue. 👉 Get started with the following commands: $ cd vue $ yarn serve |
動作確認
これでプロジェクトの雛壇は出来たので動作確認をしてみましょう。
作成したディレクトリに移動して、以下のコマンドで開発用サーバーを起動してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
yarn run v1.22.0 $ vue-cli-service serve INFO Starting development server... Starting type checking service... Using 1 worker with 2048MB memory limit 98% after emitting CopyPlugin DONE Compiled successfully in 18762ms 1:05:15 PM No type errors found Version: typescript 3.8.3 Time: 6811ms App running at: - Local: http://localhost:8080/ It seems you are running Vue CLI inside a container. Access the dev server via http://localhost:<your container's external mapped port>/ Note that the development build is not optimized. To create a production build, run yarn build. |
無事に起動しました。
CLIで生成されたディレクトリは以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
. ├── Dockerfile ├── README.md ├── docker-compose.yml └── {作成プロジェクト} ├── README.md ├── babel.config.js ├── node_modules │ └── 略 ├── package.json ├── public │ ├── img │ ├── index.html │ └── robots.txt ├── src │ ├── App.vue │ ├── assets │ ├── components │ ├── data │ ├── favicon.ico │ ├── main.ts │ ├── quasar.js │ ├── registerServiceWorker.ts │ ├── shims-tsx.d.ts │ ├── shims-vue.d.ts │ └── styles ├── tsconfig.json └── yarn.lock |
が、ポート番号が8080となっており、docker-compose.ymlで開けたポートとズレちゃってますねorz
vue.config.jsで開発サーバーのポート番号を変更
vueプロジェクトの開発サーバーのポートはvue.config.jsを作成して設定を追加する事で変える事が出来ます。
|
1 2 3 4 5 6 7 |
module.exports = { devServer: { port: 10080, host: '0.0.0.0', disableHostCheck: true, }, }; |
確認
上記ファイルを作成したら再度起動してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
yarn run v1.22.0 $ vue-cli-service serve INFO Starting development server... Starting type checking service... Using 1 worker with 2048MB memory limit 98% after emitting CopyPlugin DONE Compiled successfully in 10038ms 1:09:11 PM No type errors found Version: typescript 3.8.3 Time: 8633ms App running at: - Local: http://localhost:10080/ It seems you are running Vue CLI inside a container. Access the dev server via http://localhost:<your container's external mapped port>/ Note that the development build is not optimized. To create a production build, run yarn build. |
起動ログも無事にポートが10080に変わっていますね！
ブラウザからlocalhost:18080/ にアクセスする事で正常に表示もされました♪
Quasarをインストール
次にVue.jsのデザインフレームワークのQuasarを追加しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
📦 Installing vue-cli-plugin-quasar... yarn add v1.22.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.12: The platform "linux" is incompatible with this module. info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform "linux" is incompatible with this module. info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ vue-cli-plugin-quasar@2.0.0 info All dependencies └─ vue-cli-plugin-quasar@2.0.0 Done in 94.88s. ✔ Successfully installed plugin: vue-cli-plugin-quasar ? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes ? Pick a Quasar components & directives import strategy: (can be changed later) Auto import (kebab-case) ? Pick your favorite CSS preprocessor: Stylus ? Choose Quasar Icon Set Material ? Default Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/ui/lang en-us ? Use RTL support? No ? Select features: IE11 support, Roboto font, Material, Material Outlined, Material Round, Material Sharp, Fontawesome, Ionicons, MDI, Eva 🚀 Invoking generator for vue-cli-plugin-quasar... 📦 Installing additional dependencies... yarn install v1.22.0 [1/4] Resolving packages... [2/4] Fetching packages... info There appears to be trouble with your network connection. Retrying... info fsevents@1.2.12: The platform "linux" is incompatible with this module. info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform "linux" is incompatible with this module. info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. Done in 151.58s. ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-quasar INFO quasar Documentation can be found at: https://quasar.dev Quasar is relying on donations to evolve. We'd be very grateful if you can read our manifest on "Why donations are important": https://quasar.dev/why-donate Donation campaign: https://donate.quasar.dev Any amount is very welcomed. If invoices are required, please first contact razvan@quasar.dev Please give us a star on Github if you appreciate our work: https://github.com/quasarframework/quasar Enjoy! - Quasar Team |
自動変換をYにした場合は以下のように自動でQuasarの形式に変換されてます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<template> <q-layout view="lHh Lpr lFf"> <q-header elevated class="glossy"> <q-toolbar> <q-btn flat dense round @click="leftDrawerOpen = !leftDrawerOpen" aria-label="Menu" icon="menu" /> <q-toolbar-title> Quasar App </q-toolbar-title> <div>Quasar v{{ $q.version }}</div> </q-toolbar> </q-header> <q-drawer v-model="leftDrawerOpen" show-if-above bordered content-class="bg-grey-2" > <q-list> <q-item-label header>Essential Links</q-item-label> <q-item clickable tag="a" target="_blank" href="https://quasar.dev"> <q-item-section avatar> <q-icon name="school" /> </q-item-section> <q-item-section> <q-item-label>Docs</q-item-label> <q-item-label caption>quasar.dev</q-item-label> </q-item-section> </q-item> <q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/"> <q-item-section avatar> <q-icon name="code" /> </q-item-section> <q-item-section> <q-item-label>Github</q-item-label> <q-item-label caption>github.com/quasarframework</q-item-label> </q-item-section> </q-item> <q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev"> <q-item-section avatar> <q-icon name="chat" /> </q-item-section> <q-item-section> <q-item-label>Discord Chat Channel</q-item-label> <q-item-label caption>chat.quasar.dev</q-item-label> </q-item-section> </q-item> <q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev"> <q-item-section avatar> <q-icon name="forum" /> </q-item-section> <q-item-section> <q-item-label>Forum</q-item-label> <q-item-label caption>forum.quasar.dev</q-item-label> </q-item-section> </q-item> <q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework"> <q-item-section avatar> <q-icon name="rss_feed" /> </q-item-section> <q-item-section> <q-item-label>Twitter</q-item-label> <q-item-label caption>@quasarframework</q-item-label> </q-item-section> </q-item> </q-list> </q-drawer> <q-page-container> <HelloWorld /> </q-page-container> </q-layout> </template> |
Pugの追加
次はPugの追加をしましょう。
HTMLのようなマークアップだと記述量が多くなってしまうので、階層化によって記述が出来るPugだと記述量が圧倒的に少なくなります！
ただ、ESLintなどが対応していないなどのデメリットもあるのでお好みで導入してください。
今回は簡単なページを作るだけなのでESLintの懸念は一旦忘れて導入してみようと思います♪
追加は以下のコマンドで簡単に出来ます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
📦 Installing vue-cli-plugin-pug... yarn add v1.22.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.12: The platform "linux" is incompatible with this module. info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform "linux" is incompatible with this module. info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 33 new dependencies. info Direct dependencies └─ vue-cli-plugin-pug@1.0.7 info All dependencies ... (略) ... Done in 106.08s. ✔ Successfully installed plugin: vue-cli-plugin-pug Plugin vue-cli-plugin-pug does not have a generator to invoke |
App.vueのHTML記法をPug記法に変換
次にApp.vueのHTML記述をPug記法に変換しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<template lang="pug"> q-layout(view='lHh Lpr lFf') q-header.glossy(elevated='') q-toolbar q-btn(flat='', dense='', round='', @click='leftDrawerOpen = !leftDrawerOpen', aria-label='Menu', icon='menu') q-toolbar-title Quasar App div Quasar v{{ $q.version }} q-drawer(v-model='leftDrawerOpen', show-if-above='', bordered='', content-class='bg-grey-2') q-list q-item-label(header='') Essential Links q-item(clickable='', tag='a', target='_blank', href='https://quasar.dev') q-item-section(avatar='') q-icon(name='school') q-item-section q-item-label Docs q-item-label(caption='') quasar.dev q-item(clickable='', tag='a', target='_blank', href='https://github.com/quasarframework/') q-item-section(avatar='') q-icon(name='code') q-item-section q-item-label Github q-item-label(caption='') github.com/quasarframework q-item(clickable='', tag='a', target='_blank', href='https://chat.quasar.dev') q-item-section(avatar='') q-icon(name='chat') q-item-section q-item-label Discord Chat Channel q-item-label(caption='') chat.quasar.dev q-item(clickable='', tag='a', target='_blank', href='https://forum.quasar.dev') q-item-section(avatar='') q-icon(name='forum') q-item-section q-item-label Forum q-item-label(caption='') forum.quasar.dev q-item(clickable='', tag='a', target='_blank', href='https://twitter.com/quasarframework') q-item-section(avatar='') q-icon(name='rss_feed') q-item-section q-item-label Twitter q-item-label(caption='') @quasarframework q-page-container HelloWorld </template> ... (略) ... |
templateタグにlang=”pug”を追加するのを忘れずに。
確認
では、ここまでの修正を確認してみましょう。
正常に表示が出来ました♪
VSCodeのPrettierの設定
こちらの設定は好みによりますが、VSCodeの保存時の自動コードフォーマットを有効にしたい方は以下の記事を参考にして追加してみてください♪
終わりに
これでPug+Quasarを用いたVueプロジェクトの準備が出来ました。
Vue-CLIを使えばコマンドを打つだけでだいたい整える事が出来るので、ぜひ参考にしてみてください♪
Travenist
Otakenist
