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. 十一、Hadoop学习笔记————数据库与数据仓库

    数据仓库是集成的面向主题的数据库的集合 面向主题主要是宏观上解决某一类问题,集合性指数据集 数据库主要处理用于事务处理,数据仓库用于分析处理,数据库适用于操作型数据,便于增删改查, 数据仓库则用于挖掘 ...

  2. springboot + redis缓存使用

    [参照资料] 1.spring boot 官网文档 2.https://www.cnblogs.com/gdpuzxs/p/7222309.html [项目结构] [pom.xml配置] <?x ...

  3. 初学者易上手的SSH-整合

    许久没更新博客了! spring还有一章aop(面向切面),我就没讲述了,你们可以去看下代理模式. 那么我们开始整合:struts2  2.3.4 ,hibernate 5.2.10 ,spring ...

  4. SQL Count（*）函数，GROUP_By,Having的联合使用

    COUNT(*)  函数返回在给定的选择中被选的行数. 语法:SELECT  COUNT(*) FROM  table 使用:现在有一个表,名叫app_category,从Navicat中可以看到表中 ...

  5. maridb\mysql 源码安装，以10.1.26版本为例

    mysql 源码安装(mariadb 10.1.26) 1.环境部署 1 安装cmake 源码安装三部曲或者yum install cmake2安装依赖包yum install -y ncurses- ...

  6. 实践作业2：黑盒测试实践——在被测系统上录制脚本 Day 5

    1.处理了学生信息管理系统运行的小细节 2.总结了katalon的使用流程如下 a.在Katalon Studio中创建一个自动化测试项目. b.创建一个测试案例,用来写入所有必要的测试步骤 c.编写 ...

  7. php+jQuery+Mysql找回密码----ThinkPHP

    最近用ThinkPHP做了一个邮箱找回密码功能,在遭遇了N个bug之后终于做成了,下面分享一下邮箱找回密码功能的实现: 邮箱找回密码实际上就是在用户通过验证之后重置密码的过程,一般开发者会在验证用户信 ...

  8. idea从git上拉取并管理项目

    1:idea从git上拉取项目 (1)FILE --> New --> Project from Version Control --> Git (2):输入项目的Https SSH ...

  9. 初识java这个小姑娘（二）

    妙解垃圾回收机制 周一,早高峰. 一段考验一个人耐力.智力.开车技术以及脾气的路. 我把车开进了一个没有红绿灯的丁字路口,然后就没有然后了. 来自三个方向的大车小车开始在不大的一块空间里开始互相斗智斗 ...

  10. Mysql----关于内联，左联，右联，全联的使用和理解

    准备工作:新建两张表 表一:student 填充内容:编号,姓名,班级 表二:school 填充内容:编号,班级,专业 这两张表建好了,意为班级选课表,两张表没有任何主外键的关系,下面进行内联,左联, ...