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、一般复用的组件不存在同一个父组件里,因为数据的处理比较麻烦。