在 Vue 中使用 Render 函数来进行结果的格式化

在 Vue 中,想要对数据进行格式化有很多种方式,比如,使用 filter 并搭配上 管道符|来进行格式转化。或者使用 computed 方法进行数据格式的转化。

这篇文章分享一下我是如何使用 Render 函数来进行结果的格式化的。

目前的需求是这样的,我从服务器获取到的数据需要渲染到 Table 组件中,由于数据的渲染形式受到多组参数影响,因此,我决定使用 render 函数来进行处理。

根据 iView 文档的说明,我们可以在 data 中传入一个 render 函数,来进行 render 处理,因此,我们可以这样设定数据

let data = [{
          title: "生日",
          key: "birthday",
          render: (h, params) => {
            // here is my render function
          }
        },]

在 render 函数中,我们需要返回一个 h 函数的实例,这个 h 函数其实是渲染函数,你只需要返回对应的数据即可。

我们在初始化时,传递了两个参数,其中第一个参数是渲染函数,第二个参数则是当前的数据。其中包括如下信息

index 是当前数据的顺序;row 是当前行的数据,column 则是当前列的数据。你可以通过 params.row.xxx 来获取其他字段的数据,来进行组合数据的判断。

比如(params.row.a + params.row.b)=== params.row.c

Vue 使用 Axios

在 Vue 1 时,我们使用的主要是 Vue-Resource,到了 Vue 2 时,推荐使用 axios。不过 Axios 并非为 Vue 设计,所以需要自己配置一些东西。

But,我是一个懒人,决定选择使用最简单的方法来实现——使用 vue-axios

首先,安装 axios 和 vue-axios

yarn add axios vue-axios

然后,在你的 main.js 中加入如下代码

import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

这样,就可以将 Axios 注册为全局可用了。

然后在你需要的地方调用即可。

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

Vue Router 中的默认路由如何定义?

在使用 Vue 开发后台的时候,有些时候我们需要一个默认路由。

比如说,用户登陆以后,会看到一个界面,此时这个界面就需要一个默认路由。因为这个界面一般会放置一个 route-view,如果没有默认路由,就会导致首页的内容是空白的。因此,放置一个默认路由来显示内容即可。

想要实现也很简单,在对应的路由中添加 children 项目,并设置其 path"" 这样,就会将这个路由设置为默认路由。比如,这个样子:

let router = new Router({
    routes: [
     {
        path: "/dashboard",
        component: home,
        children: [
          {
            path:"",
            component: analytics,
          }
        ]
    ]
})

这样就实现了点击 dashboard ,进入对应页面后,默认查看的是 analytics 的内容。

在 Vue 中使用 alias 来简化引用路径

在写 Vue 代码时,我们经常会用到组件化的思想,因此,我们的文件也被拆分的七零八落,如果每次都使用完整的路径来写引用,未免有些太长了,因此,我们可以考虑使用一些工具来帮助我们解决这个问题。

这一步,我们可以通过 Webpack 的 resolve 模块的 alias 功能来实现

比如说,可以将一个较长的路径 src/components/admin-components/login/login.vue 简化为 @admin_com/login/login.vue,这样你就少写了很多代码,可以让你的代码可读性更高。

简化示意图

如何实现

首先,在你的项目根目录创建一个 vue.config.js 文件。如果有了就不需要再创建了。

然后,在其中加入如下代码

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

这个函数用来让你免于在每一次设置 alias 时都写前面的 path.join

然后,添加如下代码

module.exports = {
  chainWebpack: config => {
   // 设置项目
  }
};

然后,导出一个对象,我们稍后将在这个对象中设置 alias。

接下来,我们需要在 chainWebpack 的函数中添加我们的 alias。将代码修改如下

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@admin_com", resolve("src/components/admin_components/"));
  }
};

我们添加的这一行代码 config.resolve.alias.set("@admin_com", resolve("src/components/admin_components/")); 就是在 Webpack 中添加解析的 alias,在渲染页面时,会自动将 @admin_com 替换为 src/components/admin_components

这样,你就可以根据自己的需要,去设置各种各样的 alias, 来简化你自己的代码了。

需要注意的是,@默认被 alias 到了 src 目录,所以你最好不要修改 @,以免出错。

以及,如果你担心后续在其他地方使用你要设置的 alias,可以和我一样,前面加一个符号。

Debug 你的 alias

如何看你的 alias 呢?也很简单,只需要在项目根目录执行 vue inspect resolve.alias,就可以看到所有你自己定义的 alias 了。

Vue 没有办法让页面高度为 100% 怎么办?

在进行 Vue 后台开发时,一般来说,我们希望我们的应用的首页是 100% 高度,其样式大致如下

效果图

但是一开始,往往会遇到高度没有办法设置为 100%。

这是由于在 Vue 中,并没有给 html,body,#app 设置默认高度

解决方案也很简单,只需要在 App.vuestyle 中添加如下代码

html,
body,
#app {
  height: 100%;
}

Vue Router 应该如何实现限制用户登陆的功能?

在 Vue Router 中,并没有一个所谓的默认首页的功能,所以我一直都很好奇,应该如何实现这样的功能?如果没有这样的功能,又如何实现一个项目的默认显示页面呢?

今天,终于有了答案。

这样的功能不是内置的,不过你可以通过 router.beforeEach来实现这个功能。

具体的思路是,在跳转前,对目标路由进行检测,如果目标路由的 meta 信息中写明了需要进行鉴权,就跳转到默认的登陆页面。这样,就可以实现默认显示登陆页面的功能。

具体可以参考的代码

/// 省略引用的代码
let router = new Router({
  mode:"history",
  base:base,
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: { title: '登陆' }
    },
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { title: '首页', requireLogin:true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const { name,meta } = to;
  const { requireLogin } = meta; // 提取登陆 标志

  if(name === 'login'){
    return next();
  }
  const needLogin = requireLogin;

  if(needLogin){ // 如果判断需要登陆,就跳转登陆。
    return next({
      name:"login",
      params:{
        back: to
      }
    })
  }
  next();
})

Vue 项目引入 Normalize.css 来进行格式的初始化

以前,我们使用 reset.css 来完成 HTML 样式的初始化,借助这个 css 文件,可以将多个不同平台,不同系统下的基础组件的样式整合一致。

如今,我们可以使用 Normalize.css 来完成这个工作,也非常简单

yarn add normalize.css

安装完成后,在 vue 的主文件,引入即可

import 'normalize.css/normalize.css'