vue+elementを使用してステーションを構築する(一)

本文の環境はvue-cli 3に基づいている.x進行
Element
vue-cliはプラグインベースのアーキテクチャを使用しており、elementは新版のvue-cliに対応するelementプラグインを公式に用意しており、ここでは直接使用することができます.

vue add element

注意:インストールが完了したら、すべての参照とオンデマンド・ロード、私が選択したオンデマンド・ロード.手間を省きたい場合や、オンデマンドでロードすることを選んだ場合は面倒です
vue-router
以前にvue-cliで生成されたコードでは、デフォルト設定を選択し、routerを選択しなかったため、ここではrouterをインストールする必要があります.

vue add @vue/router

vuex
今、Vueプロジェクトにvuexを使う必要があるかどうかについては、基本的には誰も議論していません.どうせ私の意見には一定の需要があるので、使いましょう.

vue add @vue/vuex

続いてrouterについて、vuexは単独でいくつかの文章を書いて、ここで簡単にインストールした後に引き続き行ってついでにみんなに1つの無料のアイコンの素材のウェブサイトeasyiconを分かち合いますhttps://www.easyicon.net/自分の好きなfaviconを変えてもいいです.ico
ルート・インスタンスにstore routerオプションを登録すると、store routerインスタンスはルート・コンポーネントの下にあるすべてのサブコンポーネントに注入され、サブコンポーネントはthis.$store this.$routerはstore routerにアクセスしました
建設したばかりのプロジェクトを実行する

yarn serve

この時、vueファミリーバケツ+elementのサイトが走っているのが見えます.ルーティングの概念は大部分の人がよく知らないと信じて、その作用は異なる経路によって異なるビューにマッピングして、router.jsでは
pathはデフォルトでマッピングされたホームコンポーネントですが、ホームは実際に参照されています.src/components/HelloWorld.vue開けてvueでは、トップページに表示されている内容がこうなっていることに気づきます.次は少し変更します.

今はトップページが
これでelementも私たちのプロジェクトで使用されます.これから本格的にウェブサイトの開発を始めます.