好家伙，

1.vue的目录结构分析

来看看项目的目录

(粗略的大概的解释)

2.vue项目的运行流程

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

先来看看html文件:

<!DOCTYPE html>

<html lang="">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

    <noscript>

      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

　　//我们要将App.vue中的内容渲染到这里

  </body>

</html>

再看看main.js文件

//导入vue这个包,得到Vue构造函数

import Vue from 'vue'

//导入App.vue根组件,将来把App.vue中的模板结构,渲染到Html页面中

import App from './App.vue'

Vue.config.productionTip = false

//创建Vue的实例对象

new Vue({

  el:'App',

  //把render函数指定的组件,渲染到Html页面中

   render: h => h(App),

  //用render函数指定的结构替换掉el所在的结构

}).$mount('#app')

再来看看App.vue文件

<template>

  <h1>你好帅</h1>

</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. JS：函数

    Function:函数 1. 定义一个函数:function functionname(argument) { 代码块 return }: 调用此函数:fn() 2.函数是定义了一种方法,只有被调用才 ...

  2. UiPath参数介绍和使用

    一.参数介绍 用于将数据从一个项目传递到另一个项目.在全局意义上,它们类似于变量,因为它们动态地存储数据并传递给它.变量在活动之间传递数据,而参数在自动化之间传递数据.因此,它们使你能够一次又一次地重 ...

  3. 你真的会python中的for循环吗

    for 循环是 Python 中的通用序列迭代器:它可以单步遍历任何有序序列中的元素.for 语句适用于字符串.列表.元组.其他内置可迭代对象和类创建的新对象. for 通常比 while 循环更容易 ...

  4. Future源码一观-JUC系列

    背景介绍 在程序中,主线程启动一个子线程进行异步计算,主线程是不阻塞继续执行的,这点看起来是非常自然的,都已经选择启动子线程去异步执行了,主线程如果是阻塞的话,那还不如主线程自己去执行不就好了.那会不 ...

  5. .Net 应用考虑x64生成

    在x86架构下使用32位应用程序,理论上32位能够分配4G的大小空间,但实际上默认 .NET Framework 可以创建一个不超过 2 GB 的对象,在实际使用过程中可能使用到1.5G的样子就会报内 ...

  6. Web开发小妙招：巧用ThreadLocal规避层层传值

    摘要:我们可以在处理每次请求的过程中,无需从Controller以及Service中的方法层层传值,只需要直接通过该局部变量取值即可. 本文分享自华为云社区<拦截器中巧用ThreadLocal规 ...

  7. 深入剖析（JDK）ArrayQueue源码

    深入剖析(JDK)ArrayQueue源码 前言 在本篇文章当中主要给大家介绍一个比较简单的JDK为我们提供的容器ArrayQueue,这个容器主要是用数组实现的一个单向队列,整体的结构相对其他容器来 ...

  8. 21条最佳实践，全面保障 GitHub 使用安全

    GitHub 是开发人员工作流程中不可或缺的一部分.无论你去哪个企业或开发团队,GitHub 都以某种形式存在.它被超过8300万开发人员,400万个组织和托管超过2亿个存储库使用.GitHub 是世 ...

  9. Techempower web框架性能测试第21轮结果发布--asp.net core继续前进

    废话不说,直接上结果: Round 21 results - TechEmpower Framework Benchmarks Techempower benchmark是包含范围最广泛的web框架性 ...

  10. 【一本通提高树链剖分】「ZJOI2008」树的统计

    [ZJOI2008]树的统计 题目描述 一棵树上有 n n n 个节点,编号分别为 1 1 1 到 n n n,每个节点都有一个权值 w w w. 我们将以下面的形式来要求你对这棵树完成一些操作: I ...