はじめに
Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。
なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。
導入方法
やり方は二つ
- quasar cliを入れる
- vue cliにプラグインとしてquasarを入れる。
元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。
まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、
|
1 |
vue create <Project Name> |
と打てば、<Project Name>
このプロジェクトに、プラグインとして、quasarを導入します。
vue cliで作成したプロジェクトのディレクトリ に移動し、vue add
|
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 83 |
>>> vue add quasar WARN There are uncommited changes in the current repository, it's recommended to commit or stash them first. ? Still proceed? Yes 📦 Installing vue-cli-plugin-quasar... + vue-cli-plugin-quasar@2.0.0 added 1 package from 1 contributor and audited 24552 packages in 6.762s found 0 vulnerabilities ✔ 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 (k ebab-case) ? Pick your favorite CSS preprocessor: Sass ? Choose Quasar Icon Set Material ? Default Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/u i/lang en-us ? Use RTL support? Yes ? Select features: (Press <space> to select, <a> to toggle all, <i> to invert selection) 🚀 Invoking generator for vue-cli-plugin-quasar... 📦 Installing additional dependencies... > node-sass@4.13.0 install /Users/kouki/Projects/vue-lesson/node_modules/node-sass > node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/darwin-x64-79_binding.node Download complete ░⸩ ⠋ : Binary saved to /Users/kouki/Projects/vue-lesson/node_modules/node-sass/vendor/darwin-x64-79/binding.node Caching binary to /Users/kouki/.npm/node-sass/4.13.0/darwin-x64-79_binding.node > core-js@2.6.11 postinstall /Users/kouki/Projects/vue-lesson/node_modules/babel-runtime/node_modules/core-js > node -e "try{require('./postinstall')}catch(e){}" > node-sass@4.13.0 postinstall /Users/kouki/Projects/vue-lesson/node_modules/node-sass > node scripts/build.js Binary found at /Users/kouki/Projects/vue-lesson/node_modules/node-sass/vendor/darwin-x64-79/binding.node Testing binary Binary is fine added 107 packages from 74 contributors and audited 25143 packages in 12.707s found 0 vulnerabilities ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-quasar The following files have been updated / added: .gitignore .postcssrc.js README.md babel.config.js package-lock.json package.json public/favicon.ico public/index.html src/App.vue src/assets/logo.png src/components/HelloWorld.vue src/main.js src/quasar.js src/styles/quasar.sass src/styles/quasar.variables.sass vue.config.js You should review these changes with git diff and commit them. 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 |
実行する時のコマンドはvue cli
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
>>> npm run serve > vue-lesson@0.1.0 serve /Users/kouki/Projects/vue-lesson > vue-cli-service serve INFO Starting development server... 40% building 145/171 modules 26 active ...son/node_modules/core-js/modules/es.array.filter.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. 98% after emitting SizeLimitsPlugin DONE Compiled successfully in 12350ms 22:09:36 App running at: - Local: http://localhost:8080/ - Network: http://192.168.11.4:8080/ Note that the development build is not optimized. To create a production build, run npm run build. |
Quasar拡張機能
Quasarには色々な拡張機能が存在しています。QMarkdownを試してみたので、こちらの記事も是非👇
QuasarでMarkdownを表示する
Leave a Reply