使用vue+element建站(一)

本文环境基于入手vue-cli 3.x进行

Element

vue-cli使用了一套基于插件的架构,element官方为新版的vue-cli准备了相应的element 插件,在此我们可以直接使用。

vue add element

使用vue+element建站(一)
注:在安装完成后,全部引用和按需加载,我选择的按需加载。如果想要省事,或者已经选择按需加载后觉得麻烦

vue-router

因为在之前vue-cli生成的代码中,我选择默认设置,并未选择router,在这里我需要使用它,需要安装router。

vue add @vue/router

使用vue+element建站(一)

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了

使用vue+element建站(一)

运行刚建的项目

yarn serve

使用vue+element建站(一)
这时候 我们 已经可以看到 vue全家桶+element的网站已经跑起来了。
路由的概念相信大部分人并不陌生,它的作用就是根据不同的路径映射到不同的视图,在router.js中我们可以看到

使用vue+element建站(一)
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>

现在首页就会变成

使用vue+element建站(一)
这样element也就在我们项目中使用了。
接下来我们就开始正式进行网站的开发。

相关推荐