株式会社ビジネス・ロジック・ジャパン

Quasar インストールの方法

Quasar インストール

Quasar インストール

Quasar インストール

Quasarのインストールの解説です、 Visual Studio Codeのターミナルで行っています、node.jsのインストールは先行して行っています(node.jsに関しては次回説明します)、vue.jsはVue3を設定しています。1分程度で10回程度のクリックで終わり簡単に環境設定が完了します。

Quasar インストール詳細

Quasar CLI(クエーサー CLI)

Quasar CLIでインストール

$ yarn global add @quasar/cli

$ yarn create quasar

Quasar インストール実行

既に yarn global add @quasar/cli
は実行していましたので、今回は

指定のフォールダーで
$ yarn create quasar

PS 〇> yarn create quasar
yarn create v1.22.19
warning package.json: No license field

[1/4] Resolving packages…
[2/4] Fetching packages…
[3/4] Linking dependencies…
[4/4] Building fresh packages…
success Installed “create-quasar@1.3.0” with binaries:
– create-quasar

quasarインストール
>> App with Quasar CLI, let’s go! – spa/pwa/ssr/bex/electron/capacitor/cordovaを選択します。

? What would you like to build? » – Use arrow-keys. Return to submit.
> App with Quasar CLI, let’s go! – spa/pwa/ssr/bex/electron/capacitor/cordova
AppExtension (AE) for Quasar CLI
Quasar UI kit

インストールするフォルダーを選択します。

√ What would you like to build? » App with Quasar CLI, let’s go!
? Project folder: » bslghoge

Quasar のバージョンを選択します、> Quasar v2 (Vue 3 | latest and greatest) – recommendedを選択します。

? Pick Quasar version: » – Use arrow-keys. Return to submit.
> Quasar v2 (Vue 3 | latest and greatest) – recommended
Quasar v1 (Vue 2)

スクリプトの種類を選択します、今回はJavascriptを選択

? Pick script type: » – Use arrow-keys. Return to submit.
> Javascript
Typescript

Quasar アプリの CLI バリアントを選択します。Quasar App CLI with Webpackを選択しました

? Pick Quasar App CLI variant: » – Use arrow-keys. Return to submit.
Quasar App CLI with Vite – recommended
>Quasar App CLI with Webpack

パッケージ名を入力します

√ Pick Quasar App CLI variant: » Quasar App CLI with Webpack
? Package name: » bslghogehoge

プロジェクト製品名: (モバイル アプリを構築する場合は文字で始める必要があります)またプロジェクトの説明を入力します。
後で変更可能なので、enterで進んでもかまいません。

? Project product name: (must start with letter if building mobile apps) » bslghoge
enter
? Project description: » bslghoge
enter

