vite+vue3整合less教程

1、安装依赖

pnpm install -D less less-loader

2、定义全局css变量文件 src/assets/css/global.less

:root {
  --public_background_font_Color: red;
  --publicHouver_background_Color: #fff;
  --header_background_Color: #fff;
  --menu_background: #fff;
}

3、引入less src/main.js

import {createApp} from 'vue'

import './assets/css/global.less';
import './assets/css/style.css'

import 'ant-design-vue/dist/reset.css';

import Antd from 'ant-design-vue';
import App from './App.vue';

const app = createApp(App)
app.use(Antd)
app.mount('#app')

4、配置vite vite.config.js

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    // less config
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },
})

5、使用 src/App.vue

<script setup>
import {computed, onMounted, ref} from "vue";
import axios from "axios";

// table data
const isTableDataLoading = ref(false)
const columns = [
  {
    name: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    name: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '邮箱',
    key: 'email',
    dataIndex: 'email',
    ellipsis: true,
  },
  {
    title: '薪资',
    key: 'salary',
    dataIndex: 'salary',
  },
  {
    title: '操作',
    key: 'action',
  },
];

const data = ref([]);


// pagination
const current = ref(1)
const pageSize = ref(8)
const total = ref(0)
const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}));


// load data
const loadTableData = () => {
  isTableDataLoading.value = true
  const params = {
    page: current.value,
    size: pageSize.value,
  }
  axios({
    method: "get",
    url: "http://127.0.0.1:8889/zdppy_amuserdetail",
    params: params
  }).then((response) => {
    console.log("response.data", response.data);
    const responseData = response.data.data
    console.log("responseData=", responseData)
    data.value = responseData.results;
    total.value = responseData.count;
  }).finally(() => {
    isTableDataLoading.value = false
  })
}

// handle pagination change
const handleTableChange = (pag, filters, sorter) => {
  console.log(pag, filters, sorter)
  current.value = pag.current
  pageSize.value = pag.pageSize
  loadTableData()
};

onMounted(() => {
  loadTableData()
})
</script>

<template>
  <div id="test-less">xxx</div>
  <a-table
      :columns="columns"
      :data-source="data"
      :row-key="record => record.id"
      :pagination="pagination"
      :loading="isTableDataLoading"
      @change="handleTableChange"
      bordered
  >
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          {{ column.name }}
        </span>
      </template>
      <template v-else-if="column.key === 'gender'">
        <span>
          {{ column.name }}
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-space wrap>
          <a-button size="small" type="primary" block>编辑</a-button>
          <a-button size="small" block>详情</a-button>
          <a-button size="small" danger block>删除</a-button>
        </a-space>
      </template>
    </template>
  </a-table>
</template>

<style scoped lang="less">
#test-less {
  width: 100px;
  height: 100px;
  background: var(--public_background_font_Color); //自己定义的变量
}
</style>