好家伙，

1.vue的目录结构分析

来看看项目的目录

(粗略的大概的解释)

2.vue项目的运行流程

在工程化项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html的指定区域中,

先来看看html文件:

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8.     <title><%= htmlWebpackPlugin.options.title %></title>
  9.   </head>
  10.   <body>
  11.     <noscript>
  12.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  13.     </noscript>
  14.     <div id="app"></div>
  15.     <!-- built files will be auto injected -->
  16. 　　//我们要将App.vue中的内容渲染到这里
  17.   </body>
  18. </html>

再看看main.js文件

  1. //导入vue这个包,得到Vue构造函数
  2. import Vue from 'vue'
  3.  
  4. //导入App.vue根组件,将来把App.vue中的模板结构,渲染到Html页面中
  5. import App from './App.vue'
  6.  
  7. Vue.config.productionTip = false
  8.  
  9. //创建Vue的实例对象
  10. new Vue({
  11.  
  12.   el:'App',
  13.  
  14.   //把render函数指定的组件,渲染到Html页面中
  15.    render: h => h(App),
  16.  
  17.   //用render函数指定的结构替换掉el所在的结构
  18.  
  19. }).$mount('#app')

再来看看App.vue文件

  1. <template>
  2.   <h1>你好帅</h1>
  3. </template>

main.js把App.vue中的内容替换掉index.html的<div id="app"></div>中,

项目跑起来效果如下:

没毛病,

第六十九篇：vue项目的运行过程的更多相关文章

  1. C++第四十九篇 -- 将一个项目Copy到另一台电脑

    最近写项目,由于设备原因,需要将一台电脑的项目拷贝到另一台电脑上,在另一个电脑上继续编写.由于配置属性原因,最终还是在另一台电脑上创建了新项目,只是把这些cpp文件都复制过去了,然后重新部署属性. 背 ...

  2. 通过调试vue-cli 构建代码学习vue项目构建运行过程

    我们知道vue-cli 3.0之前直接基于webpack创建对应配置文件,我们通过学习webpack就能够了解其构建过程,然而从vue-cli 3.0开始,vue-cli命令行更改为@vue/cli以 ...

  3. 第六十九篇、OC_录制语音和播放语音功能的实现

    录制: 1.设置全局属性 NSURL *recordedFile;//存放路径 AVAudioPlayer *player;//播放 AVAudioRecorder *recorder;//录制 NS ...

  4. Python之路【第十九篇】：爬虫

    Python之路[第十九篇]:爬虫   网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用 ...

  5. 第三百六十九节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能

    第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能 Django实现搜索功能 1.在Django配置搜索结果页的路由映 ...

  6. “全栈2019”Java第六十九章：内部类访问外部类成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. Egret入门学习日记 --- 第十九篇（书中 8.8~8.10 节 内容）

    第十九篇(书中 8.8~8.10 节 内容) 开始 8.8节. 重点: 1.类型推断. 2.类型强制转换,使其拥有代码提示功能. 3.除了TS自带的类型判断,Egret官方也提供了类型判断的方法. 操 ...

  8. idea中导入别人的vue项目并运行

    1. 下载node.js 在搭建vue的开发环境之前,先下载node.js,下载地址:https://nodejs.org/en/ https://blog.csdn.net/antma/articl ...

  9. 《手把手教你》系列技巧篇（六十九）-java+ selenium自动化测试 - 读取csv文件（详细教程）

    1.简介 在实际测试中,我们不仅需要读取Excle,而且有时候还需要读取CSV类的文件.如何去读取CSV的文件,宏哥今天就讲解和分享一下,希望对你能够有所帮助.前面介绍了如何读取excel文件,本篇介 ...

随机推荐

  1. SpringBoot之:SpringBoot的HATEOAS基础

    目录 简介 链接Links URI templates Link relations Representation models 总结 简介 SpringBoot提供了HATEOAS的便捷使用方式,前 ...

  2. JS：Boolean

    Boolean数据类型: 有两个值:true false Boolean会把不是Boolean的值变为Boolean值 var a = 1; var b = true; var c = 0; var ...

  3. 教你如何用网页开发APP

    用到的工具: HBuilderX app开发版1.首先你得网站必须是上线的,然后明确这一点后,点击打开HBuilderX.在文件里找到新建项目,选择wap2App,将下面信息填写完整,然后创建. 2. ...

  4. Linux shell脚本基础

    程序的组成: 程序:算法+数据结构 数据:程序处理的目标 数据结构:相互之间存在一种或多种特定关系的数据元素的集合 算法:处理数据的方式 编程风格: 面向对象:把所有的操作都转化为对象的方式. 面向过 ...

  5. python报错合集

    哈喽,大家好呀 我又来啦,今天让我们来看看python中有哪些常见的异常报错吧 说到python中的报错,我们总是脑壳疼现在我们要学会去认识报错的类型 这样子,在我们出现报错的时候就可以知道报错的原因 ...

  6. sqlserver 把c#代码的string[] 的ids转换成一个数据table表

    declare @string varchar(200),@sql varchar(1000)set @string = '1,2,3,4,5,6'set @sql = 'select code='' ...

  7. Tapdata 实时数据中台在智慧教育中的实践

      摘要:随着教育信息化的推进,智慧校园建设兴起,但在实施过程中面临数据孤岛.应用繁多.数据再利用等方面挑战,而 Tapdata 的实时数据中台解决方案,能够高效地解决智慧校园实施中的基础数据问题. ...

  8. 【cartographer_ros】五： 发布和订阅陀螺仪Imu信息

    上一节介绍了里程计Odometry传感数据的订阅和发布. 本节会介绍陀螺仪Imu数据的发布和订阅.陀螺仪在cartographer中主要用于前端位置预估和后端优化. 目录 1:sensor_msgs/ ...

  9. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  10. idea 错误: 找不到或无法加载主类 xx.xxx.Application

    原因module 里面缺少iml文件 生成iml文件方法二:(建议):刷新一下Maven Project就会自动生成.iml文件.点击下图红框标记的按钮即可 完成后就会自动生成.iml文件. 方法二: ...