vue一般的配置可能会有的

Posted 2021-05-27 蒲地蓝

 一、less

vue中引入less（注意安装低版本，高版本依赖不支持）

(https://blog.csdn.net/qq_41848496/article/details/108522314)  （参考）

 

 

npm install less@3.9.0 less-loader@5.0.0 --save-dev

main.js中写入

import less from \'less\'

Vue.use(less)

 

安装成功后，打开 build/webpack.base.conf.js 

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
          {
            test: /\\.less$/,
            loader: "style-loader!css-loader!less-loader"
          }
        ]
    }
}

二、elementUI(全局)

npm install element-ui -S

项目中导入

修改main.js

import ElementUI from \'element-ui\';
import \'element-ui/lib/theme-chalk/index.css\'; 
Vue.use(ElementUI);

 

三、在vue项目中使用echarts

一：

https://www.cnblogs.com/ldlx-mars/p/7815328.html

 

二：

https://blog.csdn.net/qq_26666947/article/details/112470775

(参考链接)

npm install echarts -S

对于参考网址一要注意修改引入

 

import * as echarts from \'echarts\'  （在全局或者局部引入！！！）

 

四、

vue开发项目引入vuex

https://baijiahao.baidu.com/s?id=1666368045940664675&wfr=spider&for=pc（参考链接）

//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中引入

//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)
  }

如何在一个组件中利用watch方法获取store中的state值？（另一个方法）

 

 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
     },
 },

 

 

vue图片懒加载 —— vue-lazyload的使用 主要参考下面的网址就好了

https://blog.csdn.net/halo1416/article/details/81302419

1. 安装：cnpm install vue-lazyload --save-dev（当然可以用npm或者yarn哦）

2. main.js  中全局引入：

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" alt="" 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组件好像也有 但没用过