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