記事ディレクトリ
環境構成
ノード構成
1. ダウンロードリンク: https://nodejs.org/en/
2. インストールが成功したかどうかを確認します。バージョン番号が出力されていれば、ノード環境のインストールが成功したことを意味します。
//输入：
node -v
Vue CLI をインストールする
- ターミナルに次のコマンドを入力してグローバルにインストールします。
//三选一即可
cnpm install -g @vue/cli
npm install -g @vue/cli
yarn global add @vue/cli
注: 古いバージョンの VUE CLI をインストールしている場合は、最初にそれをアンインストールする必要があります
//三选一即可
npm uninstall vue-cli -g
cnpm uninstall vue-cli -g
yarn global remove vue-cli
- vue -V を実行してバージョンを表示します。バージョン番号が出力された場合は、vue が正常にインストールされたことを意味します。
//输入：
vue -V
新しいプロジェクトを構築する
Vue create は新しいプロジェクトをビルドします
vue create <Project Name> //文件名 不支持驼峰(含大写字母)
//如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作，必须通过
winpty vue.cmd create hello-world
启动这个命令
以下のインターフェースが表示されたら成功です
-
デフォルト (vue3 babel、eslint): デフォルト設定 (直接入力) は、補助機能を備えた npm パッケージを使用せずに、新しい vue3 プロジェクトのプロトタイプを迅速に作成するのに非常に適しています。
-
デフォルト (vue2 babel、eslint): デフォルト設定 (直接入力) は、補助機能を備えた npm パッケージを使用せずに、新しい vue2 プロジェクトのプロトタイプを迅速に作成するのに非常に適しています。
-
機能を手動で選択します: カスタム構成 (矢印キー ↓ を押す) は必要な運用指向のプロジェクトであり、オプションの機能を提供する npm パッケージです
方法 1: 最初のものを選択するだけです (デフォルトは自動的にインストールされます。Enter キーを押して選択します)
次のインターフェイスが表示されたら成功です。
入力:cd adminもう一度入力してnpm run serveプロジェクトを開きます
。 プロジェクト開始効果:
リンクを開きます:
方法 2: カスタム設定を構成する
ステップ 1: 機能を選択する 手動で機能を選択する
以下のインターフェースが表示されたら成功です
ステップ 2: カスタム構成値を構成します。
1 Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
2 ( ) Babel //Transcoder。ES6 コードを ES5 コードに変換して、既存の環境で実行できるようにします。
3 ( ) TypeScript// TypeScript は、JavaScript の構文を含めて拡張する JavaScript (接尾辞 .js) (接尾辞 .ts) のスーパーセットです。ブラウザで実行するには、JavaScript としてコンパイルして出力する必要があります。現時点では、ほとんどありません。人々は 4
( ) プログレッシブ Web アプリ (PWA) サポート// プログレッシブ Web アプリケーション
5 ( ) ルーター // vue-router (vue ルーティング)
6 ( ) Vuex // vuex (vue の状態管理モード)
7 ( ) CSS プリプロセッサ// CSS プリプロセッサ (例:less、sass)
8 ( ) リンター / フォーマッタ // コード スタイルのチェックとフォーマット (例: ESlint)
9 ( ) 単体テスト // 単体テスト (単体テスト)
10 ( ) E2E テスト / /e2e (エンドツーエンド) テスト
ステップ 3: vue バージョンを選択します。ここでは 3.x を選択します。
ステップ 4: コード スタイルのチェックとフォーマット (例: ESlint)
リンター/フォーマッタ設定を選択しますか? コード フォーマット検出ツールを選択してください
ステップ 5: 追加の lint 機能を選択しますか?
コード検査方法: 保存時にチェックするか、送信時にチェックする;
私は保存時に最初のチェックを選択します
第六步：Babel、ESLint などの設定はどこに置きたいですか?
Babel、PostCSS、ESLin などの設定ファイルを別の設定ファイルに保存するにはどうすればよいですか? それとも package.json に保存しますか?
明確で美しい設定を行うのに便利なので、package.json を選択します。
ステップ 7: これを将来のプロジェクトのプリセットとして保存しますか?
今後のプロジェクトですぐにビルドできるように、現在の構成を保存する必要がありますか? 保存後、後でプロジェクトを作成するときにこの構成を直接選択でき、個別に構成する必要はありません。「いいえ」を選択して Enter キーを押した後、次のようになります。プロジェクトが正常に作成されました。プロジェクトを開く効果:
リンク
を開きます
:
こんにちは、フェイチェンです。
フォローしてください~「学習資料」に返信して、フロントエンドの学習リソースを入手し、テクノロジーの変化、毎日の生存ルール、業界関係者、機会についての洞察を共有してください。