VUE项目中main.js、App.vue、import...from...等重要文件的作用和意义_weixin_30918415的博客-程序员宅基地

技术标签: ViewUI  webpack  javascript  

一、main.js

   1、 main.js 程序入口文件,初始化vue实例,并引入使用需要的插件和各种公共组件.

import Vue from 'vue'
import App from './App'
import router from './router'
import Less from 'Less'
Vue.config.productionTip = false

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

  new Vue代表新建vue对象

    el官方解释:为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。

    components:代表组件。这里的App,实际是App:App的省略写法,template里使用的 <App/>标签来自组件App。

    template:代表模板。官方解释:模板将会替换挂载的元素。挂载元素的内容都将被忽略。

 也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>

      例:

  我们把main中components这行注释掉:

     

    再看页面:发现里面就有一个<app></app>标签。

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30918415/article/details/101076043

智能推荐

正则表达式30分钟入门教程【转载】-程序员宅基地

正则表达式30分钟入门教程本文目标30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它。如何使用本教程最重要的是——请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内入门——除非你是超人 :)别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有想像中的那么困难。当然,如果

linux manpage(2) System Calls -程序员宅基地

System Calls Intro(2)NAME Intro, intro - introduction to system calls and error numbersSYNOPSIS #include DESCRIPTION

[NOI2015]软件包管理器_现在你拥有所有软件包之间的依赖关系。特别的是,除了0号软件包,所有的软件包有有-程序员宅基地

题目描述Linux用户和OSX用户一定对软件包管理器不会陌生。通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个软件包的安装所依赖的其它软件包),完成所有的配置。Debian/Ubuntu使用的apt-get,Fedora/CentOS使用的yum,以及OSX下可用的homebrew都是优秀的软件包管理器。你..._现在你拥有所有软件包之间的依赖关系。特别的是,除了0号软件包,所有的软件包有有

WindowManagerService的理解-程序员宅基地

Android中的窗口概念:屏幕上一块用于绘制各种UI元素并可以响应用户输入的一块矩形区域。从原理上来看,窗口的概念是独自占有一个Surface实例的显示区域。如Dialog、Activity的界面、壁纸、状态栏以及Toast等都是窗口。 上述对窗口的概念性描述,提取出来主要有以下几点信息:用于绘制UI元素响应用户输入独自占有一个surface实例Surface是一块画布,应用通过canvas或者...

在3dmax中的动画关键帧消失的问题。-程序员宅基地

1、不是用biped直接建骨骼时,当我们没有全选所有物体时是不显示关键帧的。2、用biped直接建骨骼时,需要选中biped骨骼才会显示关键帧。转载于:https://www.cnblogs.com/ZeroMurder/p/5240591.html..._3dmax关键帧标尺不见了

模拟log4j获取日志对象调用所在的类名、方法名及行号-程序员宅基地

http://www.cnblogs.com/pangblog/p/3397899.html当我们在记录日志时,每个类中会定义一个日志对象,然后利用这个对象去写日志,那么我们在处理日志时,如何能才能记录日志对象所在的类、方法和行号呢?log4j中已经实现了该功能,那么它是怎么实现的呢? 其实我们可以这样,在要写日志的代码时获得当前的线程信息,这样我们就可以获得上个线程

随便推点

oracle 启动em失败-程序员宅基地

Q: [oracle@localhost ~]$ lsnrctl startLSNRCTL for Linux: Version 11.2.0.1.0 - Production on 04-OCT-2017 22:43:47Copyright (c) 1991, 2009, Oracle. All rights reserved.Starting /u0_oracle 启动em失败

块UI样式编辑器下实现NX的功能-程序员宅基地

进入块UI样式编辑器做出如下界面:在Create_Block::apply_cb()函数中添加的代码: { //---- Enter your callback code here ----- UF_initialize(); //布尔运算 UF_FEATURE_SIGN sign01=UF_NULLSI..._nx表ui块

深度linux触摸板失灵,解决笔记本安装deepin OS触摸板、WIFI无法使用问题-程序员宅基地

这两天折腾了一下deepin,界面做得真得很漂亮。但是刚开始有些功能不能用还是有点茫然的,比如WiFi,触摸板都不能用。WIFI不能用其实是默认给硬件(EC)禁用了,需要按一下笔记本上方的功能建,我的是F7,关闭飞行模式就可以。至于触摸板,就是驱动问题了,需要更新内核,我的直接更新到4.19。具体步骤如下:1、访问http://kernel.ubuntu.com/~kernel-ppa/mainl..._deepin不能使用触摸板

pytorch1.0.1_将Spring 3.x和Hibernate 3.x升级到Spring Platform 1.0.1(Spring + hibernate 4.x)-程序员宅基地

pytorch1.0.1 最近,我自愿将我们的最新项目升级到最新版本的Spring Platform。 Spring Platform为您提供的是整个Spring框架库集中的依赖项和插件管理。 由于我们落后了一点,升级确实增加了一些乐趣。 这是我遇到的事情:Maven: 我们的pom文件仍在引用:hibernate.jarehcache.jar 这些伪像不会在最新版本上退出,因此请使用h..._pom引入org.hibernate.classic

ElasticSearch的使用_elasticsearch使用_java 分享官的博客-程序员宅基地

本文主要介绍 ElasticSearch的使用如有需要,可以参考如有帮助,不忘 点赞 ❥收藏+关注哦ELK是一个免费开源的日志分析架构技术栈总称,其中包含三大基础组件,分别是 ElasticSearch、Logstash、Kibana。ELK在实际开发中不仅仅使用于日志分析,它还可以支持其他任何数据搜索、分析和收集的场景,其中日志分析和收集更具有代表性。既然 ELK 这么有用,那这篇我们就先来认识一下什么是 ElasticSearch吧!简介简单来说 ElasticSearch ._elasticsearch使用

OSChina 周二乱弹 —— 你一辈子都不可能跟她这么亲近-程序员宅基地

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享George Benson的单曲《Six Play》: 《Six Play》- George Benson 手机党少年们想听歌,请使劲儿戳(这里) 周一上班总是匆忙, 早餐都..._你永远不可能和她这么亲近