VUE开发问题

vue中被困的问题！

安装所需插件

1.安装sass

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置
{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] }

2.安装vuex

cnpm install vuex --save-dev

3.安装zepto

cnpm install webpack-zepto --save-dev

4.安装axios

cnpm install axios --save-dev

5.安装jQuery

cnpm install jquery --save

在项目根目录下的build目录下找到webpack.base.conf.js文件，在开头使用以下代码引入webpack，因为该文件默认没有引用，

    var webpack = require('webpack')

然后在module.exports中添加一段代码，
// 添加代码

plugins: [
   new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery",
   jquery: "jquery",
   "window.jQuery": "jquery"
 })
], 

main.js里导入jQuery

import $ from 'jquery'

9.在element官网引入element-ui

10.在Iconfont官网查找到图标引入

---

引用Element-ui所困的问题

1.element-ui的table列超出部分省略加悬浮提示

<el-table-olumn width="150" :show-overflow-tooltip="true"></el-table-olumn>

2.表格中使用分页 和 搜索功能冲突（如下解决）

<template>
    <div class="Userlist">
        <!-- element-ui框架表格部分 -->
        <el-table :data="tables.slice((currentPage-1)*pagesize,currentPage*pagesize)">
            <el-table-column label="用户id" prop="id"></el-table-column>
            <el-table-column label="用户名" prop="user_name"></el-table-column>

            <el-table-column align="right">
                <template slot="header" slot-scope="slot">
                    <el-input v-model="search" size="mini" placeholder="请输入要搜索的内容"/>
                </template>
            </el-table-column>

        </el-table>

        <!--分页部分 -->
        <div style="text-align: center;margin-top: 30px;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="10"  //修改页面显示的个数
                @current-change="current_change">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {fetchUsers} from '@/api/Interface'; //封装的接口
    //fetchUsers 获取用户列表
    export default {
        name: '',
        data () {
            return {
                detailObj:{}, //素材详情
                tableData: [], //素材列表
                search: '',  //搜索框
                //分页如下
                users:[],
                total: 0,
                pagesize: 10, //修改页面显示的个数
                currentPage: 1,
            }
        },
        computed: {
            role() { //权限判断
                return this.name === 'admin' ? '超级管理员' : '普通用户';
            },
            tables () { //封装搜索
                const search = this.search
                if (search) {
                    // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
                    // 注意： filter() 不会对空数组进行检测。
                    // 注意： filter() 不会改变原始数组。
                    return this.users.filter(data => {
                        // some() 方法用于检测数组中的元素是否满足指定条件;
                        // some() 方法会依次执行数组的每个元素：
                        // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
                        // 如果没有满足条件的元素，则返回false。
                        // 注意： some() 不会对空数组进行检测。
                        // 注意： some() 不会改变原始数组。
                        return Object.keys(data).some(key => {
                            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
                            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
                            return String(data[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
                //return this.users.slice((currentPage-1)*pagesize,currentPage*pagesize)
                return this.users
            }
        },
        mounted(){
            this.getMaterialArr() //调用获取素材列表
        } ,
        methods: {
            // 获取用户列表
           getMaterialArr () {
               fetchUsers().then(res => {
                    console.log(res)
                    this.users = res.result.users
                    this.total = res.result.count
                    console.log(this.total)
                })
            },
            //分页引入所需
            current_change: function (currentPage) {
                this.currentPage = currentPage;
            }
        }
    }

</script>

<style lang="scss" scoped>
    .element-table {
        width: 100%;
    }
</style>

3.vue图片懒加载

1.安装插件

npm install vue-lazyload --save-dev

2.在入口文件main.js中引入并使用

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  error: 'dist/error.png', //自定义图片
  loading: 'dist/loading.gif', //自定义图片
})

3.修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）

<img v-lazy="'/static/img/' + item.productImage">

4.在使用图片懒加载时会出现问题,在vue的element-ui中如果有分页动态显示的话，图片会不改变(解决如下)

//使用了v-for循环遍历图片
<img v-lazy="like.imgUrl" alt="" :key="like.imgUrl">
这里加一个 :key等于v-lazy中的内容就可

4.vue路由懒加载（例子如下)

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/basecharts',
            component: resolve => require(['../components/page/BaseCharts.vue'], resolve) //路由懒加载
        }
    ]
})