Element+Vue 从零开始搭建一个简单的系统页面

目录

        一、一个基本页面框架的实现

        二、点击跳转页面的功能实现

---

Element组件使用官方手册：Element - The world's most popular Vue UI framework

重点：理解+Ctrl C/V

一、一个基本页面框架的实现

主要在于App.vue的编写

App.vue是页面接口，在这里面写的代码会首先呈现。

打开Element组件的官方手册，里面有很多样式，可以直接获取代码。

官方手册：Element - The world's most popular Vue UI framework

选择一个喜欢的样式，然后粘贴代码

复制于App.vue中，

然后运行，显示以下效果

如果展现的是空白页面，则可能是路由导航没有正确配置，仔细检查。

二、点击跳转页面的功能实现

在于Index.js 与各组件间的调用（Home.vue、About.vue）== 路由的设置

由主页跳转至项目一（地址由：localhost:8080  ---->  localhost:8080/admin）

点击跳转

1.修改el-menu标签里的default-activ

改为：default-active=”$route.path” router :将其修改为路由形式。

2.修改index的参数（当点击选项一时会指向“/admin”）

3. index.js里面新增路径为“/admin”的路由。

4.运行，可以看到页面效果

...

我们祝福别人的时候习惯说一路顺风，但其实，逆风也可以飞翔。