使用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也就在咱們項目中使用了。接下來咱們就開始正式進行網站的開發。