07 基于Vue+Less+axios封装+ElementUI搭建项目底层支撑实战

在这个实战中，我们将使用Vue.js结合Element UI来创建一个基础的应用框架，并使用axios进行HTTP请求，以及Less作为CSS预处理器。以下是一个简化的实例代码，展示了如何设置项目基础结构和配置：

# 安装项目依赖
npm install
 
# 启动开发服务器
npm run serve

<template>
  <div id="app">
    <el-button @click="fetchData">获取数据</el-button>
    <div v-if="data">
      数据: {{ data }}
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  name: 'App',
  data() {
    return {
      data: null,
    };
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('请求出错:', error);
        });
    },
  },
};
</script>
 
<style lang="less">
@primary-color: #409EFF;
 
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
 
  .el-button {
    margin: 10px;
  }
}
</style>

在这段代码中，我们创建了一个简单的Vue应用，其中包含了一个按钮用于发起HTTP GET请求，并使用了Element UI的按钮组件。我们还定义了一个简单的Less变量来设置主题颜色，并应用到了页面的某个元素上。这个例子展示了如何将Vue.js、Element UI和axios整合在一起，并展示了如何使用Less来提高CSS的可维护性。