使用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都會單獨寫一些文章，這裏簡單說下安裝後繼續進行 順便給大家分享一個免費的圖標素材網站 easyicon https://www.easyicon.net/ 可以去換個自己喜歡的 favicon.ico

通過在根實例中註冊 store router 選項，store router 實例會注入到根組件下的所有子組件中，子組件能通過 this.$store this.$router訪問到 store router了

運行剛建的項目

yarn serve

這時候 我們 已經可以看到 vue全家桶+element的網站已經跑起來了。
路由的概念相信大部分人並不陌生，它的作用就是根據不同的路徑映射到不同的視圖，在router.js中我們可以看到

path默認映射的home組件，而home實際是引用的，src/components/HelloWorld.vue
打開HelloWorld.vue，就會發現，首頁所展示的內容原來是這樣來的，下面我們稍微改動一下

<template>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活動管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活動列表</el-breadcrumb-item>
        <el-breadcrumb-item>活動詳情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="hello">    
        <p>
          這是一個Vue程序
        </p>
        <el-button>123123</el-button>
      </div>
    </div>  
</template>

現在首頁就會變成

這樣element也就在我們項目中使用了。
接下來我們就開始正式進行網站的開發。