参考資料
1.ノード環境をインストールします
1.ダウンロードアドレスは次のとおりです：https：//nodejs.org/en/
2.インストールが成功したかどうかを確認します。バージョン番号が出力された場合は、ノード環境が正常にインストールされたことを意味します。
3.効率を向上させるために、淘宝網のミラーを使用できます：http：//npm.taobao.org/
入力：npm install -g cnpm –registry = https：//registry.npm.taobao.org、npmミラーをインストールし、将来的にnpmの代わりにcnpmを使用できます。
インストールが成功したかどうかを確認します。
2つ目は、vueプロジェクト環境を構築することです。
1.vue-cliをグローバルにインストールします
npm install --global vue-cli
2.プロジェクトディレクトリを入力し、webpackテンプレートに基づいて新しいプロジェクトを作成します：vue initwebpackプロジェクト名
説明：
Vueビルド==>パッケージ化方法。Enterキーを押すだけです。
vue-routerのインストール==> vue-routerをインストールするかどうかは、プロジェクトで使用する必要があるため、Yと入力します。
ESLintを使用してコードをリントします==> js文法検出が必要ですか？現在は必要ないので、Enterキーを押します。
単体テストを設定する==>現在単体テストツールをインストールするかどうかは、Enterキーを押す必要はありません。
Nightwatchを使用してe2eテストをセットアップする==>エンドツーエンドのテストツールが必要ですか？現在は必要ないので、Enterキーを押します。
3.プロジェクトを入力します：cd vue-demo、依存関係をインストールします
インストールが成功すると、プロジェクトフォルダにnode_modulesという追加のディレクトリが作成されます。
4. npm run dev、プロジェクトを開始します
プロジェクトは正常に開始されました。
3、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）index.js ==>プロジェクト構成ファイル;
3）prod.env.js ==>本番環境変数;
3. node_modules：npmによってロードされたプロジェクト依存関係モジュール
4. src：これは開発したいディレクトリです。基本的に、必要なことはすべてこのディレクトリにあります。これには、いくつかのディレクトリとファイルが含まれています。
1）アセット：リソースディレクトリ、いくつかの写真またはパブリックjs、パブリックcssを配置します。ここでのリソースはwebpackによって構築されます。
2）コンポーネント：コンポーネントディレクトリ。作成するコンポーネントはこのディレクトリに配置されます。
3）ルーター：フロントエンドルーティング。構成する必要のあるルーティングパスはindex.jsに記述されています。
4）App.vue：ルートコンポーネント。
5）main.js：エントリjsファイル。
5.静的：画像、フォントなどの静的リソースディレクトリ。webpackではビルドされません
6. index.html：ホームページエントリファイル。メタ情報などを追加できます。
7. package.json：プロジェクトのnpmスクリプト、依存パッケージ、およびその他の情報を定義するnpmパッケージ構成ファイル
8. README.md：プロジェクトの説明文書、マークダウン形式
9. .xxxxファイル：これらは、構文構成、git構成などを含むいくつかの構成ファイルです。
第四に、最初のvueプロジェクトを開始します
1.コンポーネントディレクトリの下に新しいviewsディレクトリを作成し、その中にvueコンポーネントを書き込みます
1）最初のコンポーネントを開始します。
a：ビューディレクトリに新しいFirst.vueを作成します
b：ルーターディレクトリの下のindex.jsでルーティングパスを構成します
c：テンプレート書き込みhtml、スクリプト書き込みjs、スタイル書き込みスタイル
d：ip：http：// localhost：8010 /＃/ firstと入力し、ページ効果を確認します
注意：
コンポーネントの下に存在できる並列divは1つだけです。次の記述は間違っています：
データは、ドキュメントのように書くのではなく、見返りに書く必要があります。次の点は誤りです。
2.親子コンポーネントについて話します
1）再利用可能なサブコンポーネントを格納するために、componentsディレクトリに新しいサブフォルダを作成します。たとえば、新しいConfirm.vueコンポーネントを作成します
3）親コンポーネントに子コンポーネントを導入します
引入：インポート確認元 '…/ sub / Confirm'
登録：コンポーネントを追加します：タグの名前コードブロックの後に{確認}
使用：追加
完全なコード：
2）親コンポーネントと子コンポーネント間の通信
サブアセンブリ：
親コンポーネント：
3.ルーティングを使用してシングルページアプリケーションを構築します
1）上記の方法に従って、新しいSecond.vueコンポーネントを作成します
2）ルートジャンプ：2ページ目に移動します
ルートジャンプ後、パスの変化を観察するように注意してください。
ご覧のとおり、HTMLのタグに解析されます
ルーティングの使用について簡単に紹介します。詳細については、公式Webサイトにアクセスしてください：https：//router.vuejs.org/zh-cn/
4.少ないスタイルの書き方
1）インストールの依存関係を減らす：npm install less less-loader --save
インストールが成功すると、package.jsonで、さらに2つのモジュールが追加されたことがわかります。
2）書く量を減らす
5、補足
1.vueがブラウザーを自動的に開くことができないという問題を解決します。プロジェクトを実行するためにnpmrun devと入力すると、コマンドラインから正常に実行するように求められますが、ブラウザーは自動的に開かないため、手動でしか入力できません。
解決する：
1）config ==> index.jsを開きます
2）module.exports構成でautoOpenBrowserを見つけます。デフォルト設定はfalseです。
3）autoOpenBrowserをtrueに変更します
4）Ctrl + Cを押して再起動すると、ブラウザが自動的に開きます
2.ポートの競合を回避するために、上記のようにポートを変更してディレクトリを開くこともできます。
正常に変更されました：
この記事は記事https://www.cnblogs.com/hellman/p/10985377.htmlから複製されています
ブログガーデンバブルの作者のおかげで、この記事は私自身の将来の学習のためのものです