‘git’ ́A Ք R } h ܂ ͊O R } h A
\ ȃv O ܂ ̓o b ` t @ C Ƃ ĔF Ă ܂ B

著者を入力します

? Author: » bslg

CSS プリプロセッサを選択してください > Sass with SCSS syntaxを選択しました

? Pick your CSS preprocessor: » – Use arrow-keys. Return to submit.
> Sass with SCSS syntax
Sass with indented syntax
None (the others will still be available)

結構、ESLintははまることが多く外します。

Instructions:
↑/↓: Highlight option
←/→/[space]: Toggle selection
a: Toggle all
enter/return: Complete answer
( ) ESLint
( ) State Management (Pinia)
(*) State Management (Vuex) [DEPRECATED by Vue Team]
(*) Axios
(*) Vue-i18n

Quasar • Generating files…

– babel.config.cjs
– postcss.config.cjs
– quasar.config.js
– README.md
– .editorconfig
– .gitignore
– .npmrc
– jsconfig.json
– package.json
– public/favicon.ico
– src/App.vue
– src/index.template.html
– .vscode/extensions.json
– .vscode/settings.json
– public/icons/favicon-128×128.png
– public/icons/favicon-16×16.png
– public/icons/favicon-32×32.png
– public/icons/favicon-96×96.png
– src/assets/quasar-logo-vertical.svg
– src/boot/.gitkeep
– src/components/EssentialLink.vue
– src/layouts/MainLayout.vue
– src/pages/ErrorNotFound.vue
– src/pages/IndexPage.vue
– src/router/index.js
– src/router/routes.js
– src/css/app.scss
– src/css/quasar.variables.scss
– src/boot/axios.js
– src/boot/i18n.js
– src/i18n/index.js
– src/i18n/en-US/index.js
– src/store/index.js
– src/store/store-flag.d.ts
– src/store/module-example/actions.js
– src/store/module-example/getters.js
– src/store/module-example/index.js
– src/store/module-example/mutations.js
– src/store/module-example/state.js

Quasar • SUCCESS • The project has been scaffolded

プロジェクトの依存関係をインストールするyarnを選択します。

? Install project dependencies? (recommended) » – Use arrow-keys. Return to submit.
> Yes, use yarn
No, I will handle that myself

yarn install v1.22.19
warning ..\package.json: No license field
info No lockfile found.
[1/5] Validating package.json…
[2/5] Resolving packages…
warning @quasar/app-webpack > fork-ts-checker-webpack-plugin > memfs@3.6.0: this will be v4
warning @quasar/app-webpack > webpack-dev-server > webpack-dev-middleware > memfs@3.6.0: this will be v4
warning @quasar/app-webpack > cssnano > cssnano-preset-default > postcss-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
[3/5] Fetching packages…
[4/5] Linking dependencies…
[5/5] Building fresh packages…
success Saved lockfile.
Done in 52.78s.

To get started:

cd xxxxxx
quasar dev # or: yarn quasar dev # or: npx quasar dev

Documentation can be found at: https://v2.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://v2.quasar.dev/why-donate
Donation campaign: https://donate.quasar.dev
Any amount is very welcome.
If invoices are required, please first contact Razvan Stoenescu.

Please give us a star on Github if you appreciate our work:
https://github.com/quasarframework/quasar

Enjoy! – Quasar Team

Done in 566.96s.
PS D:\xxxxxxxx>

Quasarのインストール

たったこれだけです。

QUASAR 開発メモ

Quasar レーアウトデザイナー

Quasar レーアウトデザイナー

Quasar レーアウトデザイナーの解説です、Quasar レーアウトデザイナーとは、Quasar frameworkでダッシュボードの作成を簡単に使用できるダッシュボード・ページデザインを行うツールです。業務システムの設計・アプリケーション作成の必須のダッシュボード・ページデザインを簡単に作成することが可能です、

DXニュース詳細 »
Quasar ダッシュボード | Quasar| DXシステム開発の株式会社ビジネス・ロジック・ジャパン

Quasar ダッシュボード

Quasar ダッシュボードの解説です、 Quasar ダッシュボードとは、Quasar frameworkでダッシュボードの作成を簡単に使用できるダッシュボードテンプレートです。業務システムの設計・アプリケーション作成の必須のダッシュボードを簡単に作成することが可能です、しかも無料で使用可能です。

DXニュース詳細 »
Quasar ポート変更

Quasar ポート変更

Visual Studio 2022 Visual Studio Codeは現在システム開発の必須ツールと言っていいのかもしれません、よく開発者の間で、どちらが優れたツールなのいか語られていますが、これらのツールを使用する目的が重要になってきます。いかに正確にいかに早くプログラム構築・システム構築が行えるかでツールを使用します。DX開発のbslgではVisual Studio 2022はC#の開発に使用しています、WEB系の開発には、Visual Studio Codeを使用しています。

DXニュース詳細 »

“DXニュース”

株式会社ビジネス・ロジック・ジャパン(BSLG)からのDX最前線  ニュースお知らせ

DXに関する情報を、BSLGとして発信します。

Google検索件数表示されない

Google検索件数表示されない

Google検索件数表示されないように変更されたようですが、Google検索件数表示する方法を掲載しす、2024年5月19日に掲載します、記事を掲載する上で基本となるのがGoogle検索件数がどのように掲載すすれいいかの基本になります、2024年5月19日に確認したところによると掲載されてなくなっています。現時点で表示する方法を掲載します。SEO対策は株式会社ビジネス・ロジック・ジャパンお気軽にお問い合わせください。

DXニュース詳細 »
システム開発部の課題

システム開発部門の現状

システム開発部門の現状と課題をを掲載しました、長年業務システム開発の株式会社ビジネス・ロジック・ジャパン(山口県山口市)から、システム開発部門の現状と課題を社内システム部門の在り方、今後考えていかないといけないスキル・考え方を提言します。業務システム開発・導入・サポートを行っている山口県山口市 業務システム開発の株式会社ビジネス・ロジック・ジャパンお気軽にお問い合わせください。

DXニュース詳細 »
山口県 DXシステム

最新 システム開発はAPI

最新システム開発はAPIを掲載しました、山口県山口市の API連動 業務システム開発の株式会社ビジネス・ロジック・ジャパン(山口県山口市)は、最新の業務システムの開発手法はAPIシステム 連動の業務システム開発手法になってまいります、安定した外部APIシステムと自社で開発したシステムを連動させることにより、開発効率化・業務システムの安定性を実現することが可能になります。業務システム開発を行う場合今後必要になりと考えます、 弊社は各種APIシステム連動したシステムを開発を行っています。業務システム開発・導入・サポートを行っている山口県山口市 業務システム開発は他システムAPIシを連動させた開発は業務システム開発の株式会社ビジネス・ロジック・ジャパンお気軽にお問い合わせください。

DXニュース詳細 »
山口県 DXシステム

FREEE会計 システム開発について

FREEE会計 システム開発を掲載しました、山口県山口市)のFREEE会計システム開発の株式会社ビジネス・ロジック・ジャパン(山口県山口市)は、APIシステム freee会計(フリー)でのFREEE会計に連動するシステム開発を行っています。必要システムを、 APIシステム(FREEE APIとPHP) 連動したシステムを開発を行っています。業務システム開発・導入・サポートを行っている山口県山口市 freee会計(フリー)開発の株式会社ビジネス・ロジック・ジャパンお気軽にお問い合わせください。

DXニュース詳細 »
ホームページ制作・作成|AI搭載ホームページ制作|AIホームページ制作・作成の株式会社ビジネス・ロジック・ジャパン

山口ホームページ制作を掲載

山口ホームページ制作を掲載につきまして、山口県山口市ホームページ制作の株式会社ビジネス・ロジック・ジャパンよる解説します。山口ホームページ制作に関しては株式会社ビジネス・ロジック・ジャパンにお問合せ下さい。

DXニュース詳細 »
システムコンサルタントとは何か、システムコンサルタントの目的とノウハウについてシステムコンサルタント 株式会社ビジネス・ロジック・ジャパンが解説します、システムコンサルタントとは企業システムを企業にとって有益にするシステムコンサルタントですDXを推進する考え方です、プログラムをただ単に作成することは、企業において無意味なものになります。システムコンサルタント・DXにより迅速に低価格でDX化・システム開発の 株式会社ビジネス・ロジック・ジャパンにお問合せ下さい。

システムコンサルタント 山口県

山口県のシステムコンサルタントとは何か、システムコンサルタントの目的とノウハウについて山口県山口市のシステムコンサルタント 株式会社ビジネス・ロジック・ジャパンが解説します、システムコンサルタントとは企業システムを企業にとって有益にするシステムコンサルタントですDXを推進する考え方です、プログラムをただ単に作成することは、企業において無意味なものになります。山口県山口市のシステムコンサルタント・DXにより迅速に低価格でDX化・システム開発の 株式会社ビジネス・ロジック・ジャパンにお問合せ下さい。

DXニュース詳細 »