css进度条-摸

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

摸你的手，带你用 vue 背景系列四（vueAdmin 的极简背景基础模板）。

完整项目地址：vue-element-admin

序言

做这个 vueAdmin-template 的主要原因是：vue-element-admin 项目的初衷是一个 vue 管理后台集成解决方案，与大家分享一些常用的组件或者经验，而且还在持续维护和扩展，比如最近搭建的仪表盘、增加的全屏功能、添加的标签视图等等。因此，项目会变得越来越复杂，不适合很多刚来 vue 的朋友去构建后端。所以我写了这个基本模板，它没有复杂的功能，只包含背景需要的最基本的东西。vueAdmin-template 主要基于 vue-cliwebpack 模板开发，引入了以下依赖：

该项目只做了一个极简的功能来管理后端，封装axios请求，支持无限的分层路由，动态权限和动态侧边栏。如果你需要更复杂的函数，可以参考 vue-element-admin，如果还有缺点，欢迎提出问题或 pr。下面简要介绍一下使用此模板时需要注意的事项。

路由延迟加载

路由延迟加载应该是编写较大项目时会使用的功能，并且只有在使用这个组件时才加载相应的组件，这样编写时会大大减小初始页面 js 的大小，可以更好地利用浏览器的缓存。

const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');
复制代码

在延迟加载的情况下

页面没有多少东西那么漂亮，但是我们公司的后台业务在不断迭代，现在项目有近百条路由，这个时候在开发模式下使用路由延迟加载是一件苦不堪言的事情，随便换一行代码热更新就是6000ms+，这怎么能容忍。所有者花了三天多的时间才找到原因，采用了 webpack 优化的方式，其中 dll、HappyPack 等方式都结束了，但改进效果不是很显著，只是那段时间 webpack3 所有者也升级了，编译率也大大提高了，但也需要 2000ms+。后来经过师傅@jzlxiaohei的教导，发现原来的路由懒加载是鬼魅，楼主猜测可能是异步加载导致 webpack 缓存每次都失败，所以每次重建都能这么慢。找到原因后，我们可以解决问题，因此我们封装了一种自己_import（）的方法，并且在即将到来的环境中只使用延迟加载。这解决了令人困惑和多事的缓慢重建问题。法典

const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');
复制代码

它比原来的 6000ms 快了十倍以上，我终于能够再次愉快地开发它。

权限控制

虽然在触摸你的手，带你到后台系列II（登录权限）的章节中已经详细介绍了 Vue.本项目中权限的实现方法是获取当前用户比较路由表的权限，生成当前用户权限可访问的路由表，并通过router.addRoutes将其动态挂载到路由器上。但是，虽然许多公司的业务逻辑可能不是这样的，例如，许多公司的要求是动态配置每个页面的权限，这与该项目中的默认设置不同。但是，虽然原理是一样的。与此反例一样，您可以通过树控件或其他解释在后台动态配置每个页面的权限，然后将此路由表存储在前端。当用户按照角色登录时，前端返回对应的路由表或者后端恳求之前存储的路由表动态生成可访问页面，然后router.addRoutes动态挂载到路由器上，你会发现原来是一样的，一切都没有改变。

导航侧边栏

：本项目中的侧边栏是按照路由器.js配置的路由，根据权限动态生成，省去了写路由和自动写侧边栏的麻烦，并且使用了递归组件，这样无论你路由多少层嵌套，都可以愉快地显示出来。权限验证也是递归处理的。

蛋糕屑

：该项目还封装了一个蛋糕屑导航，该导航也是通过watch$route动态生成的。法典

因为侧边栏导航和蛋糕屑或者权限，你会发现它们似乎和路由器息息相关，所以对 Vue-Router 路由信息对象做了一个小的扩展，自定义了一些属性

图标：图标显示侧边栏

图标字体

