[Vue] vue-cli をインストールして使用して SPA プロジェクトをビルドする

1.Vue-cliのインストール

1.1 Vue-cliとは

1.2 Vue-cliのインストール

1.3 Vue-cliを使用してプロジェクトをビルドする

2.SPAプロジェクト

2.1 SPA プロジェクトをインポートして実行する

2.2 Vue プロジェクトの構造の説明

2.3. *.vue ファイルとは

2.4 SPA プロジェクトに基づいた完全なルーティング

2.5 SPA プロジェクトに基づいた完全なネストされたルーティング

1.Vue-cliのインストール

1.1 Vue-cliとは

Vue CLI は、Vue.js をベースにした公式のスキャフォールディングツールで、vue.js+webpack プロジェクトテンプレートを自動生成し、Vue.js プロジェクトの開発環境を迅速に構築するために使用されます。開発者がプロジェクトの初期化、ビルドツールの構成、依存関係の管理などを行うのに役立つ対話型のコマンドラインインターフェイスが提供されます。Vue CLI は、一般的に使用されるいくつかの開発ツールとベストプラクティスを統合し、開発者が Vue.js アプリケーションをより効率的に開発できるようにします。

コマンドの作成: vue init webpack xxx

xxx は自分でプロジェクトの名前を作成します

まず、vue、vue-cli、webpack、node などの必要な環境をインストールする必要があります。

1.2 Vue-cliのインストール

コマンド: npm install -g vue-cli

cmd ウィンドウに次のコマンドを入力して、vue のインストールが成功したかどうかを確認します。注意: ここでの V は大文字です。成功すると、バージョン番号が出力されます

vue -V

1.3 Vue-cliを使用してプロジェクトをビルドする

保存するファイルパスで cmd コマンドウィンドウを開き、プロジェクトの保存ディレクトリを作成し、次のコマンドを実行します。

vue init webpack 项目名

次に、インストーラーは質問と回答のインストールモードに入ります。
1) プロジェクト名:プロジェクト名、入力時のデフォルトは ycxw_spa という名前です。Enter キーを押してください。
2) プロジェクトの説明: プロジェクトの説明。Enter キーを押してください。
3) 作成者:作成者、気軽に入力するか Enter キーを押してください
4) Vue ビルド:複数選択の質問、通常は最初の質問を選択します
Runtime + Compiler: recommended for most users //运行加编译，官方推荐
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时
5) vue-router をインストールします: vue-router が必要かどうか、生成されたプロジェクトに関連するルーティング設定ファイルが含まれるように、vue-router を使用することを選択します。 6
) ESLint を使用してコードをリントします: ESLint を使用してコードエラーを制限し、スタイル。N

7) 単体テストのセットアップ: 単体テストをインストールするかどうか N
8) Nightwatch で e2e テストをセットアップしますか?: e2e テストをインストールするかどうか N
9) プロジェクトの作成後に npm install を実行する必要がありますか? (推奨) (矢印を使用)キー)
> はい、NPM を使用します (このオプションを選択します)
はい、Yarn を使用します
いいえ、自分で処理します

すべてを選択し、Enter キーを押してプロジェクトを生成します。

最後に、「プロジェクトの初期化が完了しました!」 と表示され、ダウンロードが完了します。

2.SPAプロジェクト

2.1 SPA プロジェクトをインポートして実行する

以前に構築したスパプロジェクトのファイルパスを見つけて、プログラミングソフトウェアにインポートします。

1. cmd コマンドウィンドウに戻り、次のコマンドを入力します。

cd プロジェクト名 (ycxw_spa)

2. npm run devコマンドを入力して実行します。

このページを開いて実行します:

2.2 Vue プロジェクトの構造の説明

フォルダー:ビルド

機能:このフォルダーは主に Webpack の一部の構成に使用されます。

ファイル:
webpack.base.conf.js Webpack の基本構成、開発環境、本番環境はすべて
webpack.dev.conf.js Webpack 開発環境の構成
webpack.prod.conf.js Webpack 本番環境の構成
build.js 本番環境のビルドに依存しますscript
vue -loader.conf.js このファイルは、.vue ファイルを処理するための構成ファイルです。

フォルダー:設定

機能:設定ファイル

ファイル:
dev.env.js 開発環境の構成
prod.env.js 実稼働環境の構成
Index.js このファイルは、プロキシサーバーを構成します。たとえば、ポート番号を変更します
。 npm インストールフォルダー中の構成

フォルダー:ソース

機能:ソースコードディレクトリ (開発で最も一般的に使用されるフォルダー)

ファイル:
アセット、共有スタイル、画像
コンポーネント。ビジネスコードが保存されます。これは、ストレージ用にコンポーネントに分割されます。ページはコンポーネントであり、ページには多くのコンポーネントも含まれます。ルータールーティングを設定します (ルーティングとの関係を定義します)
。
App.vue vue ファイルエントリインターフェイスmain.js
は、vue インスタンスを作成するための App.vue に対応します。これもエントリファイルであり、webpack.base.config.js のエントリ構成に対応します。

静的フォルダー:

保存されたファイルは webpack では処理されず、直接参照できます。たとえば、swf ファイルを参照したい場合は、webpack で設定できます。swf 接尾辞を持つファイルを処理するローダーの場合は、直接配置することもできますこのフォルダー内の swf ファイルを参照してください。

パッケージ.json：

