Vue.jsにQuasar Frameworkをインストールして使用する

Vue.jsにQuasar Frameworkをインストールして使用する

vue.jsのUIフレームワークである「Quasar Framework」の導入手順を記述してます。


  • OS  CentOS Linux release 8.2.2004 (Core)
  • node v12.16.3
  • npm 6.14.4
  • @vue/cli 4.1.1
  • Quasar v1.12.13



vue create vueapp

プロジェクト作成時は、defaultを選択してます 。

Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)

Quasar Frameworkインストール


## 移動
cd vueapp

## インストール
vue add quasar

+ vue-cli-plugin-quasar@2.0.2
added 1 package from 1 contributor in 25.855s

32 packages are looking for funding
  run `npm fund` for details

✔  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: Sass
? Choose Quasar Icon Set Material
? Default Quasar language pack - one from 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...

Quasar Framework起動


npm run serve

ブラウザから http://プライベートIP:8080 にQuasar Frameworkが利用できるようになっていることが確認できます。