vue入坑总结

1、Do not mount Vue to <html> or <body> - mount to normal elements instead.

Vue2.x之后不推荐挂载vue实例到<html>和<body>上；

2、Vue2.x在loader上不支持直接书写！style！css！style.css；应该为都为每个loader添加一个-loader；

3、vue2.x在webpack打包上，直接将main指向vue.common.js；（有待补充）;在webpack.config.js中添加：

resolve: {
    alias: {
        'vue': 'dist/vue.js'
    }
}

4、在vue-cli脚手架中，已经在build文件家中的utils.js设置好了css-loader加载：

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

因此不用重复在webpack.base.config.js中配置css-loader，而引入全局css样式的方法有：

1)直接在head标签里面使用link标签引入

2)在style标签中使用@import引入

3)在main.js中使用import引入

5、注：每一个vue组件都是一个vue实例，而每一个vue组件都要求有一个根节点，不允许存在并排节点：

错误实例：

<template>
    <head-top></head-top>
    <main></main>
</template>

　　正确实例：

<template>
     <div>
       <head-top></head-top>
        <main></main>
    </div>
</template>

6、父子组件使用事件绑定通信时，必须用v-on，不能使用简写，否则没有反应。

7、一般复用的组件不存在同一个父组件里，因为数据的处理比较麻烦。