首页 > 其他 > 详细

vue一般的配置可能会有的

时间:2021-05-28 10:04:43      阅读:23      评论:0      收藏:0      [点我收藏+]
 一、less
vue中引入less(注意安装低版本,高版本依赖不支持)
 
 
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

一:
 
二:

(参考链接)
npm install echarts -S
对于参考网址一要注意修改引入
 
import * as echarts from ‘echarts‘  (在全局或者局部引入!!!)

 

四、
vue开发项目引入vuex

//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的使用 主要参考下面的网址就好了

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

 

vue一般的配置可能会有的

原文:https://www.cnblogs.com/scxmzd-819/p/14820125.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!