2020.04.10 備忘録 debonki

HTTP エラー 500.19 – Internal Server Error

仕事で.NET Framework 2.0の改修作業をやる機会があったのでその時のメモ（現在2020年4月6日） .NET Framework 4.0以降もしくは.NET CoreであればWindows側でIISの設定をしなくても動作するためビルドにたどり着くまでに躓くことは少ないと思います。これが.NET Framework 3.5より前になると、「Windowsの機能の有効化」から「.NET Framework 3.5」と「インターネットインフォーメーションサービス」を有効化「インターネットインフォーメーションサービス(IIS)マネージャー」からアプリを追加といった手順を踏む必要があります。エラーを解決するために僕が踏んだリンクたち↓ 初めて.NET Framework 3.5で開発することになった気の毒な方はまずこっから。・Install the .NET Framework 3.5 on Windows 10, Windows 8.1, and Windows 8 以下はIISの設定周り・IIS でアプリケーション（仮想ディレクトリ）の追加エラーが出たら… ・[IIS] アクセス許可がないため構成ファイルを読み取ることができませんそれでもダメなら・c# – validateintegratedmodeconfiguration – マネージパイプラインモード違い

2020.04.05 備忘録 debonki

【GitHub】remote: Invalid username or password.

GitHubにPushしようとした時にエラーになるときの備忘録僕の場合は、GitHubを２段階認証に設定していたことが原因でした。参考サイト 1分でできるGithubの2段階認証の設定

2020.03.15 備忘録 debonki

認証（JWT）と認可（djoser）の違い

Djangoで認証関連のライブラリを調べていた時に、認証と認可の違いを理解していなくて時間を取られたので、メモ JWTは認証を行うためのライブラリ、 djoserは認可を行うライブラリです。

2020.02.19 Web開発 debonki

DjangoとMySQLを接続する

DjangoとMySQLを接続した時の備忘録です。 MySQLの設定を確認 Django側の設定で必要な項目は、データベース名ユーザー名（権限を持っている）ユーザーのパスワードホスト名ポート番号です。これらを実際に調べていきます。 MySQLサーバーへ入る

[vagrant@localhost ~]$ mysql -u Admin -pP@ssw0rd
　　　　　　　　　　　　　　　　　　　⬆️ユーザーのパスワード

1 2	[vagrant@localhost ~]$ mysql -u Admin -pP@ssw0rd 　　　　　　　　　　　　　　　　　　　⬆️ユーザーのパスワード

¥sでデータベースの情報を取得します。

mysql> \s
--------------
mysql  Ver 14.14 Distrib 5.7.29, for Linux (x86_64) using  EditLine wrapper

Connection id:      4
Current database:   
⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️使うのはこれ！！！
Current user:       Admin@localhost
SSL:            Not in use
Current pager:      stdout
Using outfile:      ''
Using delimiter:    ;
Server version:     5.7.29 MySQL Community Server (GPL)
Protocol version:   10
Connection:     Localhost via UNIX socket
Server characterset:    latin1
Db     characterset:    latin1
Client characterset:    utf8
Conn.  characterset:    utf8
UNIX socket:        /var/lib/mysql/mysql.sock
Uptime:         16 min 29 sec

Threads: 1  Questions: 24  Slow queries: 0  Opens: 113  Flush tables: 1  Open tables: 106  Queries per second avg: 0.024
--------------

mysql Ver 14.14 Distrib 5.7.29, for Linux (x86_64) using EditLine wrapper

Connection id: 4

Current database:

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️使うのはこれ！！！

Current user: Admin@localhost

SSL: Not in use

Current pager: stdout

Using outfile: ''

Using delimiter: ;

Server version: 5.7.29 MySQL Community Server (GPL)

Protocol version: 10

Connection: Localhost via UNIX socket

Server characterset: latin1

Db characterset: latin1

Client characterset: utf8

Conn. characterset: utf8

UNIX socket: /var/lib/mysql/mysql.sock

Uptime: 16 min 29 sec

