Vue.jsにQuasar Frameworkを入れてみる

はじめに

Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。

なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。

導入方法

やり方は二つ

quasar cliを入れる
vue cliにプラグインとしてquasarを入れる。

元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。

まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、

vue create <Project Name>

1	vue create <Project Name>

と打てば、<Project Name>プロジェクトが作成されます。
このプロジェクトに、プラグインとして、quasarを導入します。

vue cliで作成したプロジェクトのディレクトリに移動し、vue addでQuasarを導入。

>>> 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 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と同じ。

>>> 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.

>>> 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 – App Extension

Quasarには色々な拡張機能が存在しています。QMarkdownを試してみたので、こちらの記事も是非👇
QuasarでMarkdownを表示する

はじめに

導入方法

Quasar拡張機能

シェア！

コメントを残すコメントをキャンセル

広告

最近の投稿

はじめに

導入方法

Quasar拡張機能

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Azure CLIとAzure PowerShell、どっち使う問題

子コンポーネントから親コンポーネントへ〜$emitを使って〜

Vueのプロパティとカスタムイベント〜他のコンポーネントへのデータの受け渡し…

Djangoでmigrationのやり直しが上手くいかない

pythonからC#で書いたプログラムを呼び出す環境を作成する

Google for Jobのトップページを読んでみた

【GitHub】remote: Invalid username or pa…

MS Learnをやってみた（Select a cloud deployme…

広告

最近の投稿

コメントを残すコメントをキャンセル