このファイルには、スクリプトと依存関係でのコマンドの設定と、グローバルにダウンロードされた依存関係パッケージとローカルにダウンロードされた依存関係パッケージにそれぞれ対応する devDependency という 2 つの便利な部分があります。

2.3. *.vue ファイルとは

*.vue ファイルは、HTML に似た構文を使用して Vue コンポーネントを記述するカスタムファイルタイプです。各 .vue ファイルには、 <template>、<script>、<style>の 3 種類のトップレベル言語ブロックが含まれています。これら 3 つの部分はそれぞれ html、js、css を表します。

注:
HTML コードを <template></template> で直接ラップすることはできません。代わりに、HTML タグを内側に配置してすべてのコードをラップする必要があります。一般に、 <div></div>タグは他のコードも含めるのに使用されます。 .ルート要素があれば他のタグも使用できます

<template>
    <div>
        ...
    </div>
</template>

js コードは <script> タグ内に記述され、export を通じてエクスポートされます。

<script>
    export default {
        name: 'App'
    }
</script>

2.4 SPA プロジェクトに基づいた完全なルーティング

スパプロジェクトをビルドするときに、デフォルトのウェルカムインターフェイスがすでに作成されているので、あとはその形式に従ってカスタムコンポーネントを作成するだけです。

1. src配下のコンポーネントにカスタムコンポーネントを作成します。

Hone.vue

<template>
  <div>
    <h1>{
   
   { msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to 网站首页'
    }
  }
}
</script>

<style>
</style>

About.vue

<template>
  <div>
    <h1>{
   
   { msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
    return {
      msg: 'Welcome to 云村小威 个人网站'
    }
  }
}
</script>

<style>
</style>

2. ルーティングを定義し、ルーティングパスを構成する

ルーティングを追加し、 routerフォルダーの下のindex.jsでルーティングパスを構成します。

1. まず、Vue モジュールと Vue Router モジュールをインポートしました。
import Vue from 'vue'
import Router from 'vue-router'
これにより、コード内で Vue と Vue Router の機能を使用できるようになります。

2. 次に、いくつかのコンポーネントをインポートしました。
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
これらのコンポーネントは、@ 記号を使用してパスを指定することにより、他のファイルで定義されます。

3. 次に、Vue Router プラグインを使用します。
Vue.use(Router)
このようにして、Vue は Vue Router の機能を利用することができます。

4. 最後に、ルーティング構成情報を含む新しい Router インスタンスをエクスポートします。
export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }, {
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/About',
    name: 'About',
    component: About,
  }]
})
        この構成では、いくつかのルーティングルールを定義します。各ルーティングルールには、パス、名前、コンポーネントが含まれます。ユーザーが異なるパスにアクセスすると、Vue Router は設定されたルールに従って対応するコンポーネントをロードします。

例えば：

        ユーザーがルートパス ('/') にアクセスすると、'HelloWorld' という名前のコンポーネントがロードされ、ユーザーが '/Home' パスにアクセスすると、'Home' という名前のコンポーネントがロードされ、ユーザーが ' /About' パスの場合、'About' という名前のコンポーネントがロードされ、'/AboutMe' と '/AboutWebsite' という 2 つのサブルートも定義されます。これらはそれぞれ、'AboutMe' と 'AboutWebsite' という名前のコンポーネントに対応します。

        このようにして、Vue Router の構成が完了し、これらのルーティングルールを使用して Vue アプリケーションでページナビゲーションとコンポーネントの読み込みを実装できるようになります。

完全な例:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }, {
    path: '/Home',
    name: 'Home',
    component: Home
  }, {
    path: '/About',
    name: 'About',
    component: About
  }]
})

3. ルートをトリガーするボタンを定義します

Aue.js で定義されたルートによってトリガーされるボタンを見つけます。

<template>
  <div id="app">
    <img src="./assets/vue.png" style="width: 350px;height: 250px;"><br>
    <router-link to="/Home">首页</router-link>
    <router-link to="/About">关于本站</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. テストを実行する

2.5 SPA プロジェクトに基づいた完全なネストされたルーティング

1. 例: About.vue コンポーネントに他のコンポーネントをネストする準備をする

<template>
  <div>
    <h1>{
   
   { msg }}</h1><br />
    <router-link to="/AboutMe">关于我</router-link>
    <router-link to="/AboutWebsite">关于本站</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
    return {
      msg: 'Welcome to 云村小威 个人网站'
    }
  }
}
</script>

<style>
</style>

注: <router-view></router-view> を必ず追加してください。

これは、Vue Router のプレースホルダータグです。その機能は、現在のルートに対応するコンポーネントのコンテンツを表示することです。

Vue アプリケーションで Vue Router を使用し、ルーティングルールを設定すると、<router-view></router-view> タグは、現在のルーティングパスに基づいて、対応するコンポーネントのコンテンツを動的にレンダリングします。

2. ネストする必要があるコンポーネントをカスタマイズする

AboutMe.vue

<template>
  <div>
    <img src="../assets/自拍照.png" style="width: 200px;height: 200px;"/>
  </div>
</template>

<script>
  export default {
    name: 'AboutMe'
  }
</script>

<style>
</style>

Website.vue について

<template>
  <div>
    {
   
   {msg}}
  </div>
</template>

<script>
  export default {
    name: 'AboutWebsite',
    data() {
      return {
        msg: '关于本站无需多言，帅说明了一切...'
      }
    }

  }
</script>

<style>
</style>

3. 効果実証