Vueのインストールと環境の構成、開発ツール

この記事では、主にVueのインストールと環境構成を紹介し、新しいvueプロジェクトを作成し、Vue開発ツールとプロジェクト構造を簡単に紹介します。

---

序文

Vueフロントエンドフレームワーク環境の構築

---

1.Node.jsのインストールと構成

1.node.jsをダウンロードしてインストールします

公式ウェブサイトから最新バージョンをダウンロードします：https
：//nodejs.org/en/download/インストールパッケージをダウンロードできます（インストールチュートリアルを参照してください：https ：//www.runoob.com/nodejs/nodejs-install-setup .html）
またはzipファイルをダウンロードする保存するディレクトリを見つけ、ダウンロードしたファイルを解凍してから、環境変数を構成し、解凍したファイルが環境変数に配置されるパスを構成します。

npmはデフォルトでNode.jsにインストールされるため、追加の構成なしでグローバルコマンドでnpmコマンドを使用できます。cmdでインストールが成功するかどうかをテストします。node-vとnpm -vをそれぞれ入力して、バージョン情報を表示します。

2.デフォルトのインストールディレクトリとキャッシュログディレクトリを設定します

注：ここでの環境構成は、主にnpmによってインストールされたグローバルモジュールのパスとキャッシュキャッシュのパスを構成します。この構成の理由は、次のように将来実行されるためです。npm install express [-g]（ -gに続くオプションのパラメーター、gはグローバルグローバルインストールの意味を表します）、インストールされたモジュールは[C：\ Users \ username \ AppData \ Roaming \ npm]のパスにインストールされ、Cディスクスペースを占有します。
1.デフォルトのインストールディレクトリとキャッシュログディレクトリを
作成するデフォルトのインストールディレクトリとキャッシュログディレクトリとして、それぞれnodejsの下に[node_global]と[node_cache]の2つのフォルダを作成します。

2.コマンドを実行して、npmのグローバルモジュールディレクトリとキャッシュディレクトリを、作成した2つのディレクトリに設定します。

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

npm config get prefixnpmグローバルインストールパッケージの保存パスを
npm config get cache表示するnpmパッケージのキャッシュパスを表示する

npm list -globalコマンドを入力して、グローバルインストールディレクトリを表示することもできます。

npm config listすべてのnpm構成を表示

3.Node.js環境の構成

注：次のD：\ Program Files \ nodejsは、私のノードのインストールパスです。忘れずに、独自のパスに変更してください。

「マイコンピュータ」-右クリック-「プロパティ」-「システムの詳細設定」-「詳細」-「環境変数」、環境変数ダイアログボックスに入る

1. [システム変数]の下に新しい[NODE_PATH]を作成し、ここでサードパーティの依存関係のインストールディレクトリを設定します。
手順2に従ってグローバルインストールディレクトリを変更する場合は、[D：\ Program Files \ nodejs \ node_global\node_modulesと入力します。 ]

