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

vue入坑总结的更多相关文章

  1. Vue入坑教程（二）——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  2. Vue入坑第一篇

    写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...

  3. Vue入坑日记: day - 01

    前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...

  4. Vue入坑教程（一）——搭建vue-cli脚手架

    1. Vue简介 详细内容可以参考官网Vue.js 1)兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMA ...

  5. vue入坑教程（一）

    1.脚手架搭配webpack的安装 (1)需要检查自己的电脑有没有安装node和npm 如果没有安装可以参考官网,以及安装的步骤 官方中文网地址:http://nodejs.cn/ (2)下载webp ...

  6. vue入坑教程（二）在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

  7. VUE 入坑系列 一 双向绑定

    html代码 <div id="app"> <p>{{message}}</p> <span>message1</span&g ...

  8. VUE 入坑系列 一 事件

    html代码 <div id="app"> <button v-on:click="counter += 1">加1</butto ...

  9. VUE 入坑系列 一 基础语法

    html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: & ...

随机推荐

  1. Python中的单例模式

    在 Python 中,我们可以用多种方法来实现单例模式: 使用模块 使用 __new__ 使用装饰器(decorator) 使用元类(metaclass) # mysingleton.py class ...

  2. 2017最新PHP经典面试题目汇总（上篇）

    1.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符,或者用{}讲变量括起 ...

  3. Mysql主从原理

    MySQL的Replication(英文为复制)是一个多MySQL数据库做主从同步的方案,特点是异步复制,广泛用在各种对mysql有更高性能.更高可靠性要求的场合.与之对应的是另一个同步技术是MySQ ...

  4. PHP 算法

    1.首先来画个菱形玩玩,很多人学C时在书上都画过,咱们用PHP画下,画了一半. 思路:多少行for一次,然后在里面空格和星号for一次. ? 1 2 3 4 5 6 <?php for($i=0 ...

  5. django1.11如何实时访问mysql数据库

    前几天,一直在研究django框架,发现它自身封装了很多有用的API,很有意思.比如,数据库操作基本的创表,查询,插值,更新,删除都有,很方便,再加上json库可以直接将数据json化,通过服务器传给 ...

  6. Atcoder R84 D Small Multiple

    题意:给定一个正整数K,求K的倍数中,各位上的数字之和最小是多少? 思路非常巧妙,对于一个数,我们有定义两种改变方式: 1.加1,则数字之和+1(9的情况另行考虑) 2.乘10,数字之和不变 对于末位 ...

  7. 【HNOI2002】营业额统计

    https://www.luogu.org/problem/show?pid=2234 用Treap维护,每次查询这个数的前驱与后继哪个和它差值更小. 由于查询一个数时在Treap走出的路径必定经过它 ...

  8. select联动遇到的问题

    今天写了个select下拉联动,记录下过程中遇到的问题. dom部分 // 拿到选中项的索引 myselect.selectedIndex // 拿到选中项的text/value myselect.o ...

  9. 是否是有效的dom节点--轮子代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  10. Navicat for Mysql 暴力破解教程

    关于破解Navicat for MySQL的教程有很多 ,但是比较繁琐, 这里推荐一种比较简单的办法~ 网盘地址:链接: https://pan.baidu.com/s/1kVHyShL 密码: ws ...