element-ui 附带的图标不是很丰富，但管理背景图标非常可定制。这里只推荐大家使用阿里的iconfont，简单易用，易于管理。一些图标字体已经作为反例嵌入到这个项目中，你可以自己替换它们。下面简要介绍如何使用图标字体。先注册图标字体账号后，就可以在我的项目中管理自己的图标字体了。我们所有的项目都是用这个来管理的，我真的推荐它。

创建图标库后，如果有更新和替换也很方便，这里我用 Symbol 的形式来介绍，这里还有 unicode 的介绍形式，字体类，有兴趣的可以自己研究一下。以后我们点击下载Symbol的时候，会发现有这样一种文件，我们只需要关心iconfont.js就可以做到

让我们将其替换为项目中的图标字体.js。为了方便起见，此项目还封装了一个 SVG 组件。

    
复制代码

网站图标

每个项目都需要有自己的网站图标。

虽然它很容易实现，但我们主要需要使用html-webpack-plugin

//webpack config
function resolveApp(relativePath) {
    return path.resolve(relativePath);
}
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: resolveApp('favicon.ico')
    }),
复制代码

只需将此项目和目录中的收藏夹图标.ico文件替换为所需的图标即可。

埃斯林特

Vuecli 默认提供标准和Airbnb两种 lint 规范，真的一个 J 测试校准太松太软，而且每个团队的 lint 规格都不一样，所以 owner 只是列出项目中大部分常用的 lint 规范并写注释方便你更改代码地址，你也可以将自己的规范上传到 npm， 就像 vue vue-eslint-config.配置 eslint 对于多人协作项目非常有用，配置 lint 以在 IDE 的 lint 插件中编写代码几乎正在起飞。可以在第一个教程中找到配置。

后信

我相信大多数 VUE 项目都是基于 VUE-CLI 的css进度条，但是虽然每个人的需求不同，但你需要定制一些东西。例如，postcss 在 vue-cli 中有一个小坑，它默认只对通过 vue-loader 引入的样式使用 autoprefixer，换句话说，.vue 文件上的 cssautoprefixer 将是有效的。相关问题：问题/544，问题/600。解决方案也简单粗鲁

//app.vue

  @import './styles/index.scss'; // 全局自定义的css样式

复制代码

您可以在 .vue 文件中添加所需的样式，

或者你可以更改 Vue-CLI 文件以将 postcss-loader 添加到 css-loader，解决方案已经在上面的问题地址中给出。我们来谈谈 postcss 的配置，新版本的 vue-cliwebpack 模板 inti 后面默认跟着一个 .postcssrc .js 在目录中。vue-loader 的 postcss 默认会读取这个文件中的配置项，所以你可以直接在这里更改配置文件。配置与 postcss 相同。

//.postcssrc.js
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {}
  }
}
//package.json
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
复制代码

如上面的代码中所述，AutoPrefixer 回家并读取 package.json 下浏览器列表的配置文件

巴别塔-波利菲尔这个项目没有兼容性要求，

如果有兼容性要求，可以自己使用 babel-polyfill。用于节点/浏览器化/webpack

npm install --save babel-polyfill //下载依赖
复制代码

在条目文件中引入

import 'babel-polyfill';
// 或者
require('babel-polyfill');//es6
复制代码

将 babel-polyfill 添加到 webpack.config 中的条目链表中.js：

module.exports = {
    entry:["babel-polyfill","./app/js"]
}
复制代码

详情请参阅链接

或者使用它给出的 CDN 地址进行暴力破解 polyfill.io 更简单，引入这个 JS 后，它会手动确定浏览器并加载 polyfill 缺失的部分css进度条，但国外费率不行，可以自己构建 CDN。

跨域问题

这

主人Vue群中的男性同伴最常问的问题就是跨域，虽然跨域问题真的不是什么难解决的问题。让我简要总结一下我推荐的几个跨域解决方案。

开发环境：构建环境corscorsproxynginx

这里我只推荐这两种跨域的方法，

其他跨域方法很多，但这两种方法确实是主流。

轻松模拟