Threads: 1 Questions: 24 Slow queries: 0 Opens: 113 Flush tables: 1 Open tables: 106 Queries per second avg: 0.024

--------------

ユーザー名：Admin ホスト名：loaclhost になります。ユーザーの作成方法、権限を付与する方法などは、公式ドキュメントを参照してみてください。【MySQL】公式マニュアル作成したデータベース名は"DiaryApp"にしました。

mysql> create database DiaryApp;
Query OK, 1 row affected (0.00 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| DiaryApp           |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

mysql> create database DiaryApp;

Query OK, 1 row affected (0.00 sec)

mysql> show databases;

+--------------------+

| Database |

+--------------------+

| information_schema |

| DiaryApp |

| mysql |

| performance_schema |

| sys |

+--------------------+

5 rows in set (0.00 sec)

Django側の設定次は、Django側の設定です。 setting.pyに設定を足すのと、models.pyを作成します。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'DiaryApp',
        'USER': 'Admin',
        'PASSWORD': 'P@ssw0rd',
        'HOST': '',
        'PORT': '3306',
        'OPTIONS': {
        # 制約を厳しくチェック
        'sql_mode': 'traditional',
       },
    }
}

'ENGINE': 'django.db.backends.mysql',

'NAME': 'DiaryApp',

'USER': 'Admin',

'PASSWORD': 'P@ssw0rd',

'sql_mode': 'traditional',

},

}

# coding: utf-8
from django.db import models
from datetime import date

class Diary(models.Model):
    date = models.DateField(default=date.today, primary_key=True)
    title = models.CharField(max_length=128)
    body = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    publishing = models.BooleanField(default=True)

from django.db import models

from datetime import date

class Diary(models.Model):

date = models.DateField(default=date.today, primary_key=True)

title = models.CharField(max_length=128)

body = models.TextField()

created_at = models.DateTimeField(auto_now_add=True)

updated_at = models.DateTimeField(auto_now=True)

publishing = models.BooleanField(default=True)

マイグレーション models.pyに書いた「モデル」をデータベースに反映させます。

[vagrant@localhost diary_app]$ python manage.py makemigrations [app名]
[vagrant@localhost diary_app]$ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying sessions.0001_initial... OK

[vagrant@localhost diary_app]$ python manage.py makemigrations [app名]

[vagrant@localhost diary_app]$ python manage.py migrate

Operations to perform:

Apply all migrations: admin, auth, contenttypes, sessions

Running migrations:

Applying contenttypes.0001_initial... OK

Applying auth.0001_initial... OK

Applying admin.0001_initial... OK

Applying admin.0002_logentry_remove_auto_add... OK

Applying admin.0003_logentry_add_action_flag_choices... OK

Applying contenttypes.0002_remove_content_type_name... OK

Applying auth.0002_alter_permission_name_max_length... OK

Applying auth.0003_alter_user_email_max_length... OK

Applying auth.0004_alter_user_username_opts... OK

Applying auth.0005_alter_user_last_login_null... OK

Applying auth.0006_require_contenttypes_0002... OK

Applying auth.0007_alter_validators_add_error_messages... OK

Applying auth.0008_alter_user_username_max_length... OK

Applying auth.0009_alter_user_last_name_max_length... OK

Applying auth.0010_alter_group_name_max_length... OK

Applying auth.0011_update_proxy_permissions... OK

Applying sessions.0001_initial... OK

MySQLに入って、正しくテーブルが作られているか確認してみます。

mysql> use DiaryApp
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed

mysql> show tables;
+----------------------------+
| Tables_in_DiaryApp         |
+----------------------------+
| auth_group                 |
| auth_group_permissions     |
| auth_permission            |
| auth_user                  |
| auth_user_groups           |
| auth_user_user_permissions |
| diary_app_diary            |
| django_admin_log           |
| django_content_type        |
| django_migrations          |
| django_session             |
+----------------------------+
11 rows in set (0.00 sec)

Reading table information for completion of table and column names

You can turn off this feature to get a quicker startup with -A

Database changed

mysql> show tables;

