Vue使用Less进行开发的详细指南

一、Vue使用Less的写入方式

Vue使用Less进行开发可以按需引入Less文件，不需要全部引入。使用vue-loader的resolve属性可以自动查找@import和url()，并用Webpack处理它们。在Vue CLI创建的项目中，可以在vue.config.js中增加代码：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        //引入全局less样式
        data: '@import "@/assets/css/common.less";'
      }
    }
  }
}

在data选项中引入@import “路径+文件名”，就可以在.vue文件中使用样式了。

二、Vue使用v

Vue中各类指令，例如：v-bind、v-model、 v-show、v-if等指令都能够结合Less进行开发，提高编写效率。

例如：

<template>
  <div :class="{ lessClassName: isActive }">Hello World！</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

<style lang="less">
// 定义类名
.lessClassName {
  font-size: 20px;
  color: #333;
}
</style>

在Vue中使用v-bind指令能够动态绑定class、style等属性：

<template>
  <div :class="{ lessClassName: isActive }">Hello World！</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

<style lang="less">
// 定义类名
.lessClassName {
  font-size: 20px;
  color: #333;
  &:hover {
    color: red;
  }
}
</style>

三、Vue使用require

Vue使用require引入其他文件，例如图片、字体等，这样项目就不需要在HTML中添加static目录的前缀了：

<template>
  <img :src="imagePath">
</template>

<script>
export default {
  computed: {
    imagePath() {
      return require("@/assets/image/vue.png");
    }
  }
}
</script>

<style lang="less">
// 自定义iconfont
@iconfont-path: "~@/assets/font/iconfont";
@import "@{iconfont-path}/iconfont.css";
.iconfont {
  font-family: "iconfont";
  font-size: 16px;
}
</style>

四、Vue使用Axios

Vue使用Axios进行数据请求，可以快速、高效地获取数据。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    axios.get('api/message').then(res => {
      this.message = res.data;
    });
  }
}
</script>

<style lang="less">
// 样式定义
</style>

五、Vuex使用

Vue使用Vuex进行状态管理，在多个组件之间进行数据共享，提高开发效率。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  }
});

export default store;

// App.vue
<template>
  <div @click="add">{{ message }}</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState({
      message: state => state.count
    })
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['increment'])
  }
}
</script>

<style lang="less">
// 样式定义
</style>

六、使用Vue

Vue.js是一套用于构建用户界面的渐进式框架，使用Vue可以快速构建交互式界面、组件化应用，并且具有更好的可维护性。

<template>
  <div v-on:click="flag = !flag">Hello {{name}}</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: 'Vue.js',
      flag: false
    }
  }
}
</script>

<style lang="less">
// 样式定义
</style>

七、Vuex的使用方式

Vuex是一个状态管理库，提供了解决不同组件间状态共享的问题。Vuex的核心概念包括：state、getters、mutations、actions和modules。

// store.js 声明状态以及相关逻辑
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    count(state) {
      return state.count;
    }
  }
});

export default store;

// App.vue 使用store中的状态以及相关逻辑
<template>
  <div>
    {{ $store.getters.count }}
    <button @click="$store.commit('increment')">+</button>
    <button @click="$store.commit('decrement')">-</button>
    <button @click="$store.dispatch('incrementAsync')">异步加1</button>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
// 样式定义
</style>