Vue-element-admin 是一个纯粹的后端个人项目，所以数据是用 mockjs 生成的，其原理是：拦截所有请求并代理到本地模拟数据，所以网络中没有请求。但是，这并不符合实际业务开发中的场景，因此本项目使用了不久前刚刚发布的easy-mock，支持跨域，mockjs句型，并支持Swagger。相关文章

baseurl

在线或测试环境插座base_url不同是看需求长了，或者你已经用过诸如易模拟的本地到线带环境你想用自己公司生产环境的数据，这个需求可以通过使用baseurl简单解决。首先，我们在config/下有dev.env.js和prod.env.js配置文件。使用它来区分不同环境的配置参数。

//dev.env.js
module.exports = {
  NODE_ENV: '"development"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
}
//prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://prod-xxx"',
}
复制代码

同时，本项目封装了 axios 拦截器，方便您使用，您也可以根据自己的业务进行更改。

import axios from 'axios';
import { Message } from 'element-ui';
import store from '../store';
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url 读取config配置文件
  timeout: 5000                  // 请求超时时间
});
// request拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config;
}, error => {
  // Do something with request error
  console.log(error); // for debug
  Promise.reject(error);
})
// respone拦截器
service.interceptors.response.use(
  response => {
  /**
  * code为非20000是抛错 可结合自己业务进行修改
  */
    const res = response.data;
    if (res.code !== 20000) {
      Message({
        message: res.data,
        type: 'error',
        duration: 5 * 1000
      });
      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload();// 为了重新实例化vue-router对象 避免bug
          });
        })
      }
      return Promise.reject(error);
    } else {
      return response.data;
    }
  },
  error => {
    console.log('err' + error);// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
)
export default service;
复制代码

因为 axios 是每个实例，并且您的请求基于此实例，因此配置的参数属性将被继承

//api.xxx.js
import fetch from '@/utils/fetch';
export function getInfo(token) {
  return fetch({
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}
//你可以直接这样使用，之前拦截器写的东西都是生效的，
//它自动会有一个你之前配置的baseURL,
//但你说我这个请求baseURL和其它的不同,
//这也是很方便的，你可以字请求内部修改，
//它会自动覆盖你在创建实例时候写的参数如
export function getInfo(token) {
  return fetch({
    baseURL: https://api2-xxxx.com
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}
复制代码

总结

本文主要介绍一下 vueAdmin 做了什么，希望大家如果有后台新项目要开发，建议基于 vue-admin-template 进行开发，而 vue-element-admin 更多用作集成解决方案，想要去上面找用什么功能，因为两者的基本架构是一样的， 所以重用成本也很低。

在规定的时间内，用加减法计算出正确的结果，你能通过多少级？

JIF 图 [移动用户] 点击我查看

事实上，它是

这个写起来很简单，只是用CSS3和JavaScript写下来的网页项目，逻辑思维也很简单，判断填写的符号和数字的结果是否相等是可以的。至于这张图是怎么做的也是CSS写下来的，代码的思路就是图片渲染，加上进度条的加载时间，如果进度条加载或者进度条加载前没有计算或者计算不正确，结果和加减法都是算子的判断， 想必你也知道规律性，这是关系算子的使用，以及算子的组合。进度条是 CSS3 编写的效果。当然css进度条，如果你想拿到这个案例，可以直接来到前端群：621071874，欢迎小白进来一起学习，一起进步，当然，我也会找到一些比较经典的案例，符合当今企业的笔试需求css进度条，适合小白学习的基础视频和学习资料也会相应分享到群里。（包括这个案子，仅限于小白，我觉得这对你来说已经很简单了）

附源码：

CSS希望为前端组找到一个小合作伙伴：621071874

JS想让一个小伙伴加入前端组：621071874其实经典案例

很多，比如蛇、推箱、俄罗斯方块、毁星等经典案例游戏可以用元生JS写下来，也许小白觉得难，但有句话叫“世上没有什么难事，只怕有心的人”。你感觉如何？

如果你认为它很好，就像它一样