+----------------------------+

| Tables_in_DiaryApp |

+----------------------------+

| auth_group |

| auth_group_permissions |

| auth_permission |

| auth_user |

| auth_user_groups |

| auth_user_user_permissions |

| diary_app_diary |

| django_admin_log |

| django_content_type |

| django_migrations |

| django_session |

+----------------------------+

11 rows in set (0.00 sec)

2020.02.18 備忘録 debonki

CentOS 7にMySQLをインストールする

はじめに

# MySQLをインストール
yum localinstall http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm
yum info mysql-community-server 
sudo yum install -y mysql-community-server

yum localinstall http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm

yum info mysql-community-server

sudo yum install -y mysql-community-server

とやったあとの初期設定でハマったので備忘録。初期パスワードの確認 rootでMySQLに入ろうとすると、パスワードが必要というエラーが出てしまうので、初期設定されているパスワードを確認する必要があります。

[vagrant@localhost ~]$ mysql -u root
mysql: [Warning] Using a password on the command line interface can be insecure.
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

1

2

3

[vagrant@localhost ~]$ mysql -u root

mysql: [Warning] Using a password on the command line interface can be insecure.

ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

/var/log/mysqld.logに残っている、初期設定時のログからパスワードを確認します。

[vagrant@localhost ~]$ sudo cat /var/log/mysqld.log
2020-02-27T16:00:23.460496Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
2020-02-27T16:00:23.741340Z 0 [Warning] InnoDB: New log files created, LSN=45790
2020-02-27T16:00:23.796645Z 0 [Warning] InnoDB: Creating foreign key constraint system tables.
2020-02-27T16:00:23.855279Z 0 [Warning] No existing UUID has been found, so we assume that this is the first time that this server has been started. Generating a new UUID: 4352063e-597a-11ea-acf0-5254008afee6.
2020-02-27T16:00:23.856630Z 0 [Warning] Gtid table is not ready to be used. Table 'mysql.gtid_executed' cannot be opened.
2020-02-27T16:00:25.340051Z 0 [Warning] CA certificate ca.pem is self signed.
2020-02-27T16:00:25.804182Z 1 [Note] A temporary password is generated for root@localhost: kJbD+Z6UfPYD
                                                  ⬆️⬆️⬆️パスワード

[vagrant@localhost ~]$ sudo cat /var/log/mysqld.log

2020-02-27T16:00:23.460496Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).

2020-02-27T16:00:23.741340Z 0 [Warning] InnoDB: New log files created, LSN=45790

2020-02-27T16:00:23.796645Z 0 [Warning] InnoDB: Creating foreign key constraint system tables.

2020-02-27T16:00:23.855279Z 0 [Warning] No existing UUID has been found, so we assume that this is the first time that this server has been started. Generating a new UUID: 4352063e-597a-11ea-acf0-5254008afee6.

2020-02-27T16:00:23.856630Z 0 [Warning] Gtid table is not ready to be used. Table 'mysql.gtid_executed' cannot be opened.

2020-02-27T16:00:25.340051Z 0 [Warning] CA certificate ca.pem is self signed.

2020-02-27T16:00:25.804182Z 1 [Note] A temporary password is generated for root@localhost: kJbD+Z6UfPYD

⬆️⬆️⬆️パスワード

確認できたら、MySQLサーバーへログインし、初期設定のパスワードを変更しましょう。

mysql> set password for root@localhost=password('P@ssw0rd!');
Query OK, 0 rows affected, 1 warning (0.00 sec)

1 2	mysql> set password for root@localhost=password('P@ssw0rd!'); Query OK, 0 rows affected, 1 warning (0.00 sec)

変更したパスワードでMySQLに入れることを確認

mysql> quit
Bye
[vagrant@localhost ~]$ mysql -u root -pP@ssw0rd!
mysql: [Warning] Using a password on the command line interface can be insecure.
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 4
Server version: 5.7.29

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> quit
Bye

[vagrant@localhost ~]$ mysql -u root -pP@ssw0rd!

mysql: [Warning] Using a password on the command line interface can be insecure.

