从0到1搭建Element的后台框架的方法步骤

以下是从0到1搭建Element的后台框架的方法步骤：

步骤1：创建Vue项目

首先，在命令行输入以下命令创建一个Vue项目。你可以选择使用任何喜欢的包管理工具，如npm或yarn。

vue create my-project 

步骤2：安装Element

接下来，我们需要安装Element。在命令行中运行以下命令：

npm install element-ui -S 

步骤3：引入Element和样式

现在，我们需要在Vue项目中引入Element对应的JS和CSS文件。请将以下代码添加到你的Vue项目的main.js文件中：

import Vue from 'vue'
import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app');

步骤4：创建后台框架

接下来，我们需要创建一个基本的后台框架，以便我们后面可以在上面搭建更多的功能。

以下是一个简单的后台框架示例：

<template>
  <div class="dashboard">
    <div class="sidebar">
      <el-menu default-active="1">
        <el-menu-item index="1">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-cooperation"></i>
            <span>分类管理</span>
          </template>
          <el-menu-item index="2-1">分类列表</el-menu-item>
          <el-menu-item index="2-2">新增分类</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style>
.dashboard {
  display: flex;
  height: 100vh;
  .sidebar {
    width: 200px;
    background-color: #f4f4f4;
    .el-menu {
      border-right: none;
    }
  }
  .main-content {
    flex: 1;
    background-color: #f5f5f5;
    padding: 20px;
  }
}
</style>

步骤5：添加页面路由

现在我们需要在页面路由中添加页面，使其在点击左侧菜单时显示。以下是一个路由示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

  { path: '/', redirect: '/dashboard' },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue')
  },
  {
    path: '/category/list',
    name: 'CategoryList',
    component: () => import(/* webpackChunkName: "category" */ '../views/CategoryList.vue')
  },
  {
    path: '/category/add',
    name: 'AddCategory',
    component: () => import(/* webpackChunkName: "category" */ '../views/AddCategory.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

步骤6：添加页面模板

创建一个基本页面模板，并使用Element组件来包装你的内容。以下是一个简单的页面模板示例：

<template>
  <div class="page">
    <el-card>
      <div slot="header">
        <div class="header-title">{{title}}</div>
      </div>
      <div class="page-content">
        <div class="page-form">
          <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="form">
            <el-form-item label="分类名称" prop="categoryName">
              <el-input v-model="form.categoryName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类描述" prop="description">
              <el-input v-model="form.description" type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div class="page-form-action">
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AddCategory',
  data() {
    return {
      form: {
        categoryName: '',
        description: ''
      },
      rules: {
        categoryName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入分类描述', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss">
.page {
  margin: 30px;
  .header-title {
    font-size: 18px;
    font-weight: bold;
  }
  .page-content {
    padding: 20px;
  }
  .page-form {
    max-width: 800px;
    margin: 0 auto;
  }
  .page-form-action {
    text-align: center;
    margin-top: 20px;
  }
}
</style>

这样，我们就创建了一个简单的基于Element的后台框架。

示例1

我们也可以通过修改Element主题来改变我们的后台框架外观。以下是一些示例：

/* 修改主题色为绿色 */
$--color-primary: #67C23A;

/* 修改成功提示框的背景色为绿色 */
$--color-success-bg: #67C23A;

/* 修改按钮的默认颜色为绿色 */
$--button-primary-bg: #67C23A;

示例2

我们还可以使用Element Pro提供的模板来创建更加复杂和功能丰富的后台框架。Element Pro是一个基于Element UI的优秀模板库，提供了许多模板、组件、样式和配置文件，可以大大提高我们构建后台系统的效率。

希望我的回答能够对你有所帮助。