Vue.js＋TypeScriptでデジタル時計を作る – その1

2022年9月28日2022年9月29日プログラム,設定方法TypeScript,Vue.js

Vue.js＋TypeScript(Vue.ts？)でデジタル時計を作ったときの覚書。
プロジェクト作成時の選択について、ググってしまうためプロジェクト作成時の
選択内容についても書いておく。

今回はプロジェクト作成までのため、デジタル時計は次回。

https://mo22comi.com/2022/09/29/vuets-clock-2/

プロジェクト作成

任意のディレクトリで以下のコマンドを実行。

vue create vuets-clock

以下、選択項目。カッコ内は日本語訳。

Please pick a preset
（プリセットを選択してください）

>　Manually
を選択する。

Check the features needed for your project
（プロジェクトに必要な機能を確認する）

[●]Babel
[●]TypeScript
[●]CSS Pre-processors
[●]Linter
を選択する。
方向キーで選択し、スペースキーで選択できる。

「CSS Pre-processors」に関しては、SCSSを使用したいので選択しているため
必要なければ選択しなくてOK。

Choose a version of Vue.js that you want to start the project with
（プロジェクトを開始する Vue.js のバージョンを選択します）

> 3.x

Use class-style component syntax?
（クラス スタイルのコンポーネント構文を使用しますか?）

> N

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
（TypeScript と一緒に Babel を使用しますか (最新モード、自動検出ポリフィル、JSX のトランスパイルに必要)?）

> N

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
（CSS プリプロセッサを選択する）

> Sass/SCSS (with dart-sass)

Pick a linter / formatter config
（リンター/フォーマッター構成を選択）

> ESLint + Prettier

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to pro
ceed)
（追加の lint 機能を選択します）

> Lint on save

Where do you prefer placing config for Babel, ESLint, etc.?
（Babel、ESLint などの構成をどこに配置するのが好きですか?）

> In dedicated config files

Save this as a preset for future projects?
（これを将来のプロジェクトのプリセットとして保存しますか?）

> N

プロジェクトの作成が走って、
🎉 Successfully created project vuets-clock.
と表示されたらプロジェクト作成完了。

実行

下記のコマンドを順に実行する。

cd vuets-clock
npm run serve

ブラウザに、
http://localhost:8080/
でアクセスして表示されればOK。

その2に続く。

https://mo22comi.com/2022/09/29/vuets-clock-2/