10分で自分のVue CLI 3プロジェクトテンプレートを構築

0 x 01契機
Vue CLI 3が出てきてからずいぶん経ちましたが、ずっとそのプラグインシステムを研究しようとしても時間がありませんでした~~(実は怠け者ですが)、ちょうど最近プロジェクトグループの規範を統一する必要があります~~~~、そこできっかけがありました.
まずドキュメントを見てください:CLI 3プラグインとPreset
それから、フロントエンドのプロジェクトテンプレートを完全にカスタマイズする方法を教えてあげます.お母さんは私がコピーして貼るたびに心配する必要はありません.
特に説明:このpresetはnpmに公開する必要はなく、github、gitlab、git repoをサポートし、直接ローカルに導入することもできますよ~
0 x 02両名詞
プラグイン
名前の通りプラグインです

Vue CLIは、プラグインベースのアーキテクチャ

を使用しています.

プラグインベースのアーキテクチャにより、Vue CLIを柔軟かつ拡張可能にする

.
Preset
プリセットに翻訳可能

新しいプロジェクトの作成に必要な事前定義オプションとプラグインを含むJSONオブジェクト

はまた、本明細書で説明するように、予め設定されたプロジェクトテンプレートとして理解される.

vue createを使用してプロジェクトを作成したパートナーは、作成が完了するとCLIがpresetとして保存するかどうかを示すことを覚えているはずです.ここで最初の項目は、保存するオブジェクトを指します.保存した場合は、下のコマンドで前に保存したpresetが表示されます.

cat ~/.vuerc

各preset.jsonは大体このようなフォーマットです.

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

0 x 03両者の違い
プラグイン
1つのプラグインには、次の3つのセクションがあります.

Serviceプラグイン

generatorファイル(オプション)

promptsファイル(オプション)

Preset
1つのPresetプロジェクトには、次の3つのセクションがあります.

preset.json

generatorファイル(オプション)

promptsファイル(オプション)

2つの違いは、プラグインにはサービスプラグインが必要であり(これは本明細書で説明するプラグインの範疇よりも狭い)、Presetにはpresetが含まれる必要があることである.json
0 x 04コアコンセプト
本文は主にPresetを話しているので、残りの核心概念はドキュメントを見ればいいですね:核心概念
Prompts
本質的には会話プロファイルであり、vue内蔵プラグインとサードパーティプラグインのこのファイルの書き方は異なります.覚えておいてください.
それはInquirerです.jsの問題の配列
例は次のとおりです.

//            
module.exports = [
  {
    type: 'list', //         
    name: 'module', //   ，     generator    options   
    message: '          ', //    
    choices: [
      { name: 'Module1', value: 'module1' },
      { name: 'Module2', value: 'module2' },
      { name: 'Module3', value: 'module3' }
    ],
    default: 'module0',
  },
  {
    type: 'input', //        
    name: 'moduleName',
    message: '       ',
    default: 'myModule'
  }
]

もちろん使えないなら空の配列を直接あげればいいですよ.
実行の効果は、次のようになります.
Generator
3つのパラメータを受信する関数をエクスポートするジェネレータと呼ばれます

api:GeneratorAPIインスタンス

options:prompts問題配列のユーザ入力を組み合わせたオプションオブジェクト

と簡単に理解できる.

rootOptions:preset全体.jsonオブジェクト

//           node  ，     node    
module.exports = (api, options, rootOptions) => {
  //    `package.json`     
  api.extendPackage({
    scripts: {
      test: 'vue-cli-service  command'
    }
  })

  //      ejs    `./template`       
  api.render('../template')

  if (options.module === 'module1') { 
    // options.module                   ，   : 'module0'
    console.log(`Your choice is ${options.module}`)
  }

  if (options.moduleName === 'myModule') {
    // options.moduleName                 
    console.log(`Your input is ${options.moduleName}`)
  }
}

0 x 05実戦
上のコードは筆者が空の棚を用意しました.
vue-preset-template
皆さんはまずcloneを降りて、それから走って効果を感じることができます.
筆者の倉庫に直行する

vue create --preset savokiss/vue-preset-template 

clone降りてローカルコードを走る

vue create --preset ./vue-preset-template 

git倉庫のpresetを走る

vue create --preset direct: 

はい、自分のプロジェクトテンプレートを発表するまであと一歩しかありません.それはtemplateフォルダの内容を記入することです.
実はプロジェクトで使われているファイルをそのまま入れておけばいいのですが、.で始まるファイルやscssファイルの書き方が違いますので、具体的には以下の参考項目をご覧ください
0 x 06参照項目
筆者は2つのpresetを整理して、starを歓迎します

PCエンドプロジェクトテンプレート:vue-preset-pc

モバイル端末プロジェクトテンプレート:vue-preset-mobile

0 xFFドキュメント

原文リンク

CLI 3プラグインとPreset

プラグインコアコンセプト

ラック

公衆番号:コード力全開