目次
1. @vue/cli モジュール パッケージをグローバルにインストールする
2. テンプレートとパッケージ マネージャーを選択し、プロジェクトが作成されるのを待ちます
1.node.js をインストールする
1.node.jsをダウンロード
ダウンロードリンク:ダウンロード | Node.js (nodejs.org)
2. インストール
3. インストールが成功したかどうかを確認します
コマンド ウィンドウを開いて、インストールが成功したかどうかを確認します: node -v (バージョン番号が表示されている場合、インストールは成功しています)
2.vue 環境を構築する
1. @vue/cli モジュール パッケージをグローバルにインストールする
Vue公式サイト： https: //cn.vuejs.org/
2. コマンドを実行する
Alibaba Cloud ミラーの切り替え
npm config set レジストリ https://registry.npm.taobao.org
インストール @vue/cli -g
npm install -g @vue/cli
3. インストールが成功したかどうかを確認します
vue -V
3.vue プロジェクトを作成する
1. プロジェクトを作成する
プロジェクトを作成したいフォルダを選択し、制御端末を開いて以下のコマンドを実行
vue 作成プロジェクト名
注: プロジェクト名には、大文字、中国語、および特殊記号を含めることはできません
2. テンプレートとパッケージ マネージャーを選択し、プロジェクトが作成されるのを待ちます
(青いフォントは現在選択されているものを示し、キーボードの上下キーを押して選択します)
テンプレートを選択したら、プロジェクトが作成されるのを待ちます
4. vue プロジェクトを開始する
1. コマンドを実行する
プロジェクト作成後のコントロール画面は上図のようになるので、あとは上図のプロンプト内容に従ってコマンドを実行するだけです。
cd project name// プロジェクトのファイル ディレクトリを入力します
npm run serve // 組み込みの webback ローカル ホット アップデート開発サーバーを起動します
2. プロジェクトページを閲覧する
上記のスタートアップ プロジェクト コマンドを実行すると、コンソール ページは次のようになります。
ブラウザが自動的にポップアップ表示されない場合は、プロンプトが表示されたドメイン名とポートを手動でコピーして入力します。ブラウザでアクセスする
五、vueプロジェクトディレクトリファイルの意味と機能
6. ポート番号を変更する
vue scaffolding プロジェクトで vue.config.js が使用されるため、プロジェクトには webpack.config.js ファイルはありません。
src parallel ディレクトリに新しい vue.config.js を作成し、次の構成を入力し、最後にサーバーを再起動してポート番号を変更します。
module.exports = {
devServer: { // 自定义服务配置
port: 3000, // 修改的端口号
open: true
}
7. ウェルカム インターフェイスをクリーンアップする
私たち自身の開発では、新しい vue プロジェクト ディレクトリには、不要で直接クリーンアップできるファイルがたくさんあります。
assests フォルダーと components フォルダーの下にあるものをすべて削除します (デフォルトのウェルカム ページを離れないでください)。
src/App.vue にはデフォルトで多くのコンテンツが含まれています。それらをすべて削除して、テンプレート、スクリプト、およびスタイル ボックスを残すことができます。
補足: ソリューション App.vue コードは白黒です
Veturプラグインをダウンロードするだけです
vetur をインストールすると、コードをカラーで表示したり、さまざまなショートカット コマンドを使用したりできます.たとえば、.vue ファイルでコマンド vue を直接入力すると、テンプレート、スクリプト、スタイル ボックスを直接開くことができます.
