草庐IT

【Vue】VUE模板vue-admin-template-4.4.0（Vue + Element UI）使用攻略

望天边星宿 2025-03-06 原文

2020.7.21更新的vue-admin-template-4.4.0，现在尝试使用一下。

https://github.com/PanJiaChen/vue-admin-template

1 默认允许

安装依赖：npm install

运行项目：npm run dev

登录访问：此时登录的url是前端传送给前端自己，使用mock目录下的模拟数据。所以只运行前端项目，也不会出现任何问题。

2 配置

2.1 中英文切换

修改element-ui语言，找到src/main.js文件

将en

import locale from 'element-ui/lib/locale/lang/em' // lang i18n

修改为zh-CN

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

可以通过npm install element-ui@版本安装element-ui指定版本。

2.2 后台交互

前后端分享开发模式中，前端要与后端进行交互，通常前端都需要定义一个后端服务器的BASE_URL。另外不同的环境地址也不相同，在vue-admin-template中已经支持这样的配置。

在项目根目录下找到.env.*这样的文件，每个文件都代表不同的环境。以开发环境为例，vue-admin-template指定的开发环境的文件名为.env.development，打开这个文件，修改如下：

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://127.0.0.1:8001'

后面，还需要配置好login、getInfo、logout等api的url。

2.3 修改网站名称

打开src\settings.js

3 登录

数据库的账号为admin，密码为admin

🔶 修改前端密码长度校验

打开文件/src/views/login/index.vue，将密码最短长度改为5。

🔶 修改登录路径

打开文件src\api\user.js，修改包括登录、获取用户信息、登出的url

🔶 修改超时时间

在前后端调试的时候，为防止request请求超时，需要对请求的超时时间进行设置。打开src\utils\request.js

🔶 修改响应状态码并提取数据

在src\utils\request.js中，认为响应的正确状态码为20000，如果后台正确的响应状态码为200，需要对其进行修改。

🔶 修改登录路径

把src\store\modules\user.js中形参改的简单一点，直接传入账号密码，不要大括号，不然会出错。

再把src\store\modules\user.js中的这行代码data外面的大括号去掉，如果不去掉读取不到response的值。具体是什么原因我也不知道。

vue-admin-templateVuespancodeclassjava

有关【Vue】VUE模板vue-admin-template-4.4.0（Vue + Element UI）使用攻略的更多相关文章

  1. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  2. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

  3. ruby-on-rails - Mandrill API 模板 - 2

    我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  6. ruby-on-rails - 安装 active admin 时 activeadmin.git (at master) is not yet checked out 错误 - 2

    Activeadmingem已添加到我的rails项目中，但每次我尝试安装railsgactive_admin:install时，我都会收到类似的错误git://github.com/activeadmin/activeadmin.git(atmaster)isnotyetcheckedout.Runbundleinstallfirst.我肯定在运行“railsgactive_admin:install”之前运行了bundle。运行“bundleshow”后，我看到我已将“*activeadmin(1.0.0.pre3f916d6)”添加到我的项目中，但不断收到此错误消息。我的gem文

  7. ruby - 如何通过Middleman安装和使用Slim模板引擎 - 2

    一般来说，我是Middleman和ruby​​的新手。我已经安装了Ruby我已经安装了Middleman和gem以使其运行。我需要使用slim而不是默认的模板系统。所以我安装了Slimgem。Slim的网站只说我需要'slim'才能让它工作。中间人网站说我只需要在config.rb文件中添加模板引擎，但是没有给出例子...对于没有ruby​​背景的人来说，这没有帮助。我在git上找了几个config.rb，它们都有:require'slim'和#Setslim-langoutputstyleSlim::Engine.set_default_options:pretty=>true#Se

  8. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  9. ruby-on-rails - 如何将变量值插入 ERB 模板中的 HTML 标签？ - 2

    我有一个偏爱:如何将像o.office这样的值插入到属性中？value="#{o.office}"无效。 最佳答案 'type='text'/>或者你可以使用表单助手 关于ruby-on-rails-如何将变量值插入ERB模板中的HTML标签？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6172174/

  10. ruby - 输出液体模板中的可用对象和属性 - 2

    有没有办法在liquidtemplate中输出(用于调试/信息目的)可用对象和对象属性？？也就是说，假设我正在使用jekyll站点生成工具，并且我在我的index.html模板中(据我所知，这是一个液体模板)。它可能看起来像这样{%forpostinsite.posts%}{{post.date|date_to_string}}»{{post.title}}{%endfor%}是否有任何我可以使用的模板标签会告诉我/输出名为post的变量在此模板(以及其他模板)中可用。此外，是否有任何模板标签可以告诉我post对象具有键date、title、url、摘录、永久链接等

随机推荐