1. 次に、vue create プロジェクト名とオプション機能によるプロジェクトの作成について説明します。
まず、ターミナルで vue create project name を実行してプロジェクトを作成し、Enter キーを押します。
2. ESLint コード インスペクションの場合、標準ごとに要件が異なります。上の図に示されている標準を選択してください。コード検査は非常に厳密です。推奨される選択の具体的な要件は何ですか。いくつか挙げて
ください
。 (インポート) コードをまとめる必要があります。間に他のコードを混在させることはでき
ませ
ん
。コードの各行の最後で使用
● 文字列には一重引用符を使用する必要があります
● . ...
しかし、vscode プラグインを構成すると、要件を満たすようにコードが自動的に調整されます。
3. 前回プリセットとして保存した後、次回 vue create project name を実行すると、この保存されたプリセットを直接使用できます。以下に示すように：
4. プリセットを削除する場合は、C:/Users/your username/.vuerc を見つけて、内部のプリセットを削除する必要があります。
Mac システムの場合は、個人用フォルダーに移動し (小さな家のアイコンを描画します)、Command+Shift+. を押して隠しファイルを表示し、.vuerc 自体でプリセットを見つけます。
5. 元のプロジェクトをクリアする
● App.vue、基本テンプレートのまま
● コンポーネント内の HelloWorld.vue コンポーネントを削除
● ビュー内の 2 つのコンポーネントを削除
● ルーティングをリセット (router/index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
// ---------------------------------- ------------- Home
Vue.use(VueRouter)
const routes = [] // ------------------をロードする行を削除します- --------- この配列をクリア
const router = new VueRouter({ routes }) export default router
8. プロジェクトのディレクトリ構造
node_modules --- ダウンロードしたサードパーティ パッケージ (移動不可)
public --- プロジェクトのホームページを保存 (移動不可)
src --- コーディング アセットの場所
--- 保存プロジェクトのリソース (画像など)
コンポーネント -- - ストレージ コンポーネント (ルーティングによって制御されない、一般的に共通およびカプセル化されたコンポーネントを配置)
ビュー --- ストレージ コンポーネント (ルーティングによって制御されるコンポーネント、ここに配置)
ルーター --- ファイル構成ファイルのストア
-- - vuex 構成
App.vue --- プロジェクトのルート コンポーネント (他のすべてのコンポーネントはその子)
main.js --- パッケージ化されたエントリ ファイルです (main.js は最初に実行されるファイルです) )
.eslintrc.js --- ESLint 設定ファイル.
gitignore --- git ignore ファイル (作成済み、加工不要)
babel.config.js --- babel は JS の価格を下げるため (現在のプロジェクトではありません) package
-lock.json --- サードパーティ パッケージのバージョンをロックするファイル (移動する必要はありません)
package.json --- プロジェクトの構成ファイル
ESLint 構成
ESLint のデフォルト設定:
● 変数は変更されず、const で宣言する必要があります
● すべてのインポートは最初に配置する必要があります
● 文字列には単一引用符を使用します
● ステートメントの最後にセミコロンを追加しません
● 関数の括弧の前にスペースを追加するかどうか。デフォルトではスペースを追加します
● プロジェクトで .eslintrc.js を見つけ、次の構成項目をルールに追加します。
コードを書きやすくするために、Prettier プラグインをインストールしたことがあります。
このフォーマット プラグインは、ESLint の既定の構成 (関数の括弧の前にスペースを追加するかどうか) と競合します。
● ESLint では、すべての関数の括弧の前にスペースを入れる必要があります。
● Prettier プラグインは、フォーマット後、オブジェクト内のメソッドと括弧の間のスペースを削除します。
.eslintrc.js ファイル (ESLint 構成ファイル) で、ルール (ルール) を見つけて、次の構成を追加します。
// 関数名と括弧の間のスペースの問題を修正
// 参照ドキュメント: https://eslint.bootcss.com/docs/rules/space-before-function-paren
'space-before-function-paren': [
' error',
{ anonymous: 'always', // 無名関数のかっこの前にスペースが必要です。たとえば、setTimeout(function () {}) named: 'never', // 名前付きのメソッドにはスペースは必要ありません。たとえば、abc() {} asyncArrow: 'always' // アロー関数、スペースが必要です } ]
または、これらの 2 行のコードを追加します
「関数括弧の前のスペース」: 0,
'no-multiple-empty-lines': 0