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. 学习MySQL（上）

    具体实例 1.PHP 服务器组件 对于初学者建议使用集成的服务器组件,它已经包含了 PHP.Apache.Mysql 等服务,免去了开发人员将时间花费在繁琐的配置环境过程. Window 系统可以使用 ...

  2. 五、Hadoop学习笔记————调优之硬件选择

    ResourceManageer服务器需要选择性能较好的 若有1TB数据,每天增量为10GB,则需要预留17.8TB,*3是因为有三分备份,*1.3是因为还需要预留出空间给操作系统等等 若集群在三十台 ...

  3. OC语言的Block与Protocol（协议）

    Block ● Block封装了一段代码,可以在任何时候执⾏行 ● Block可以作为函数参数或者函数的返回值,⽽而其本⾝身又可以带输⼊入参数或返回值. ● 苹果官⽅方建议尽量多⽤用block.在多线 ...

  4. CCF认证考试——折点计数

    描述:简单题 #include<iostream> using namespace std; int main() { ], n, count = ; cin >> n; ; ...

  5. Python中的单例模式

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

  6. 在Github发布自己的compile包

    Android入门到转行做服务员--在Github发布自己的compile包 2017-12-05 15:27:10 这是一粒代码发布的第一篇博客,一粒代码从事android开发,近期打算开始搞搞博客 ...

  7. SubTool 电影字幕下载程序

    项目地址 https://github.com/backtracker/SubTool 程序说明 作为一个高清电影爱好者,找字幕的痛苦懂的人自然会懂.我在网上找了很久,并没有找到好用的字幕下载程序,于 ...

  8. 简介CentOS与 Ubuntu的不同

    1.关于登录用户 centos可以使用root登录  ubuntu不能使用root登录 centos普通用户默认不能通过sudo取得root权限执行命令, ubuntu可以,centos需要sudo时 ...

  9. YiShop_商城系统如何做好口碑营销

    口碑营销是指企业在品牌建立过程中,通过客户间的相互交流将自己的产品信息或者品牌传播开来.口碑是目标,营销是手段,产品是基石.那么,商城系统如何做好口碑营销呢?  下面由YiShop小编带你了解一下:1 ...

  10. Prism for WPF初探（构建简单的模块化开发框架）

    先简单的介绍一下Prism框架,引用微软官方的解释: Prism provides guidance to help you more easily design and build, flexibl ...