目次
1.1.3 コマンドプロンプトでノードのバージョンを確認する
2.2.9 プロジェクトが正常に作成されたかどうかをテストします。
1. 環境の準備
1.1 ノードのインストール
ノード.js
- ノードはJavaScriptランタイム環境を提供します
- JavaScript をサーバー側開発プラットフォームで実行できるようにします。
公式 Web サイトから直接ダウンロードしてインストールでき、npm パッケージ管理ツールが付属しています。アドレス: Node.js
左の赤枠で囲ったものをクリックすると直接ダウンロードできます。
ダウンロードしたノード ファイルを開きます。インストールは非常に簡単です。次に進むまで、誰もがインストールすると思います。
1.1.2 インストールが成功したかどうかを確認する
コマンドプロンプトを検索し、管理者として実行します
1.1.3 コマンドプロンプトでノードのバージョンを確認する
ノードのバージョンを表示するには、node -v コマンドを入力します。バージョン番号がある場合、インストールは成功しています。
1.2 Webpackをインストールする
ウェブパック
- 最新の JavaScript アプリケーション用の静的モジュール バンドラー
- 以下の図では、左側の大きなパイルが webpack によって右側の小さなパイルにパッケージ化されています
webpack コマンドをインストールします。
安装webpack 全局安装 在开发环境中
npm install webpack -D -g
1.3 vue-cli3.x 以降をインストールする
Scaffolding 3.0 と 2.0 上のコードは完全に異なり、現在 Scaffolding 2.0 のコードは廃止されています。
vue-cli コマンドをインストールします。
安装vue-cli
npm install @vue/[email protected] -g 
2. プロジェクトを作成する
2.1 作成
空のフォルダーを選択し、できれば D ドライブに作成します。
コマンドを作成します:
创建工程
vue create 工程名コマンドを入力すると、作成インターフェイスが表示されます
上下キーで切り替えることができ、Enter キーを押して次のステップに進みます
オプションの説明:
2.2 選択
2.2.1 カスタム設定を選択します。
上下に切り替え、スペースを選択し、Enter キーを押して次のステップに進みます
選択した内容はプロジェクト内で構成され、選択したすべてのものが構成されます。
2.2.2 Vue のバージョンを選択します。
vue2のバージョンを選択してください
2.2.3 ルートの選択に履歴モードを使用するかどうか:
履歴モードを使用します。y を入力します。
2.2.4 CSS 拡張言語を選択します。
Less 拡張言語を選択します
2.2.5 ESLint を選択します。
最初のものを選択してください
2.2.6 フォーマットする場合:
最初のものを選択し、保存時にフォーマットします
2.2.7 設定ファイルを個別にまたは一緒に保存します。
最初のアイテムを選択し、別々に保存します
2.2.8 プリセットを保存する必要がありますか?
必要な場合は y を入力し、必要ない場合は n を入力します。次回作成するときにこのプリセットを直接選択するには y を入力します。y を入力するだけです。
2.2.8.1 プリセットに名前を付けます。
プリセットを保存する必要がある場合は、名前を付けてプロジェクトを作成する必要がありますが、必要ない場合は直接プロジェクトの作成を開始できます。
2.2.9 プロジェクトが正常に作成されたかどうかをテストします。
作成したアドレスを選択し、次のコマンドを入力します。
先输入
set NODE_OPTIONS=--openssl-legacy-provider
后输入，启动
npm run serve
Ctrl キーを押しながら、ローカルの後のアドレスを左クリックして開くことができれば、成功したことになります。
成功ページ:
3. プロジェクトを開いて設定する
新しく作成したプロジェクトを Visual Studio Code で開きます
プロジェクト内のファイルの紹介:
package.json を構成します。
package.jsonを設定します。以下の図のファイルを選択するだけでコマンドを実行できます。
スクリプト オブジェクトの各属性の前にセット NODE_OPTIONS=--openssl-legacy-provider && を追加します。
"scripts": {
"serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
"lint": "vue-cli-service lint"
},ターミナルを使用して起動します。
まず新しいターミナルを作成します
ターミナルで、現在のアドレスを見つけ、実行コマンドを入力します。一時停止したい場合は、ctrl+c で一時停止します。
vue.config.js を構成します。
このファイルはプロジェクトに存在しません。プロジェクトのルート パスの下に作成する必要があります。作成されたパスに注意してください。
これらの設定ファイルと同じレベルにあること
コンテンツ：
module.exports = {
configureWebpack:{
devServer:{
port:8090, // 端口
open:true, // 自动打开浏览器
}
}
}結論：
この後投稿するブログもvue Scaffolding上で作られており、事前に全員で足場を設置します。