首页 > 其他 > 详细

Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 准备

时间:2020-07-28 10:55:14      阅读:505      评论:0      收藏:0      [点我收藏+]

导入项目

将项目文件夹用 Visual Studio Code 打开


 

安装Element

安装依赖

访问:https://element.eleme.cn/#/zh-CN

组件 --> 开发指南-安装

技术分享图片

 

 

 我这用的是npm安装,可自行选择其它方法

技术分享图片

 

 

项目导入

完整引入

在 main.js 中写入以下内容:

技术分享图片

 

 按需引用可以减少体积。详细看官方文档

引入完成后,我们在原有的helloworld.vue上加入element按钮测试。

技术分享图片

 

 技术分享图片

 

 引入成功


 

页面路由

添加页面

在view目录下添加三个页面

技术分享图片

 

 都先只做简单配置。如Login.vue

技术分享图片

 

 配置路由

在 router 中添加以上路由

技术分享图片

 

 并且可以在游览器下访问到

技术分享图片

 

 


安装 scss

1.安装依赖

正常在cli 3安装时会自带scss选项。

如果没有 手动安装也行

npm i sass-loader node-sass --save-dev

npm install 关于 sass 屡次失败问题

2.添加配置

3.如何使用

技术分享图片

4.使用测试

丰富下 404 样式

技术分享图片

 

 

 技术分享图片


安装 axios

axios 是一个基于 Promise 用于游览器和nodejs 的 HTTP 客户端,我们后续需要用来发送http请求

参考:

axios和vue-axios的关系

axios和vue-axios的一些用法 

npm axios

npm i axios --save
npm i vue-axios --save

安装完成后全局注册 main.js

技术分享图片

 

 

 然后Main.vue进行简单验证

技术分享图片

 

 如图显示调用成功,更多可在 axios 文档说明上看,看多了就不苦了- -

技术分享图片

 

 


Mock设置:

mock是在项目刚开始的时候前后端同步进行,但开始后端肯定没有真实接口,先可以确定好数据格式然后再用mock进行模拟。

 

1.本地JSON文件:最简单,但是后续需要修改代码,不是真实地址

2.easy-mock平台:太多人用,免费,太卡

3.集成Mock API:可以拦截数据,返回数据,但并没有发生真实请求

安装 mock.js

npm 上下载,可去官网看文档学习复杂数据生成

npm i mockjs --save-dev

然后在src文件夹下建立mock文件夹再建立api.js放置mock

技术分享图片

 

 然后配置下main.vue测试是否能使用

技术分享图片

 

 成功会显示

 

技术分享图片

 

 技术分享图片

 

 我的vue创建时默认使用了.eslintrc.js规范 会出现报错

 技术分享图片

 

 将这两注释掉就好了(这肯定不是最优解决方案,临时先关闭最快)


 

Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 准备

原文:https://www.cnblogs.com/CZheng7/p/13378717.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!