Vue学习（十五）——vue遇到的坑

（1）用cli-3新建了一个项目，代码run没有提供错误，但是浏览器程序员模式提示：

        “ You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.”

          解决方案:在vue.config.js  配置：

module.exports = {
    runtimeCompiler: true
}

   （2）任何一个组件写成之后一定要export defaults{name:"XXX"}，就好像做成了一个产品要告诉别人这个产品的名字，不然别人无法引用。

             判断是否忘记export name，可以把鼠标放在使用这个组件名字的上方，如果可以弹出这个组件的来源说明就引用成功了。如果没有，就说明他们找不到这个组件的出处，很有可能是没有export name。

（3） ant-design-vue的源代码是可以使用的，但是数据是写死的，有两种改造方式：

         a.使用花括号将数据传进去

         b. 将这些组件重新封装一下，可以省却很多重复的语句。      

(4)   可以显示模板中的字符，但是无法显示样式。原来是在入口文件中没有引入antd的样式以及less语言。所以说就算npm install less，也还是需要import一下。但是less和css不用再use，因为他们全部要用到，打包会全部打，不存在挑出来一部分打包的情况。

import 'ant-design-vue/dist/antd.css';
import "ant-design-vue/dist/antd.less";

（5）可以显示样式了，但是整个模板在浏览器中高度只有70%左右。在app.vue中设置了

#app{
  height: 100% ;
}

也没有用。

后来是在BasicLayout这个组件中配置的：

（6）快捷键小tips：

        多行注释：ctrl+/

       多行tab缩进：tab 或者shift+tab

（7） 如果在同一行有一个图片加一个标题文字，那么文字一定要使用css：

display: inline

说明这几个字是位于前面一个元素（图片）的同一行的。就会在本行接着前面的元素继续往下打印。

如果是配置：display: inline-block

就会先计算本行还有多少空间，如果该空间无法容纳作为一个块的标题，则这个块就在父组件其他的空间内换行展示。

总而言之，只要是碰到有文字和图片（或者文字）放在同一行的情况，就要给文字配置display:inline，图片不用。因为图片本来就是一个块了。

(8) 在新版的Vue中，

v-for="item in menuData"后面一定要有一个 :key="item" 不然会报错。

v-for可以用于