Vue + Element UI前端篇（二）：Vue + Element 案例 -Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue + Element UI前端篇（二）：Vue + Element 案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue + Element UI 实现权限管理系统前端篇（二）：Vue + Element 案例

导入项目

打开 Visual Studio Code，File --> add Folder to Workspace，导入我们的项目。

Vue + Element UI前端篇（二）：Vue + Element 案例 ,vue

安装 Element

安装依赖

Element 是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了 vue、react、angular 等多个版本，我们这里使用 vue 版本来搭建我们的界面。

访问：http://element-cn.eleme.io/#/zh-CN/component/installation ，官方指南，包含框架的安装，组件的使用等的全方位的教程。

Vue + Element UI前端篇（二）：Vue + Element 案例 ,vue

按照安装指南，我们选择 npm 的安装方式。我们使用 Yarn ，可以用 yarn add element-ui 命令替代。

Vue + Element UI前端篇（二）：Vue + Element 案例 ,vue

项目导入

按照安装指南，在 main.js 中引入 element，引入之后，main.js 内容如下：

Vue + Element UI前端篇（二）：Vue + Element 案例 ,vue

项目引入之后，我们在原有的 HelloWorld.vue 页面中加入一个 element 的按钮，测试一下。

Element 官网组件教程案例中，包含大量组件使用场景，直接复制组件代码到项目页面即可。

Vue + Element UI前端篇（二）：Vue + Element 案例 ,vue

HelloWorld.vue 页面加入一个测试按钮

Vue + Element UI前端篇（二）：Vue + Element 案例 ,vue

如下图所示，说明组件已经成功引入了。

Vue + Element UI前端篇（二）：Vue + Element 案例 ,vue

页面路由

添加页面

我们把 components 改名为 views，并在 views 目录下添加三个页面，Login.vue，Home.vue，404.vue。

三个页面内容简单相似，只有简单的页面标识，如登录页面是 “Login Page”。

<template>
  <div class="page">
    <h2>Login Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

配置路由

打开 router/index.js，添加三个路由，分别对应主页、登录和404页面。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import NotFound from '@/views/404'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
    ,{
      path: '/404',
      name: 'notFound',
      component: NotFound
    }
  ]
})

浏览器重新访问下面不同路径，路由器会根据路径路由到相应的页面。

http://localhost:8080/#/，/ 路由到 Home Page。

Vue + Element UI前端篇（二）：Vue + Element 案例 ,vue