2. [[システム変数]の[パス]の下に、ノード[D：\ Program Files \nodejs\]のパスを追加します。

3.グローバルインストールディレクトリが設定されている場合、[ユーザー変数]の下の[パス]は、Cドライブの下のデフォルトのAPPData / Roaming \ npmを[D：\ Program Files \ nodejs \ node_global]、[D：\ Program Files \ nodejs \ node_cache]、これはnodejsのデフォルトのモジュール呼び出しパスです

4.Taobaoミラーソースを構成します

npmダウンロードソースを表示npm config get registry

npmのモジュールダウンロードウェアハウスをデフォルトの外部サイトから国内サイトに変更して、モジュールのダウンロード速度を高速化できるようにします。ここでは、Taobaoミラーソース（https://registry.npm.taobao.org）を使用し、Taobaoを使用します。ソースをミラーリングする方法は2つあります。

（1）一時的な使用

npm --registry https://registry.npm.taobao.org install cluster

このコードは、クラスターのインストール時にTaobaoミラーからのみダウンロードされます。モジュールをインストールするたびに長いコードが使用されるため、かなり面倒なので、2番目の方法をお勧めします。

（2）恒久的な使用

2つの構成オプションもあります。1つはnpmコマンドのウェアハウスアドレスをTaobaoミラーソースに直接変更する方法で、もう1つはcnpmコマンドをインストールする方法です。

1つ目：npmのデフォルト構成を直接変更する

npm config set registry https://registry.npm.taobao.org 

検証：構成npm config get registry後npm config list、構成が「https://registry.npmjs.org/」になる前に、図に示すように、orコマンドに従ってnpmダウンロードソースが正常に構成されているかどうかを確認できます。

構成後は、構成が成功したことを示す淘宝網の画像です

2番目：cnpmをインストールします

npm install -g cnpm --registry=https://registry.npm.taobao.org

検証方法はcnpm config get registry、またはcnpm config listに示すようになります

---

2.vueとscaffoldをインストールします

1.vue.jsをインストールします

npm install vue -gまたcnpm install vue -g

独自のTaobaoミラーソース設定に従ってコマンドを選択します。ここで、-gはグローバルインストールです。これは、グローバルグローバルディレクトリにインストールすることを意味します。

インストールされているvue情報を表示します：npm info vueまたはcnpm info vue

インストールされているvueバージョンnpmリストvueを表示する

2.webpackテンプレートをインストールします

コマンドラインでコマンドを実行しnpm install webpack -g、インストールが完了するのを待ちます。

webpack 4x以降の場合、webpackはすべてのコマンド関連コンテンツをwebpack-cliに配置するため、
webpack-cli：もインストールする必要があります。これを使用して、インストールが成功した後にバージョン番号を表示できます。npm install --global webpack-cli
webpack -v

3.スキャフォールディングvue-cli2.xをインストールします

npm install vue-cli -g

次のコマンドを使用して、バージョンが正しいかどうかを確認します。vue --versionまたはvue -V

ここにvue-routerをインストールします

npm install -g vue-router

私のインストールディレクトリは次のとおりです。

4.vue-cli2はvueプロジェクトを作成します

1.プロジェクトを作成します（Dドライブの特定の場所、つまりプロジェクトのパスにcdするのが最適です。そうでない場合、プロジェクトはC：\ Users \ Administrator \に新しく作成されます。または、直接入力することもできます。目的のプロジェクトパスのcmd）

 vue init webpack 项目名

プロジェクト名は中国語と大文字を使用しないでください。

いくつかの構成を行います。

• プロジェクト名（プロジェクト名）：入力（大文字を含めてエラーが発生しました。ビューを変更しました）
• プロジェクトの説明：次のように入力します
• 著者：著者名：入力
• Vue build ==>（コンパイラーをインストールするかどうかに関係なく）runtime-compilerとruntime-onlyはどちらもパッケージ化方法であり、2番目の方法の方が効率的です。
• vue-routerのインストール==>vue-routerをインストールするかどうかにかかわらず、プロジェクトでルートを使用する必要があるため、Yキーを押してEnterキーを押します。
• ESLintを使用してコードをリントします==>コードを検出するためにESLintが必要かどうかにかかわらず、現時点では必要ないので、Enterキーを押します。
• 単体テストの設定==>単体テストツールを現在インストールする必要がないかどうかを確認するには、Enterキーを押します。
• Nightwatchを使用してe2eテストをセットアップする==>エンドツーエンドのテストツールが必要ですか？現在は必要ないので、Enterキーを押します。
• npm installプロジェクトが作成された後、実行する必要がありますか？（推奨）（矢印キーを使用）==>安装依赖npm install
• 入力;

一部のスクリーンショットはここでは省略されています
最終結果は次のとおりです。プロジェクトの初期化は成功します

2.プロンプトコードを押してプロジェクトディレクトリに入り、実行します。npm run dev

プロンプトを押してアドレスhttp：// localhost：8081を開きます。

プロジェクトの実行を終了します。 ctrl+c、Yを選択して、プロジェクトの実行を停止します。

---

3.vue-cli3.xをインストールします

1.古いバージョンをアンインストールします

2.xバージョンnpm uninstall vue-cli -g
のアンインストール3.xバージョンのアンインストールnpm uninstall @vue/cli -g

2.新しいバージョンをインストールします

npm install @vue/cli –g
バージョン番号を指定するバージョン番号を指定npm install -g @vue/[email protected]しない場合、デフォルトで最新バージョンがインストールされます

3.新しいプロジェクト

vue create 项目名

• プリセットを選択してください=》構成を選択してください：デフォルトのデフォルトはbabel、eslint、手動で構成する機能を手動で選択します。
  手動構成を選択し、必要に応じて選択し、スペースバーと矢印キーを押して選択します。
• …=”の構成をどこに配置しますか？構成は
  専用の構成ファイルに配置されます=”各構成には、package.jsonファイルの
  package.json=”に個別のファイルがあります
• これを将来のプロジェクトのプリセットとして保存しますか？=>構成習慣ファイルを保存するのですか？保存後、次の新しいプロジェクトの構成を選択すると、このオプションが表示されます
• プリセットを名前を付けて保存;=>名前を保存
• パッケージを選択...=> selectnpmまたはyarnを実行します

正常に構成されました

4.プロジェクトを実行します

図に示すように、プロジェクトディレクトリにcdし、http：// localhost：8080 /を使用しnpm run serveてプロジェクトを開き
、操作の結果を確認します。

5、cli3は2.xテンプレートをプルダウンします

npm install -g @vue/cli-init

新しい2.xプロジェクトを作成することは引き続き可能ですvue init webpack my-vue

4.開発ツール

1.VSでvueコードを表示する

記述されたコードを表示するには、コーディングツールを使用するのが最適です。vscodeを使用します。インストールについては、https：//blog.csdn.net/dream_summer/article/details/108872293を参照してください。VisualStudioCodeを使用してvueを表示する方法は次のとおりです。コード
1.VSコードの場合プロジェクトの
作成後、最初にVSを使用してプロジェクトが配置されているフォルダーを開き、ツールバーの[ターミナル]-[新しいターミナル]をクリックし、下のターミナルウィンドウのコマンドラインにnpm run serve「スタート」ブラウザーはコンパイルが成功すると自動的に開かれます。

プロジェクトに新しいvue.config.jsファイルを作成し、ポート番号を8089に変更します

module.exports={
    
    //扩展配置
    configureWebpack:{
    
    
        devServer:{
    
    
            port:8089,//更改端口号
            open:true,//自动启动浏览器
            //mock数据
            before(app){
    
    
                
            }
        }
    }
}

保存後、ターミナルで起動すると、ポート番号が8089になり、
図に示すようにブラウザが自動的に開きますhttp：// localhost：8089

2、Hbuilder X

1. インストール
   HbuildXの公式Webサイト（http://www.dcloud.io/hbuilderx.html ）からhbuildxインストールファイル（提供されている、ダウンロードする必要はありません）をダウンロードします。ダウンロード後、解凍して使用します。

2. 新しいVUEプロジェクトを作成する
   

3. ノード構成（実行権限の構成）
   新しく作成されたプロジェクトを選択し、ツールバーをクリックして実行します-ターミナルに実行します-設定を実行します
   以下に示すように、下部のnpm、ノード実行構成を入力します。
   

4. プロジェクトを実行するプロジェクト
   を選択し、右クリックします-外部コマンド
   1、npm run buildでプロジェクトをコンパイルします
   2、npm run serveでプロジェクトを開始します
   起動が成功したら、パスを開き、成功を示す次のインターフェイスを確認します。
   

5、vueプロジェクトの構造

1.ビルド：ビルドスクリプトディレクトリ
1）build.js==>本番環境ビルドスクリプト;
2）check-versions.js ==>チェックnpm、node.jsバージョン;
3）utils.js==>ビルド関連ツールとメソッド;
4）vue-loader.conf.js ==> cssローダーを構成し、cssのコンパイル後に自動的にプレフィックスを追加します;
5）webpack.base.conf.js ==>webpackの基本構成;
6）webpack.dev.conf .js ==>webpack開発環境の構成;
7）webpack.prod.conf.js ==>webpack本番環境の構成;2。config
：プロジェクト構成
1）dev.env.js ==>開発環境変数;
2）インデックス.js== >プロジェクト構成ファイル;
3）prod.env.js==>本番環境変数;
3。node_modules：npmによってロードされたプロジェクト依存モジュール
4. src：これが開発したいディレクトリです。基本的に何をすべきかこのディレクトリにあります。これには、いくつかのディレクトリとファイルが含まれています
。1）アセット：リソースディレクトリ、いくつかの画像またはパブリックjsとパブリックcssを配置します。ただし、これらはコードディレクトリに属しているため、webpackを使用して操作および処理できます。つまり、Sass/SCSSやStylusなどの前処理を使用できます。
2）コンポーネント：カスタムコンポーネントを保存するために使用されるディレクトリ。その中にサンプルコンポーネントがあります。
3）ルーター：フロントエンドルーティングディレクトリ。構成する必要のあるルーティングパスはindex.jsに記述されています。
4）App.vue：ルートコンポーネント。これはVueアプリケーションのルートノードコンポーネントであり、下を見下ろすとVueコンポーネントの詳細を知ることができます。
5）main.js：アプリケーションのエントリファイル。主にvueフレームワーク、ルートコンポーネント、ルーティング設定を紹介し、vueインスタンスを定義します。つまり、Vueアプリケーションを初期化し、index.htmlファイル内のどのHTML要素にアプリケーションをマウントするかを指定します。通常、グローバルコンポーネントを登録したり、Vueライブラリを追加したりするための操作も行います。
5、静的：画像、フォントなどの静的リソースディレクトリ。webpack 6ではビルドされません。index.html
：ホームページのエントリファイル、メタ情報などを追加できます。これはアプリケーションのテンプレートファイルであり、VueアプリケーションはこのHTMLページを実行し、lodashのテンプレート構文を使用してこのファイルを補間することもできます。注：これは、ページの最終的な表示を管理するテンプレートではなく、Vueアプリケーション外の静的HTMLファイルです。通常、このファイルは、一部の高度な機能が使用されている場合にのみ変更されます。
7. package.json：プロジェクトのnpmスクリプト、依存パッケージ、その他の情報を定義するnpmパッケージ構成ファイル
8. README.md：プロジェクトの説明文書、マークダウン形式

1）.babelrc ：babelコンパイルパラメーター
2）.editorconfig：エディター関連の構成、コード形式
3）.eslintignore：構成に必要または省略されるパス。通常、build、config、dist、test、およびその他のディレクトリは、無視するように構成されます
4）.eslintrc。 js：コード形式のスタイルチェックルールを構成します
5）.gitignore：無視する必要のあるファイル構成をgitアップロードします
6）.postcssrc.js：css変換ツール

6、私のvueシステム研究ノート

Vue注1：Vueテクノロジースタック

Vue注2：基本構文