当前位置: 首页 > news >正文

vue项目首页形成原理

  vue项目启动后(npm run dev),首先会执行index.html,然后会去执行main.js这两个重要文件。下面以搭建脚手架vue项目为例进行讲解

  首先index.html页面如下

  

  这是项目的入口文件,也是整个项目的容器,所有页面开发都是挂载在<div id="app"></div>这个容器里,id=app是标志

  main.js页面如下

  

  首先导入Vue,来实例化一个Vue对象,导入组件import App from './App',取名App,相对路径是./App。

  el:就是挂载index页面的id

  components:导入组件需要注册

  template:通过<App/>这个标签引入App这个组件,这样就把App组件挂载index页面id=app容器里

  App组件如下

  

  template下面只能有一个根标签,然后又在App组件引入HelloWorld组件

  下面看一下vue项目首页的dom

 

  所有的组件挂载在id=app容器里

转载于:https://www.cnblogs.com/superCwen/p/10073364.html

相关文章:

  • ArcGIS Server(详细介绍)转
  • linux 修改MTU值
  • 游园作文
  • [WebMethod] 是什么意思?
  • HP 打印机监控
  • WF与WCF集成
  • Asp.Net Core 下 Newtonsoft.Json 转换字符串 null 替换成string.Empty
  • 用hexo在本地搭建自己的博客
  • Issue/bug track system选型和使用
  • SSRS----关于图表参考线(平均线)的添加
  • 解读设计模式----装饰模式(Decorator Pattern)
  • C语言博客作业04--数组
  • Frame-Relay的配置
  • [Xcode 实际操作]九、实用进阶-(13)调用相机并获取拍摄后的图片
  • Django学习笔记5
  • 【跃迁之路】【477天】刻意练习系列236(2018.05.28)
  • Android系统模拟器绘制实现概述
  • JavaScript函数式编程(一)
  • leetcode46 Permutation 排列组合
  • Linux中的硬链接与软链接
  • Mybatis初体验
  • mysql innodb 索引使用指南
  • Mysql5.6主从复制
  • PhantomJS 安装
  • React+TypeScript入门
  • scrapy学习之路4(itemloder的使用)
  • vue2.0项目引入element-ui
  • 高度不固定时垂直居中
  • 给自己的博客网站加上酷炫的初音未来音乐游戏?
  • 猴子数据域名防封接口降低小说被封的风险
  • 面试题:给你个id,去拿到name,多叉树遍历
  • 数据库巡检项
  • # 数论-逆元
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (8)Linux使用C语言读取proc/stat等cpu使用数据
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (ZT)北大教授朱青生给学生的一封信:大学,更是一个科学的保证
  • (安卓)跳转应用市场APP详情页的方式
  • (附源码)springboot高校宿舍交电费系统 毕业设计031552
  • (附源码)小程序儿童艺术培训机构教育管理小程序 毕业设计 201740
  • (原創) X61用戶,小心你的上蓋!! (NB) (ThinkPad) (X61)
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • (转载)OpenStack Hacker养成指南
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .NET gRPC 和RESTful简单对比
  • .Net 垃圾回收机制原理(二)
  • .net 使用$.ajax实现从前台调用后台方法(包含静态方法和非静态方法调用)
  • .Net6使用WebSocket与前端进行通信
  • @JSONField或@JsonProperty注解使用
  • @ModelAttribute注解使用
  • @ResponseBody
  • @transactional 方法执行完再commit_当@Transactional遇到@CacheEvict,你的代码是不是有bug!...
  • [ 英语 ] 马斯克抱水槽“入主”推特总部中那句 Let that sink in 到底是什么梗?
  • [.NET]桃源网络硬盘 v7.4
  • [100天算法】-二叉树剪枝(day 48)