Welcome to the MySQL monitor. Commands end with ; or \g.

Your MySQL connection id is 4

Server version: 5.7.29

Oracle is a registered trademark of Oracle Corporation and/or its

affiliates. Other names may be trademarks of their respective

owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> quit

Bye

パスワードの変更（追記） MySQLのパスワードポリシーにあったパスワードを設定していないと

mysql> \s
ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.

1 2	mysql> \s ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.

というエラーが出るので追記。パスワードポリシーの初期設定は以下の通り

mysql> SHOW VARIABLES LIKE 'validate_password%';

1	mysql> SHOW VARIABLES LIKE 'validate_password%';

Variable_name Value validate_password_check_user_name OFF validate_password_dictionary_file validate_password_length 8 validate_password_mixed_case_count 1 validate_password_number_count 1 validate_password_policy MEDIUM validate_password_special_char_count 1 参考：【Qiita】mysql5.7でパスワードを変更する

2020.02.06 Python debonki

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

Djangoのmigrationをやり直したくなったけれど、色々試したら、

python manage.py migrate

1	python manage.py migrate

で psycopg2.errors.UndefinedColumn: column "<field名>" does not existといったエラーが出て、後戻りできなくなったりする。僕みたいによく分かってない人は、一度全部消してからやり直したほうが絶対早い。 djangoでmigrateができない下のコマンドは、同じSchemaのテーブルを全削除するコマンド。

drop schema public cascade;
create schema public;

1 2	drop schema public cascade; create schema public;

これを実行してからマイグレーションすれば確実。

2020.02.03 Python debonki

you cannot alter to or from M2M fields, or add or remove through= on M2M fields

python manage.py migrate

1	python manage.py migrate

で、

you cannot alter to or from M2M fields, or add or remove through= on M2M fields

1	you cannot alter to or from M2M fields, or add or remove through= on M2M fields

のエラーで苦しめられたので備忘録。 "Django migration error :you cannot alter to or from M2M fields, or add or remove through= on M2M fields"(stack overflow) 要は、DBを作る時に、古いテーブルが邪魔をしてmigrationできないよ！と言うことらしい。上記リンクに飛ぶと、initial.pyでFieldを消す処理を加えると言う対応を紹介していたが、面倒だったので、テーブルをいったん消去して、もう一度migrationをかけて解決した。

2020.01.19 備忘録 debonki

‘npm run serve’ができない〜nodeのバージョン管理〜

普段、何も考えずに〇〇 updateと打ち込んでしまっているため、その戒めとしての備忘録ちゃんとバージョン管理ソフトは使いましょう。。。今回ハマったエラーはこちら

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/kouki/Projects/vue-login-sample/src/main.js: Package exports for '/Users/kouki/Projects/vue-login-sample/node_modules/@babel/helper-compilation-targets' do not define a '.' subpath (While processing: "/Users/kouki/Projects/vue-login-sample/node_modules/@vue/cli-plugin-babel/preset.js")
    at applyExports (internal/modules/cjs/loader.js:485:15)
    at resolveExports (internal/modules/cjs/loader.js:508:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:577:20)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27)
    at Function.Module._load (internal/modules/cjs/loader.js:785:27)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/kouki/Projects/vue-login-sample/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)
    at Module.load (internal/modules/cjs/loader.js:914:32)
    at Function.Module._load (internal/modules/cjs/loader.js:822:14)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/kouki/Projects/vue-login-sample/node_modules/@babel/preset-env/lib/index.js:11:14)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)

 @ multi (webpack)-dev-server/client?http://192.168.3.3:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: [BABEL] /Users/kouki/Projects/vue-login-sample/src/main.js: Package exports for '/Users/kouki/Projects/vue-login-sample/node_modules/@babel/helper-compilation-targets' do not define a '.' subpath (While processing: "/Users/kouki/Projects/vue-login-sample/node_modules/@vue/cli-plugin-babel/preset.js")

at applyExports (internal/modules/cjs/loader.js:485:15)

