使用vueelement建站一

本文环境基于入手 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 也就在我们项目中使用了。
接下来我们就开始正式进行网站的开发。