「持续更新」基于Vue-Admin-Template的二次开发

以前用过一些前端框架，比如angularjs、easyui、layui等等。从去年开始接触vue.js，因有angularjs的开发基础的加持，所以直接上手vue项目，没有太大的难度。

接触了vue项目一年多了，但是自己没有从头搭建过完整的vue项目。最近正计划搭建个平台，本想使用自己比较熟悉的angularjs，考虑些许后，最后决定基于vue开发，便直接选择了elementUi。

这篇文章算是简单记录一下自己在使用vue-admin-template开发中的一些记录吧。

vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。

下载运行

github：github.com/PanJiaChen/…

# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev

访问：http://localhost:9528

修改菜单主题

修改 src/styles/variables.scss

默认样式

修改后

$menuText:#1c1c1c; //菜单字体颜色
$menuActiveText:#409EFF; //菜单字体选中颜色
$subMenuActiveText:#525252; //子菜单字体选中后主菜单颜色

$menuBg:#f5f5f5; //整体背景颜色
$menuHover:#c7c7c7; //菜单悬浮变色

$subMenuBg:#ffffff; //子整体背景颜色
$subMenuHover:#c7c7c7; //子菜单悬浮变色

显示左上角Logo

修改 src/settings.js

sidebarLogo: true

发现logo背景色和主题不匹配，修改logo背景色和字体颜色，和主题颜色匹配。

修改 src/layout/components/Sidebar/Logo.vue

@import "~@/styles/variables.scss";

使用＜el-empty＞报错

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

解决：element版本太低了，当前版本里面查找不到el-enpty这个组件，需要重新安装一下element的版本。

npm i element-ui@2.15.6 -S

使用动画按钮效果

引入 btn.scss

@import './variables.scss';

@mixin colorBtn($color) {
  background: $color;

  &:hover {
    color: $color;

    &:before,
    &:after {
      background: $color;
    }
  }
}

.blue-btn {
  @include colorBtn($blue)
}

.light-blue-btn {
  @include colorBtn($light-blue)
}

.red-btn {
  @include colorBtn($red)
}

.pink-btn {
  @include colorBtn($pink)
}

.green-btn {
  @include colorBtn($green)
}

.tiffany-btn {
  @include colorBtn($tiffany)
}

.yellow-btn {
  @include colorBtn($yellow)
}

.pan-btn {
  font-size: 14px;
  color: #fff;
  padding: 14px 36px;
  border-radius: 8px;
  border: none;
  outline: none;
  transition: 600ms ease all;
  position: relative;
  display: inline-block;

  &:hover {
    background: #fff;

    &:before,
    &:after {
      width: 100%;
      transition: 600ms ease all;
    }
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    transition: 400ms ease all;
  }

  &::after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
  }
}

.custom-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 4px;
}

修改 index.scss

import引入btn.scss

@import './btn.scss';

修改 variables.scss

增加以下基础色

$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;

直接使用即可

<router-link class="pan-btn light-blue-btn"  to="/icon/index">
      Icons
</router-link>

引入中文语言

现在有中、英、法三种，不同使用i18n，所有element-ui的组件文字显示需要手动规定，但是有些组件的名称等不能手动修改，例如分页组件的“跳到” “总共” “Go to” 等。

element-ui提供了不同的语言包，在element-ui/lib/locale/lang下面，这里，为了性能方面，只需要载入这三个语言包即可。

修改main.js

import localeCn from 'element-ui/lib/locale/lang/zh-CN'
import localeEn from 'element-ui/lib/locale/lang/en'
import localeFr from 'element-ui/lib/locale/lang/fr'

let language = window.sessionStorage.getitem('language')

Vue.use(ElementUI, {locale: language === 'en'? localeEn : language === 'fr' ? localeFr : localeCn})