使用Vue+ElementUI做一个简单的前端工具箱

最新推荐文章于 2024-06-26 10:43:03 发布

weixin_33953249

最新推荐文章于 2024-06-26 10:43:03 发布

阅读量880

点赞数

文章标签： javascript 前端 json ViewUI

原文链接：https://my.oschina.net/prettypice/blog/847686

版权

2019独角兽企业重金招聘Python工程师标准>>>

前言

为什么会选择做一个前端工具箱呢？大概是因为看到过一些站长工具确实比较好用，所以就想简单效仿一番，暂时工具并不是很丰富（暂时只有颜色工具、json格式化和编码工具），但是自己用的话，需要什么再加入什么，确实也没那么多的限制，只是一个练手项目而已。整个项目耗时两天（逛oschina和知乎的空余时间），做得比较简陋。

github地址：https://github.com/TangGe1119/ToolBox

线上地址：http://tool.lonlyguy.com/

技术栈

前端部分采用了Vue+ElementUI进行布局，后端部分采用express简单的建立一个node服务器。所有的运算都放在了前端进行，基本属于一个纯前端项目。

过程

ElementUI

ElementUI是一个非常优秀的Vue组件库,由饿了么团队开发和维护，组件非常全面，可用于快速开发各种系统的后台部分。在Vue中使用ElementUI也非常简单（我基本已经从npm切换到了yarn，所以使用yarn的命令）：

yarn add element-ui

然后：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
...
Vue.use(ElementUI)
...

即可在任意的Vue组件中直接使用Element中的组件，而不需要进行任何额外的申明。同时ElementUI也支持组件的按需引用，详情可见Element|快速上手

入口部分

在入口文件中对各部分进行引用，配置路由已经对Vue进行初始化:

import Vue from 'vue';
import VueRouter from 'vue-router'
import axios from 'axios';
import ElementUI from 'element-ui'

import 'normalize.css/normalize.css';
import 'element-ui/lib/theme-default/index.css'
import './css/common.css';

import App from './App.vue';
import Index from './pages/Index.vue';
import JsonFormat from './pages/JsonFormat.vue';
import JsonRest from './pages/JsonRest.vue';
import EncryptRandomPass from './pages/EncryptRandomPass.vue';
import EncryptBase64 from './pages/EncryptBase64.vue';
import EncryptMd5 from './pages/EncryptMd5.vue';
import ColorTools from './pages/ColorTools.vue';

Vue.use(VueRouter);
Vue.use(ElementUI)
Vue.prototype.$http = axios;

const routes = [
	{ 
		path: '/', 
		component: Index
	},
	{
		path: '/jsonFormat',
		component: JsonFormat
	},
	{
		path: '/jsonRest',
		component: JsonRest
	},
	{
		path: '/encryptPass',
		component: EncryptRandomPass
	},
	{
		path: '/encryptBase64',
		component: EncryptBase64
	},
	{
		path: '/encryptMd5',
		component: EncryptMd5
	},
	{
		path: '/color',
		component: ColorTools
	},
]

const router = new VueRouter({
	routes
})


new Vue({
	el: '#app',
	router,
	render: h => h(App)
});

ElementUI的navmenu可以方便的结合vue-router对页面进行比较友好的跳转头部组件代码如下：

<template>
    <el-menu theme="dark" :default-active="activePath" class="el-menu-demo" mode="horizontal" :router="true">
        <div class="container">
            <el-menu-item index="/"><img class="brand" src="../img/brand1.png" alt=""></el-menu-item>
            <el-menu-item index="color">颜色工具</el-menu-item>
            <el-submenu index="json">
                <template slot="title">JSON工具</template>
                <el-menu-item index="jsonFormat">JSON格式化</el-menu-item>
                <el-menu-item index="jsonRest">REST API测试</el-menu-item>
            </el-submenu>
            <el-submenu index="encrypt">
                <template slot="title">编码工具</template>
                <el-menu-item index="encryptMd5">MD5加密</el-menu-item>
                <el-menu-item index="encryptBase64">Base64编解码</el-menu-item>
                <el-menu-item index="encryptPass">密码生成器</el-menu-item>
            </el-submenu>
        </div>
    </el-menu>
</template>

<script>
    export default {
        computed: {
            activePath: function() {
                return this.$route.path.substr(1);
            }
        }
    }
</script>

通过el-menu-item的index属性来进行路由的跳转

通过计算属性来获取到当前激活的router的路径的/后面的部分，从而实现默认的激活样式