vue el-upload 显示不了本地图片_vue使用小技巧以及完整版和非完整版区别

一、关闭烦人的eslint-loader

新人在使用vue的时候，你是否遇到过这样的烦恼，

看到这个我瞬间懵逼了，这个是什么，真是烦死了，那么我们只需要关闭他的eslint-loader就好了，这个时候你首先会Google，但是里面的答案都是让你找到build文件里面的webpack.base.conf.js文件注释这些代码：

module: {
    rules: [
      // {
      //   test: /.(js|vue)$/,
      //   loader: 'eslint-loader',
      //   enforce: 'pre',
      //   include: [resolve('src'), resolve('test')],
      //   options: {
      //     formatter: require('eslint-friendly-formatter')
      //   }
      // },
      
      ...
     ]
     ...
   }

但是呀，我找得眼睛废掉也没有找到webpack.base.conf.js这个文件，那么我只好又Google，这次我换了一个方式，找到的让我找到.eslintrc.js这个文件，然后注释掉/*'@vue/standard' */注释掉这一行，但是我发现并没有什么用，这个时候我想到了文档，vue-cli的文档，我去找了一下，果然，我找到了

顺利解决了这个问题，只需要将'eslint:recommended'改成'eslint:warning'或者true然后重新npm run serve就可以了。

二、vue完整版和非完整版区别

图片来自方应杭vue全解

一张图片总结所有区别。两个版本对应的链接都可以在bootcdn里面去找。

最佳实践：总是使用非完整版，然后配合vue-loader和vue文件。

思路：

1、保证用户体验，用户下载的js文件体积更小，但只支持h函数。

2、保证开发者体验，开发者可直接vue文件里面写HTML标签，而不写h函数。

3、脏活让loader做，vue-loader把vue文件里面 的HTML转为h函数。

三、template 和 render 怎么用

我们知道vue里面有三个标签，分别是：

1、template（可以写HTML标签的）

<template>
  <div id="app">
  {{n}}
  <button @click="add">+1</button>
  </div>
</template>

2、script（写视图以外的）

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  data(){
    return {
      n:0
    }
  },
    methods:{
      add(){
        this.n += 1
      }
    }
  }

</script>

3、style（写css的）

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

那么，template和render到底有什么区别呢：

1、template是用html的方式渲染到页面的。render是用js的方式渲染到页面的。

2、render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。h就是createElement()方法：createElement(标签名称,属性配置,children)。

3、template也是一种编译方式，只是最终也还是会通过render的方式再次编译。

4、render的性能比template的性能好很多且render函数优先级别大于template。

import demo from './demo.vue'
new Vue({
  el:'#app',
    render(h) {
      return h(demo)
    }
});

此外，我们用render去渲染页面的时候会出现SEO不友好，那应该怎么办呢？

其实方法很简单，就是在HTML页面里面写好title、description、keyword、h1、a这几个标签，但是不用担心他会在页面显示你不想要的，因为render会重新渲染页面的嘛。

原则：其实就是让浏览器的curl能得到页面的信息，使得SEO能正常工作就好了。

注意：Google能获取js创建的内容。

四、http://codesandbox.io

在用vue的时候我们会有很多配置需要创建，但是http://codesandbox.io呢，就可以让你一秒直接生成vue，开始编码，非常的方便快捷。

地址：https://codesandbox.io/s 注意：不要登陆

如果你想要下载代码怎么办呢，也有export to zip 下载一个压缩文件到本地。

完。