プロジェクト開始準備
プロジェクトを作成します (Vite ビルド ツールを使用してプロジェクト テンプレートを作成します)
npm init vue@latest
- プロジェクトを作成したら、npm installするだけです
カタログ紹介
プラグインのインストール
- vscode が推奨するプラグインを見てみましょう
- 型検出を改善するために推奨プラグインをインストールする
エイリアスの作成
コンパイル手順
プロジェクト構成
アイコンとタイトルを設定する
プロジェクトのエイリアスを構成する
ts.config.json を構成する
vscode プラグインが設定されているかどうかを確認する
プロジェクトコード仕様の構成
統合された editorconfig 構成
- 複数の開発者が異なる IDE エディタで同じプロジェクトに取り組んでいる場合に、一貫したコーディング スタイルを維持するのに役立ちます。
- Vscode はプラグインをインストールする必要があります: EditorConfig for VS Code
よりきれいなツールライブラリ
- 空白行も削除できる強力なコード整形ツール。
- このプロジェクトを作成すると、インストールするかどうかを尋ねられますが、インストールしない場合は、コマンドに従って自分でインストールすることもできます。
- 1. インストール
npm install prettier
- 2. 構成
- 3. ファイルを無視するように .prettlerignore を設定することもできます (上記のインストールは完了しています)
- 4. pretler が有効かどうかをテストし、保存して、空白行が削除されていないことを確認します。
- 5. package.json でスクリプトを構成します (この方法を使用する必要はありません。以下の方が簡単です)
"prettier":"prettier --write"、ただし操作が面倒で、npm run を常にきれいに実行できるわけではありません。- 6. vscodeプラグインを使用する
- 7. 最初に構成を確認します
- 8. 方法 1、ctrl +p、次をクリックして一度フォーマットします
- 9. ただし、設定して保存したい場合は、フォーマットすることができます
。 10. 有効になるので、保存して、より美しいスタイルに合わせて最適化できます。
ESLint 検出構成
- 不正なコードを検出し、ヒントや警告を与えるために使用されます。
- 彼らの間の対立を解決するには
- このソリューションがインストールされます (プロジェクトの作成時に有効になっている場合は、ここで設定する必要はありません)
npm install eslint-pluugin-prettier eslint-config-prettier -D
CSS スタイルのリセット
- 正規化.css
- リセット.css
npm install normalize.css
手順: main.ts 内
import 'normalize.css'
ステップ 1、新しい css フォルダーを作成します
ステップ 2:index.less を main.ts にインポートする
ステップ 3: 直接使用するless が認識されない場合は、less をインポートします。
- 「less が見つからない」というメッセージが表示された場合は、「less」をインポートします。
npm install less -D
- cssが有効になります
