网站做系统叫什么名字,广州网站制作后缀,新产品推广方案策划,无锡有多少家公司Vue Element UI 实现权限管理系统 前端篇#xff08;二#xff09;#xff1a;Vue Element 案例
导入项目
打开 Visual Studio Code#xff0c;File -- add Folder to Workspace#xff0c;导入我们的项目。 安装 Element
安装依赖
Element 是国内饿了么公司提供…Vue Element UI 实现权限管理系统 前端篇二Vue Element 案例
导入项目
打开 Visual Studio CodeFile -- 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.vueHome.vue404.vue。
三个页面内容简单相似只有简单的页面标识如登录页面是 “Login Page”。
Login.vue其他页面类似。 templatediv classpageh2Login Page/h2/div
/templatescript
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/404Vue.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 langscss/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 拦截对应请求并返回模拟数据。
获取用户信息 获取菜单信息 OKmock 已经成功集成进来了。
源码下载
后端https://gitee.com/liuge1988/kitty
前端https://gitee.com/liuge1988/kitty-ui.git
