问题描述:

main.js

import Vue from 'vue'
import App from './App' /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

为什么已经定义了 components: { App } ,还需要 template: '<App/>' ?

问题解答:

el: '#app' :是指向 index.html 的<div id="app"></div>元素,该元素作为vue的挂载点

components :是声明有哪些组件

template : 是使用哪个组件

将 <App/> 挂载到 #app 这个元素,<App/> 本身是一个组件,即这里通过 components: { App } 注册组件,然后通过 template: '<App/>' 使用组件。

关于Vue脚手架写法的问题的更多相关文章

  1. vue - Vue脚手架

    今天的内容vue脚手架,越来越有内味了,也慢慢地开始有点难度了哈哈,但是没有关系,慢慢学慢慢琢磨,我倒是感觉有点越来越像node了,不知道怎么回事,这是要向后端发展的节奏啊 一.初始化Vue脚手架 1 ...

  2. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  3. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  4. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  5. Vue脚手架(vue-cli)安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

  6. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  7. npm——安装教程、安装vue脚手架

    npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题.比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并安 ...

  8. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  9. 搭建vue脚手架---vue-cli

    vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.我们在开发项目时尤其需要这样一个快速构建项目的工具. 以下 ...

随机推荐

  1. 2018.11.7 关于将Web项目部署到阿里云服务器-5个步骤搞定

    将Eclipse导出的War包部署到阿里云服务器上,提供给移动端实时的访问 1. 先登录阿里云网站注册账号,选择服务器类型(我用的是 云服务器ECS), 如果你还是在读大学生可享受优惠价,最低好像是9 ...

  2. GreenPlum 与hadoop什么关系?(转)

    没关系. gp 可以处理大量数据, hadoop 可以处理海量. gp 只能处理湖量,或者河量. 无法处理海量. 作者:SallyLeo链接:https://www.zhihu.com/questio ...

  3. umlの类图

    版权声明:本文为博主原创文章,若要转载请注明出处!^_^ https://blog.csdn.net/u010892841/article/details/24844825 类图class diagr ...

  4. Android 滑动效果汇总

    Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...

  5. java操作文件常用的 IO流对象

    1.描述:流是字节数据或字符数据序列.Java采用输入流对象和输出流对象来支持程序对数据的输入和输出.输入流对象提供了数据从源点流向程序的管道,程序可以从输入流对象读取数据:输出流对象提供了数据从程序 ...

  6. c# 常见验证邮箱、电话号码、日期等格式

    #region 验证邮箱验证邮箱 /**//// <summary> /// 验证邮箱 /// </summary> /// <param name="sour ...

  7. Spring8中lambda表达式的学习(Function接口、BiFunction接口、Consumer接口)

    代码重构,为了确保功能的等效性,梳理代码时,发现如下代码: public SingleRespTTO fundI(SingleReqTTO request) throws Exception { re ...

  8. ListItem Updating事件监视有没有上传附件

    using System; using System.Collections.Generic; using System.Text; using Microsoft.SharePoint; using ...

  9. SpringBoot非官方教程 | 第二十二篇: 创建含有多module的springboot工程

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springbot22-modules/ 本文出自方志朋的博客 这篇文 ...

  10. Delphi中CPort控件之Timeout属性

    转载:http://blog.sina.com.cn/s/blog_70146dce0102wep1.html Cport的Timeout属性定义了详细的读写超时设置. 当一个特别操作的超时时间达到了 ...