1. 空の vue プロジェクトを作成する
vue に必要な環境:
- Node.js : Javascript ランタイム環境
- npm: パッケージ管理ツール (Node.js と一緒にインストール)
- vue.js : 公式コマンドライン ツール npm install vue -g
- vue-cli: vue スキャフォールディング npm install -g
- wepack: プロジェクトをパッケージ化するためのパッケージ化ツール npm install webpack -g
- npm パッケージ管理ツール: 管理に使用
- Vue 開発ツール、一般的にVisual Studio Codeを使用するのが好き
2. vue コマンドを作成する
e:/test/demo ディレクトリに test という名前の vue プロジェクトを作成します。
(1) [スタート] をクリックし、[cmd を入力] をクリックして、コマンド ライン ウィンドウに入ります。
(2) コマンド:
【1】e：eドライブに切り替える
【2】cd パス、パスの下に配置します。たとえば、cd test/demo は、test フォルダーの下に demo フォルダーを配置することを意味します。
[3] vue create プロジェクト名。たとえば、test という名前のプロジェクトを作成する場合は、vue create test と入力します — プリセットを選択してください( デフォルト構成または手動構成を選択してください)
(1) デフォルトの構成を選択します (比較的単純です) - デフォルトは後で OK になります
最後に、これは成功し、空の vue テンプレートである e:test/demo ディレクトリに test フォルダーが生成されます。
(2) 手動構成を選択します。
ステップ 1 : デフォルト構成または手動構成を選択し、ここで手動構成を選択します
ステップ 2: プロジェクトに必要な機能を確認する Vue の構成オプション (上下キーを押して選択したい項目に移動し、スペースバーを押して選択します。* は選択またはキャンセルを意味し 、選択後、 を押します。 Enterキーを押してステップに入る）、ここで私は選択しました
Vue のバージョンを選択 Vue のバージョンの選択、vue2.0 しかインストールしていないので、ここにはこのオプションはありません
Babel は 低バージョンのブラウザと互換性がありますか、ES6 を ES5 にコンパイルします
TypeScript は主に js 型をチェック
し ますプログレッシブをサポート Web アプリケーションの ルーティングを構成する
Router
Vuex の状態管理モードを構成するかどうか (ローカル ストレージに相当)
CSS プリプロセッサを構成するかどう か CSS プリプロセッサを構成するかどうか
Linter/Formatter コード検査ツール、フォーマッタ仕様の選択
ユニット テスト かどうか単体テストの作成、開発 プロセス中に、フロント エンドはコードに対して自己実行テストを実行します.
E2E テストが エンド ツー エンド テストを作成するかどうか
ステップ 3: use class-style component syntaxを選択し 、Class スタイル デコレーターを使用するかどうかを選択します。ここでは使用しないことを選択し、N を入力します。
違い：
デコレータなし: app= new Vue()vue インスタンスを作成し
、デコレータを使用した後:class app extends Vue{}
ステップ 4:自動検出されたポリフィルに TypeScript と一緒に Babel を使用しますか? 自動検出されたポリフィルにTypeScriptで Babel を使用しますか? ここで [はい] を選択して Y を入力します
手順 5: ルーターに履歴モードを使用しますか? (実稼働環境でのインデックス フォールバックには適切なサーバー設定が必要です) (Y/n) ルーターに履歴モードを使用するかどうか、つまり、履歴モードまたはハッシュ モードを使用するかどうか。通常は使用しないことを選択、N
ハッシュと履歴の違い:
ハッシュ
ハッシュ モード、URL の後に # があり、ハッシュを変更すると、ページは更新されず、ページ全体は変更されず、# の後ろのルーティング構成のコンテンツのみが変更されます。形式: url#hash, http など: http://localhost : 9011/#/chain/info/steps
ハッシュの原則:ブラウザーの onhashchange() イベントの変更をリッスンして、対応するルーティング ルールを見つける
歴史
履歴モード: URL の後に # がありません。より美しく見えます。形式: http://localhost:9011/chain/info/steps。欠点は、(1) chain/info/steps ルートを使用できない場合です。エラー 404 が報告されるため、一致するリソースがない場合は状況を設定する必要があります。(2) 更新のたびに、バックエンドから URL 全体を再要求します。つまり、サーバーを再要求します。
履歴の原則: H5 の履歴で 2 つの新しい API pushState() と replaceState() を使用し、イベント onpopstate を使用して URL の変更を監視します
ステップ 6: CSS プリプロセッサーを選択しますか? CSS プリプロセッサーを選択してください。
ステップ7 : リンター / フォーマッターの構成を選択しますか?
コードフォーマット検出ツール
を選択します。+ 標準構成: ESLint 標準 標準ESLint + Prettier : ESLint (コード品質検査) + Prettier (コード整形ツール)
ステップ 8: 追加の lint 機能を選択しますか? コード検査方法: 保存時にチェックするか、送信時にチェックする; 選択する、保存するときにチェックする、最初のものを選択する
ステップ 9: 単体テスト ソリューションを選択する 選択する単体テスト ソリューションを選択します。ここでは最初のソリューションを選択します
Mocha + Chai : シンプルなテスト構造のみを提供します。他の機能が必要な場合は、他のライブラリ/プラグインを追加して完了する必要があります
Jest : Facebook によって開発されたテスト フレームワークであり、最もフル機能のテスト ランナーです。
ステップ 10: E2E テスト ソリューションを選択し 、単体テスト ソリューションを選択します。また、Mocha + chai最も一般的に使用されている最初の項目も選択します。
ステップ 11: Babel、ESLint などの構成を配置する場所を選択しますか? エンドツーエンド テストのタイプを選択し、デフォルトで Enter キーを押します
ステップ 12: 今後のプロジェクトのプリセットとして保存する 、将来のプロジェクトのプリセットとして保存するかどうか。npm run serve ここで y を選択し、現在の構成アイテムを保存する名前 (nameA など) を入力すると、それが作成され、サービスを開始するように求められます 。
ページの作成:
作成した：
