コマンドラインでコマンドを実行することは、vue プロジェクトを初期化することを意味しますか?

コマンド ラインでコマンド "vue init webpack vue-project" を実行すると、vue プロジェクトが初期化されます。このコマンドは、webpack に基づいて "vue-project" プロジェクトを初期化することを意味します。ここで、"vue-project" は、ユーザー自身の定義されたプロジェクト名 プロジェクト名に大文字は使用できません。

#このチュートリアルの動作環境: Windows10 システム、vue3 バージョン、DELL G3 コンピューター。

VUE プロジェクト初期化ステップ コマンド

1、Node.js をインストールします;

ウィンドウ インストール パッケージ Mac インストール パッケージ インストールが成功したかどうかを確認します。node -v
図に示すように、バージョンが表示されれば成功です。

2 、 vue-cli スキャフォールディングをインストールします;

コマンド ライン ウィンドウ cmd を開きます (ウィンドウ R、「cmd」と入力して Enter)実行します。 cmd

cnpm install vue-cli - g

のコマンド

#3 に示すように、インストールは成功しました。 、プロジェクト フォルダーを初期化します;

準備が完了したら、プロジェクトがビルドされた cmd フォルダーを開き、コマンド vue init webpack vue-project(注: vue-project はカスタム プロジェクト名。プロジェクト名には大文字は使用できません)

図に示すように:

初期化が完了すると、図のようになります。図:

プロジェクトの正常な起動を図に示します:

起動成功後のページの効果

追加すべきその他の詳細:

1、コマンド ライン ツール I使用するのは Git です。以下は最新のインストール パッケージのリンクです。ウィンドウ インストール パッケージ

2、アドレス バーの http://localhost:8081/ #/ # 後ろに署名します エディターでプロジェクトを開き、ディレクトリーの src の下にある router の下にあるindex.js を見つけて開き、図に示すようにモードを mode:'history' に変更します。

#3. プロジェクトの開始後、アドレスをコピーして貼り付ける必要はありません。つまり、npm run dev を実行すると、ページがブラウザーで自動的に開きます。

##エディターでプロジェクトを開き、config の下にあるindex.js を見つけて、下の 18 行目の autoOpenBrowser: false を見つけます。 false を true に変更するだけです。図に示すように:

#新しいブランチを作成してルーティングを構成するときは、パスに注意してください:

4. スタイル

less_loader は less に依存しており、両方をインストールする必要があり、プロジェクトの依存関係 (vue ui) またはターミナルのインストールでインストールできます。 ##次のエラーが発生した場合は、インストール スタイルに依存しないことを意味します。

ターミナルのインストール スタイルの依存関係:

通常の場合は、 npm install stylus-loader css-loader style-loader - を実行します。 -save-dev は依存関係をインストールするだけです

依存関係が少ない場合は、npm installlessless-loader --save-dev を実行して依存関係をインストールします。

• sass の場合は、npm install sass sass-loader --save-dev を実行して依存関係をインストールします。または ($npm intall sass-loader --save; $npm install node-sass --save)
less-loader の最新バージョンをインストールする場合、vue プロジェクトエラーが表示されます: 1 つのエラーでコンパイルに失敗しました

• ERROR  Failed to compile with 1 errors                                 14:20:44
   error  in ./src/components/HelloWorld.vue
  Module build failed: TypeError: loaderContext.getResolve is not a function
      at createWebpackLessPlugin (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:31:33)
      at getLessOptions (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:148:31)
      at Object.lessLoader (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\index.js:27:49)
   @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-378 14:3-18:5 15:22-386
   @ ./src/components/HelloWorld.vue
   @ ./src/router/index.js
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js1234567891011121314

  はバージョンの問題です。解決策は、ローダーの少ないバージョンを下げることです。私の vue バージョンは 2.5.2 です。
  

  最初に最新バージョンをアンインストールしてください

yarn remove less-loader
npm uninstall less-loader123

ローダーの少ないバージョン 5.0.0 をインストールしてください

yarn add less-loader@5.0.0
npm install less-loader@5.0.0 -D123

5.npm ERR! コード ERESOLVE:

npm install 実行時のエラー:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: operatingsystem@0.1.0
npm ERR! Found: vue@3.1.5
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!12345678

コンソール入力 npm -V で、npm7.x のため、npm バージョンが 7.x であることがわかりました。

2) npm6.x

の使用 ヒント: npm@6 を使用する場合、npm@7 をアンインストールする必要はありません。 npx を使用して npm のバージョンを指定できます。例: npx -p npm@6 npm i --legacy-peer-deps

これがすぐに機能しない場合は、最初にnode_modulesとpackage-lock.json

を削除できます。

関連する推奨事項: vue.js ビデオ チュートリアル

以上がコマンドラインでコマンドを実行することは、vue プロジェクトを初期化することを意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。