module.exports = { // 此处省略无数行,已有的的其他的内容 module: { rules: [ // 此处省略无数行,已有的的其他的规则 { test: /\.less$/, loader: "style-loader!css-loader!less-loader" } ] } }
二、elementUI(全局)
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
Vue.use(ElementUI);
三、在vue项目中使用echarts
import * as echarts from ‘echarts‘ (在全局或者局部引入!!!)
四、
//store中的index.js store文件夹与main.js可以同级 import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const store = new Vuex.Store({ state:{ test:"测试又没有成功导入Vuex(旧值)" }, mutations:{ cl(state,data){ state.test = data } }, actions:{ }, getters:{ }, }) export default store
//main.js中 import store from ‘./store/index‘ new Vue({ store, })
使用方式::
//header.vue中 <span>{{$store.state.test}}</span><!--在模板中使用store中的state这样写--> <el-button @click="test">改变vue中的state值</el-button>
//header.vue中 methods:{ test(){ this.$store.commit(‘cl‘,‘我是新改变的state中的test值‘); } }, mounted(){ //在js中使用store中的state这样写 console.log(this.$store.state.test) }
import mapState from ‘Vuex‘ // 监听属性 类似于data概念 computed: { ...mapState(["subCurrentMenuId"]), //subCurrentMenuId为在store中定义的state值 }, //在data中可定义一个变量 data() { // 这里存放数据 return { findParam: ‘‘, }; }, // 监控data中的数据变化 watch: { subCurrentMenuId: {//subCurrentMenuId为在store中定义的state值 handler(newValue) {//newValue是检测到的值 this.findParam=newValue }, },
import VueLazyLoad from ‘vue-lazyload‘ Vue.use(VueLazyLoad, { preLoad: 1, error: require(‘./assets/img/error.jpg‘), loading: require(‘./assets/img/homePage_top.jpg‘), attempt: 2, }) vue组件中 <ul class="img"> <li v-for="(item,index) in imgList"> <img v-lazy="item" style="width: 768px;"> </li> </ul> <ul class="bgImg"> <li v-for="(item,index) in imgList" v-lazy:background-image="item"></li> </ul> 使用总结: img标签中使用懒加载:v-lazy 代替 v-bind:src ; 背景图片中使用懒加载:v-lazy:background-image = "" ==>> 注意图片和盒子大小问题,否则显示可能有问题哦。 使用时最好给一个 key 属性,即: <img v-lazy="图片地址" :key="图片地址"> :key="" 必须要加,否则就会出现,页面刷新, 其他内容都刷新了,但是只有图片不刷新的情况 。 因为key可能相同,所以页面不会更新!!!
如果想了解国际化,上网可以看看"vue-i18n" 教程 此外我的总结在gitee中 https://gitee.com/shangscxxu/usage-point-of-vuei18n/tree/master/ 克隆可以看一看 elementui组件好像也有 但没用过
原文:https://www.cnblogs.com/scxmzd-819/p/14820125.html