Help us understand the problem. What is going on with this article?

vue-cliで作ったTypeScriptのプロジェクトにquasarを組み込む

More than 1 year has passed since last update.

1.背景

vue-cliを使ってquasarを使いたかったので、チュートリアルを見ながら設定しようとしたが以下2パターンしか方法が無かった。
・既存のページに"script","link"タグでリソース読み込み(UMD Starter Kit)
・quasar-cliで最初から作る(Main Starter Kit)

vue-cliで作ったTypeScriptのプロジェクトに組み込みたかったんです。

2.答え

以下のプロジェクトで何をしているかを参考にして、自分のプロジェクトにその違いを反映させました。
https://github.com/JDrechsler/Quasar-with-TS-using-vue-cli-3

3.バージョン

vue => 2.5.13
@vue/cli => 3.0.0-beta.6
quasar-framework => 0.15.10
quasar-extras => 1.0.2
typescript => 2.7.2

4.やる事

①必要パッケージインストール

必要パッケージはこれ

npm install --save quasar-framework
npm install --save quasar-extras  #こっちはicon使わなければ不要

②tsconfig.jsonに以下コードを追加

quasarに型定義ファイルが無い為、ライブラリ読み込みでエラーになる問題を以下を追加で解消

"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,

WS000000.JPG

③main.ts でquasarを読み込み

以下のコードを追加してquasarを使えるようにする。

import Quasar, * as All from 'quasar-framework/dist/quasar.mat.esm.js'
import 'quasar-extras/material-icons'

require('quasar-framework/dist/umd/quasar.mat.min.css')
require('quasar-extras/roboto-font')

Vue.use(Quasar, {
    components: All,  // 使いたいコンポーネントのみ列挙でもよいはず
    directives: All   // こちらも上と同様
})

WS000001.JPG

5.quasarを使う

あとは以下のようなタグを.vueファイルに入れるとスタイルが反映されます。

      <q-btn label="My Button"/>
      <q-icon name="place" />

こんな感じで表示されます。
WS000002.JPG

この解消に丸1日掛かりましたorz

harufumi_abe
1979年産まれ 大阪でエンジニアやってます。 [言語] Java,PHP,JavaScript,TypeScript
https://blueworks.jp.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした