前端vue2 element ui高效配置化省时又省力

使用Vue2 Element UI进行高效配置化开发，可以极大地提高前端开发效率。以下是一个完整攻略：

1. 准备工作

安装Vue CLI

Vue CLI是Vue.js官方提供的脚手架工具，用于快速创建Vue.js项目。

npm install -g @vue/cli

安装完成后，您可以使用vue命令初始化一个Vue.js项目。

安装Element UI

Element UI是一个基于Vue.js的UI组件库。它提供了许多常用的UI组件，例如按钮、表格、表单等等。可以用于快速搭建一个现代化的Web应用程序。

npm install element-ui --save

安装完成后，您还需要在Vue.js的入口文件中引入Element UI。

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 配置Element UI主题

Element UI提供了多种主题，您可以根据自己的喜好和需求来选择。如果您需要定制一个符合自己品牌的主题，可以使用Element UI主题生成器来生成。

在theme文件夹下新建一个文件element-variables.scss，并在该文件中覆盖Element UI默认的变量。

// element-variables.scss
$--color-primary: #409EFF; // 修改为自定义颜色

@import '~element-ui/packages/theme-chalk/src/index';

在vue.config.js中配置主题文件。

// vue.config.js
module.exports = {
  css: {
    // 配置Element UI主题
    loaderOptions: {
      scss: {
        prependData: `@import "@/theme/element-variables.scss";`
      }
    }
  }
};

3. 配置路由和页面

使用Vue Router进行路由管理。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import About from '@/components/About';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

在App.vue中使用<router-view>渲染组件。

<!-- App.vue -->
<template>
  <div>
    <el-menu :default-active="$route.path" mode="horizontal">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/about">关于</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

创建HelloWorld和About两个页面组件。

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>使用Element UI进行高效配置化开发</p>
    <el-button type="primary" @click="handleClick">点击我</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '欢迎使用Vue.js'
    };
  },
  methods: {
    handleClick() {
      this.$message({
        message: 'Hello World',
        type: 'success'
      });
    }
  }
};
</script>

<style scoped>
.hello {
  font-size: 2em;
  text-align: center;
}
</style>

<!-- About.vue -->
<template>
  <div class="about">
    <p>这是关于页面</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

<style scoped>
.about {
  font-size: 2em;
  text-align: center;
}
</style>

4. 示例

假设我们需要实现一个用户列表页面，包含表格和搜索功能。以下是示例代码：

<template>
  <div class="user-list">
    <el-input placeholder="请输入关键字" v-model="keyword" style="width: 300px;" />
    <el-button type="primary" @click="handleSearch">搜索</el-button>
    <el-button type="success" @click="handleAdd">新增</el-button>
    <el-table :data="users" style="width: 100%" stripe>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="warning" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  data() {
    return {
      keyword: '',
      users: [
        { id: 1, name: '张三', age: 20, gender: '男' },
        { id: 2, name: '李四', age: 25, gender: '女' },
        { id: 3, name: '王五', age: 30, gender: '男' }
      ]
    };
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
    },
    handleAdd() {
      // 实现新增逻辑
    },
    handleEdit(row) {
      // 实现编辑逻辑
    },
    handleDelete(row) {
      // 实现删除逻辑
    }
  }
};
</script>

该示例中，我们使用了Element UI的<el-input>、<el-button>和<el-table>等组件，并实现了相应的交互逻辑。

另外，我们在路由配置中添加了一个名为UserList的路由，并在<router-view>中渲染该页面组件。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import About from '@/components/About';
import UserList from '@/components/UserList';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/users',
      name: 'UserList',
      component: UserList
    }
  ]
});

在App.vue中添加<el-menu-item>来设置用户列表页菜单。

<!-- App.vue -->
<template>
  <div>
    <el-menu :default-active="$route.path" mode="horizontal">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/about">关于</el-menu-item>
      <el-menu-item index="/users">用户列表</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>