Vueのプロジェクト構造の紹介
次のようにウェブストームは、プロジェクト、プロジェクトディレクトリを開き、使用して作成したらVueのプロジェクト：
-
ビルドフォルダには、プロジェクトのビルドスクリプトを格納するために使用されます
-
最も一般的に使用される設定項目に保存されているいくつかの基本的な構成情報は、ポートフォワーディングであります
-
このディレクトリには、すべての依存プロジェクトであるnode_modules、すなわちNPMコマンドファイルをインストール、ダウンロード
-
このプロジェクトのsrcディレクトリには、開発者がここでコードを書くことを、ソースコードを保存します
-
店舗静的に使用される静的リソース
-
index.htmlには、プロジェクトのホームページ、ポータルページ、だけでなく、プロジェクト全体だけHTMLページです
-
package.jsonはリリースに依存し、依存するすべての依存プロジェクトは、開発時間を含める定義します
仕事の99.99％がSRCで行われた後、次のように開発者のために、ディレクトリのsrcファイルは、次のとおりです。
-
ファイルアセットを格納するために使用される資産のディレクトリ
-
店舗部品（再利用可能な、非別のページの一部）に使用されるコンポーネントディレクトリは、もちろん、開発者はまたのコンポーネントに直接、完全なページを作成することができます。
-
別のページに加えて、アセンブリ内の推奨ストレージコンポーネントは、完全なページを置くように設計された新しいフォルダを作成します。
-
JSファイルをルーティングするルータのディレクトリ、保存されました
-
App.vue Vueのコンポーネントである、第一の成分は、Vueのプロジェクトです
-
Javaでmainメソッドに相当main.jsは、プロジェクトのjsの入り口です
次のようにmain.jsを読み取ります。
-
main.jsにおいて、対象は、最初のVueに導入されます。
-
App.vueの紹介、およびアプリケーション命名されました
-
下位ルータはindex.jsデフォルトのファイル名をディレクトリをルーティングするので、省略することができる、という紹介ルータ、ノート
-
すべてが正常にインポートされた後、Vueのは、オブジェクトを作成し、一連の処理されるべきは、ノードVueの「#app」で、「＃アプリは」index.htmlのファイルにあらかじめ定義されたdiv要素を指し、
-
ルータがオブジェクトに設定されているVUE、ここでは単純化文言で、言葉遣いは完全なルータです：ルータ、キー/値の正確ならば、それを省略することができます。
-
コンポーネントのAppを宣言し、それが宣言されている必要があり、このコンポーネントの先頭にアプリケーションをプロジェクトにインポートされているが、部品の直接輸入は直接使用することはできません。
-
テンプレートには、ページテンプレート、divの中に「#app」をレンダリングするための今後のアプリケーションコンポーネントの内容を定義します。
だから、あなたは、App.vueで見られたプロジェクトの成功の開始後の結果ページの定義を、推測することができます
-
App.vue VUEはコンポーネントで、このコンポーネントは、3つの部分が含まれます; 2ページのスクリプト（スクリプト）; 1ページテンプレート（テンプレート）3ページスタイル（スタイル）...
-
ページテンプレートは、2の定義は、1が絵で、他のルータビューでページのHTML要素を定義します
-
ページのスクリプトは、主などの操作は、現在のページデータの初期化、イベント処理を実装するために使用されます
-
ページスタイルは、ページテンプレートのHTML要素のための操作を美しくすることです
付加的な説明は、ルータビューを必要とされ、これはページのルートを表示する場所を指し、単にプレースホルダ、現在の特定のURLアドレスに応じて決定されるであろう内容を表示するためのプレースホルダとして理解することができます。次のように表示の特定の含有量は、ルーティングテーブル、即ち、ルータ/ index.jsファイルを参照します。
-
この文書で、最初の導入Vueのは、ルータのHelloWorldオブジェクトやコンポーネントオブジェクト
-
ルーターオブジェクトを作成し、ルーティングテーブルを定義します
-
ルーティングテーブル本明細書に定義される、パスは
/、HelloWorldのコンポーネントを対応するように、ブラウザの、すなわち、アドレス/、ディスプレイアセンブリのHelloWorldルータ視点位置
次のようにウェブストームは、プロジェクト、プロジェクトディレクトリを開き、使用して作成したらVueのプロジェクト：
-
ビルドフォルダには、プロジェクトのビルドスクリプトを格納するために使用されます
-
最も一般的に使用される設定項目に保存されているいくつかの基本的な構成情報は、ポートフォワーディングであります
-
このディレクトリには、すべての依存プロジェクトであるnode_modules、すなわちNPMコマンドファイルをインストール、ダウンロード
-
このプロジェクトのsrcディレクトリには、開発者がここでコードを書くことを、ソースコードを保存します
-
店舗静的に使用される静的リソース
-
index.htmlには、プロジェクトのホームページ、ポータルページ、だけでなく、プロジェクト全体だけHTMLページです
-
package.jsonはリリースに依存し、依存するすべての依存プロジェクトは、開発時間を含める定義します
对于开发者来说，以后 99.99% 的工作都是在 src 中完成的，src 中的文件目录如下：
-
assets 目录用来存放资产文件
-
components 目录用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。
-
推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。
-
router 目录中，存放了路由的js文件
-
App.vue 是一个Vue组件，也是项目的第一个Vue组件
-
main.js相当于Java中的main方法，是整个项目的入口js
main.js 内容如下：
-
在main.js 中，首先导入 Vue 对象
-
导入 App.vue ，并且命名为 App
-
导入router，注意，由于router目录下路由默认文件名为 index.js ，因此可以省略
-
所有东西都导入成功后，创建一个Vue对象，设置要被Vue处理的节点是 '#app'，'#app' 指提前在index.html 文件中定义的一个div
-
将 router 设置到 vue 对象中，这里是一个简化的写法，完整的写法是 router:router，如果 key/value 一模一样，则可以简写。
-
声明一个组件 App，App 这个组件在一开始已经导入到项目中了，但是直接导入的组件无法直接使用，必须要声明。
-
template 中定义了页面模板，即将 App 组件中的内容渲染到 '#app' 这个div 中。
因此，可以猜测，项目启动成功后，看到的页面效果定义在 App.vue 中
-
App.vue 是一个vue组件，这个组件中包含三部分内容：1.页面模板（template）；2.页面脚本（script）；3.页面样式（style）
-
页面模板中，定义了页面的 HTML 元素，这里定义了两个，一个是一张图片，另一个则是一个 router-view
-
页面脚本主要用来实现当前页面数据初始化、事件处理等等操作
-
页面样式就是针对 template 中 HTML 元素的页面美化操作
需要额外解释的是，router-view，这个指展示路由页面的位置，可以简单理解为一个占位符，这个占位符展示的内容将根据当前具体的 URL 地址来定。具体展示的内容，要参考路由表，即 router/index.js 文件，该文件如下：
-
这个文件中，首先导入了Vue对象、Router对象以及 HelloWorld 组件，
-
创建一个Router对象，并定义路由表
-
这里定义的路由表，path为
/，对应的组件为 HelloWorld，即浏览器地址为/时，在router-view位置显示 HelloWorld 组件