at resolveExports (internal/modules/cjs/loader.js:508:12)

at Function.Module._findPath (internal/modules/cjs/loader.js:577:20)

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27)

at Function.Module._load (internal/modules/cjs/loader.js:785:27)

at Module.require (internal/modules/cjs/loader.js:956:19)

at require (internal/modules/cjs/helpers.js:74:18)

at Object.<anonymous> (/Users/kouki/Projects/vue-login-sample/node_modules/@babel/preset-env/lib/debug.js:8:33)

at Module._compile (internal/modules/cjs/loader.js:1063:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)

at Module.load (internal/modules/cjs/loader.js:914:32)

at Function.Module._load (internal/modules/cjs/loader.js:822:14)

at Module.require (internal/modules/cjs/loader.js:956:19)

at require (internal/modules/cjs/helpers.js:74:18)

at Object.<anonymous> (/Users/kouki/Projects/vue-login-sample/node_modules/@babel/preset-env/lib/index.js:11:14)

at Module._compile (internal/modules/cjs/loader.js:1063:30)

@ multi (webpack)-dev-server/client?http://192.168.3.3:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

vue create　→　npm run serveなので特にエラーを起こすような操作はしていません。「babel」, 「webpack」と言った文字列が見えたのでおそらくnodeのバージョンの問題だろうと思って確認してみると、

>>> node -v
v13.1.0

1 2	>>> node -v v13.1.0

いや、もうほんとLTSとかちゃんと見とかないとダメですね　笑何も考えずにパッケージのアップデートをしたのは誰なんでしょうか　笑 nパッケージを導入これまで素のnodeを使っていたため、パッケージ管理ソフトを入れることにしました。 nodeのバージョン管理にはnパッケージと言うものがあるらしいのでこれをインストール

>>> npm install -g n
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
+ n@6.1.3
added 1 package from 4 contributors in 0.553s
>>> n --stable
12.14.1

/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n

+ n@6.1.3

added 1 package from 4 contributors in 0.553s

>>> n --stable

12.14.1

n現在の安定版を確認してみると、v１２だったため

>>> sudo n 12.14.1
   installed : v12.14.1 (with npm 6.13.4)
>>> node -v
v12.14.1

installed : v12.14.1 (with npm 6.13.4)

>>> node -v

v12.14.1

として、nodeを安定版に変更すると、無事にnpm run serveを通すことができました。めんどくさいけど、バージョン管理はするようにしよう。

2020.01.07 Web開発 debonki

子コンポーネントから親コンポーネントへのデータの受け渡し〜$emitを使って〜

Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。＄emit（）でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。ソースコードカスタムイベントを作って遊ぶために使ったソースコードです。親コンポーネント（App.vue）

<template>
  <div id="app">
    <BaseCheckbox
      v-model="Checked"
    ></BaseCheckbox>
    <h1>{{Checked}}</h1>
  </div>
</template>

<script>
import BaseCheckbox from "./components/BaseCheckbox";

export default {
  name: "app",
  props: {
    Checked: {
      type: Boolean,
      default: true
    }
  },
  components: {
    BaseCheckbox,
  },
};

import BaseCheckbox from "./components/BaseCheckbox";

子コンポーネント（Checkbox.vue）

<template>
  <div>
    <input
      type="checkbox"
      v-on:click="$emit('CheckboxChanged', $event.target.checked)"
    >
    <h1>{{checked}}</h1>
  </div>
</template>

<script>
export default {
  model: {
    prop: "checked",
    event: "CheckboxChanged"
  },
  props: {
    checked: Boolean,
    testText: String
  }
};
</script>

v-on:click="$emit('CheckboxChanged', $event.target.checked)"

event: "CheckboxChanged"

$emitを使ってみて処理自体はとても単純なのですが、定義しなければいけないプロパティ名、イベント名などが多く、親コンポーネントと子コンポーネントを行き来していると訳が分からなくなって、頭がこんがらがってしまうという印象でした。これは何度も使って慣れるしかないかも

2019.12.23 Web開発 debonki

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

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:

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.