Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇（二）：Vue + Element 案例
导入项目
打开 Visual Studio Code，File --> add Folder to Workspace，导入我们的项目。
安装 Element
安装依赖
Element 是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了 vue、react、angular 等多个版本，我们这里使用 vue 版本来搭建我们的界面。
访问：http://element-cn.eleme.io/#/zh-CN/component/installation ，官方指南，包含框架的安装，组件的使用等的全方位的教程。
按照安装指南，我们选择 npm 的安装方式。我们使用 Yarn ，可以用 yarn add element-ui 命令替代。
项目导入
按照安装指南，在 main.js 中引入 element，引入之后，main.js 内容如下：
项目引入之后，我们在原有的 HelloWorld.vue 页面中加入一个 element 的按钮，测试一下。
Element 官网组件教程案例中，包含大量组件使用场景，直接复制组件代码到项目页面即可。
HelloWorld.vue 页面加入一个测试按钮
如下图所示，说明组件已经成功引入了。
页面路由
添加页面
我们把 components 改名为 views，并在 views 目录下添加三个页面，Login.vue，Home.vue，404.vue。
三个页面内容简单相似，只有简单的页面标识，如登录页面是 “Login Page”。
Login.vue，其他页面类似。
<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。
http://localhost:8080/#/login，/login 路由到 Login Page。
http://localhost:8080/#/404，/404 路由到 404 Error Page。
安装 SCSS
1.安装依赖
因为后续会用到 SCSS 编写页面样式，所以先安装好 SCSS。
yarn add sass-loader node-sass --dev
2.添加配置
在build文件夹下的webpack.base.conf.js的 rules 标签下添加配置。
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
3.如何使用
在页面代码 style 标签中把 lang 设置成 scss 即可。
<style lang="scss"></style>
4.使用测试
丰富一下 404 页面内容，加入 scss 样式，移除 App.vue 的 logo 图片。
访问：http://localhost:8080/#/404， 正确显示修改后的 404 页面效果。
安装 axios
axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，我们后续需要用来发送 http 请求。
安装依赖
执行以下命令，安装 axios 依赖。
yarn add axios
安装完成后，修改 Home.vue 进行简单的安装测试。
点击测试按钮触发 http 请求，并弹出窗显示返回数据。
安装 Mock.js
为了模拟后台接口提供页面需要的数据，我们引入 Mock.js 为我们提供模拟数据，而不用依赖于后台接口的完成。
安装依赖
执行如下命令，安装依赖包。
yarn add mockjs --dev
安装完成之后，我们写个例子测试一下。
在 src 目录下新建一个 mock 目录，创建 mock.js，在里面我们模拟了两个接口，分别拦截用户和菜单的请求，并返回相应的数据。
如下图所示：
修改 Home.vue，在页面放置两个按钮，分别触发用户和菜单的处理请求，成功后弹出获取结果。
浏览器访问：http://localhost:8080/#/，分别点击两个按钮，mock 会根据请求 url 拦截对应请求并返回模拟数据。
获取用户信息
获取菜单信息
OK，mock 已经成功集成进来了。
源码下载
后端：https://gitee.com/liuge1988/kitty
前端：https://gitee.com/liuge1988/kitty-ui.git
Vue + Element UI 实现 登陆注册基本demo实例相关推荐
- 闲云旅游网03（基于vue+element ui）登录注册功能开发
登录功能 项目GitHub地址:https://github.com/q2419068625/xianyun 新建登录注册页的布局 新建了登录的表单 绑定了数据到data rules表单的验证 提交数 ...
- Vue + Element UI——对话框式登录框DEMO
源代码 <template><div class="login"><el-button type="success" class= ...
- 【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面 话不多说,先上图 界面效果图 下面直接上代码: <template><div class="loginbody&q ...
- 基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录 概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
最新文章
- ZendStudio快捷键
- angular input_Angular 秒杀其它框架的设计之美（一）
- 匹配行linux中grep命令的使用
- C# 的未来：主构造函数
- 你觉得我的这段Java代码还有优化的空间吗？
- jest.conf.js_如何在Jest中正确模拟Moment.js / dates
- 关于J2EE项目中三层架构如何在开发中得到正确的实施
- python练手经典100例-Python入门练手100例
- XP cmd命令 部分
- Android Service中的android:process=:remote
- Linux系统p4vasp使用教程,［分享］一个详细的p4vasp安装指南 - 计算模拟 - 小木虫 - 学术 科研 互动社区...
- 2019 CUMCM ABC Notes
- c++删除字符串特殊符号
- Android滑动浮层(滑动布局中使其中子布局一个浮动)
- 初学者学习 - Unity中的热更新 - Lua和C#通信
- ASP微信支付之扫码支付
- 怎么修改win8计算机用户名和密码忘了怎么办,win8怎么修改用户名 Win8修改用户名与目录名的办法...
- OpenCV视频目标跟踪及背景分割器
- hive 任务查询报错 Reduce operator initialization failed
- php5.6 nts ts,php ts nts v6 v9的区别