vueフレームワーク学習（7）-プロジェクトを作成する

プロジェクトステップを作成する

node.jsとVsCodeをインストールしている場合は、Vueの知識を学ぶ前に、プロジェクトを作成しましょう。

npm install -g vue-cli、そしてインストールを待ちます（vue-cliはVueプロジェクトを迅速に構築するのに役立ちます）
npm install -g webpackコマンド、インストールを待機中（jsをパッケージ化するためのツール）
hellovueというプロジェクトを作成し、任意の名前を付けて、enterと入力しますvue init webpack hellovue
ターミナルで作成されたプロジェクトをvscodeで開きます。ディレクトリ構造は左側に示されています。

ここに画像の説明を挿入

ここに画像の説明を挿入
5.package.jsonでプロジェクトを開始するコマンドを見つけます。npm run dev

6.ターミナルの最後のレベルはプロジェクト名であることに注意してください。hellovue

ここに画像の説明を挿入
7.表示：http://localhost:8083/#/

ディレクトリ構造分析

ここに画像の説明を挿入

Vueプロジェクト構造のスタートアップの原則

Vue呼び出しシーケンス：index.html→main.js→app.vue→index.js→components / components

通常、プロジェクトの作成後、index.html、main.js、app.vueの3つのファイルがあります。

1. index.html：すべてのvueファイルは単一のページ形式で開発され、すべてのvueコンポーネントはindex.htmlを介してレンダリングおよびロードされます。
2. main.js：vueプロジェクトが初めて開始されたときにロードされるコンポーネントを制御するjavaのエントリ関数に相当します。3。el： '＃app
'はindex.htmlのアプリコンポーネントにフックされます。公式ウェブサイトは次の模板将会替换挂载的元素れますように。
ここに画像の説明を挿入

4.App.vueはデフォルトでルートコンポーネントです

作成されたエクスポートのname属性コンポーネント名：ライフサイクル関数
ここに画像の説明を挿入

HelloWorldプロジェクト

サンプルページをHellowordページに変更します。

プロジェクトエントリファイルApp.vueを開き、次のように変更します。

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Hello World！'
    }
  }
}
</script>

ページを更新する：ファイルにページ
ここに画像の説明を挿入
をapp.vue書き続けることはできませんがindex.html、私たちの用途は何ですか？、慎重に分析し、Webページのタイトル部分にでindex.html定義されたタイトルが読み込まれ、本文部分にでApp.vue定義された部分が読み込まれます。
ここに画像の説明を挿入
実行中main.jsのプロジェクトでは入口文件、実行中のプロジェクト、找到其实例需要挂载的位置つまりindex.htmlとして、最初はindex.htmlのマウントポイントのコンテンツが表示されますが、インスタンスのコンポーネントに含まれる模板中的内容所取代ため、 index.htmlの本文のコンテンツがしばらく表示されることを確認します。

ここに画像の説明を挿入
index.htmlのコンテンツをホームページに表示するにはどうすればよいですか？main.jsのテンプレートをコメントアウトするだけです。

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App }
  // template: '<App/>'
})

ブラウザコンソールを見るindex.htmlと、ページのコンテンツを確認できます。
ここに画像の説明を挿入
index.htmlページ

他の文書の説明：

-build

-build.js 生产环境构建脚本

-utils.js 构建相关工具方法

-webpack.base.conf.js webpack基础配置

-webpack.dev.conf.js webpack开发环境配置

-webpack.prod.conf.js 生产环境配置

-confg 项目配置

--dev.env.js 开发环境变量

--index.js 项目配置文件

--prod.env.js 生产环境变量

--test.env.js 测试环境变量

-package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

-src 源码目录

--main.js 入口js文件

--app.vue 根组件

--components 公共组件目录

--title.vue

プロジェクトのフレームワークを理解し、一緒にvueの構文を学び始めましょう。