前端(二十二):vue-element-admin以及 vue-admin-template

vue-element-admin

该开源项目定位于后台集成方案, vue-element-admin当做工具箱,然后通过vue-admin-template来进行组配
下载项目

git clone https://github.com/PanJiaChen/vue-element-admin.git
npm install
npm run dev

vue-admin-template

轻量化模板

git clone https://github.com/PanJiaChen/vue-admin-template
npm install
npm run dev

项目结构

修改package.json

  "name": "studyplatfrom-admin",
  "version": "1.0",
  "description": "在线教育平台",
  "author": "zyd",

对于端口号 build/index.js中修改

  const port = 9526

build

项目构建

mock

项目的模拟请求

node_modules

依赖库,类似于java的dependence

public

公共模块

src

项目源代码

其中src中又包含

api : 各种接口
assets: 图片资源
components : 公共组件
icons: svg icon
routes:路由表
store:存储
styles:各种样式
utils:公共工具
views:各种layout
App.vue : 项目顶层组件
main.js : 项目入口文件
permission.js:认证入口

1.项目登录页面
src/views/login/index.vue（登录组件）

      <h3 class="title">Login Form</h3>

2.修改Login为登录

      <el-button
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="handleLogin"
        >登录</el-button>

3.修改标题
将public中index.html修改

<title>bdp学院后台管理系统</title>

4.国际化设置
src/main.js中修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

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

5.复制 public/favicon.ico 到根目录
6.导航栏文字

layout中Navbar.vue中HOME 修改为首页

    <el-dropdown-item>
              首页
    </el-dropdown-item>

     <el-dropdown-item divided @click.native="退出;">

7.面包屑文字
src/components/Breadcrumb/index.vue

        matched = [{ path: "/dashboard", meta: { title: "首页" } }].concat(

8.将vue-el
ement-admin/src/icons/svg 中的图标复制到项目中
9.修改路由
修改 src/router/index.js 文件，重新定义constantRoutes

最后

以上就是昏睡香水为你收集整理的前端(二十二):vue-element-admin以及 vue-admin-template的全部内容，希望文章能够帮你解决前端(二十二):vue-element-admin以及 vue-admin-template所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。