一、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 }}
六、使用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')">+