main.js: 入口文件

import Vue from 'vue'    //引入node_modules中的vue

import App from './App'  //引入当前路径(src)下的App.vue并命名为App, .vue后缀省略

Vue.config.productionTip = false   //关闭浏览器console中, 开发环境转为生成环境提示

new Vue({

  el: '#app',    　　　　　　//作用域是index.html中的<div id="app"></div>

  components: { App },   　//将引入过来的App声明为局部组件App, {App: App}

  template: '<App/>'  　　 //创建template, 用App这个组件替换index.html中的<div id="app"></div>

})

index.html

<body>

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

</body>

App.vue

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <HelloWorld/>  //③模板中使用HelloWorld组件

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld'    //①引入HelloWorld.vue

export default {     //将App.vue暴露出去

  name: 'App',       //name暂时没用

  components: {

    HelloWorld       //②将HelloWorld声明为局部组件 {HelloWorld: Helloworld}

  }

}

</script>

<style>

#app {

}

</style>

1、App.vue通过import将HelloWorld.vue这个模块全部导入

3、HelloWrold.vue通过export default将name\data等接口输出

4、App.vue只能访问HellowWorld.vue中输出的接口

///////////////////////////////测试一

aa.js

app.vue

运行结果

///////////////////////////////测试二

aa.js

App.vue

运行结果

vue-cli：渲染过程理解2（vue init webpack方式创建）的更多相关文章

  1. vue-cli: 渲染过程理解（vue create demo01方式创建）

    1.根目录配置 vue.config.js, 设置入口文件: index.js module.exports = { pages:{ index: { entry: 'src/pages/home/i ...

  2. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  3. vue中keepalive怎么理解？​---vue中文社区

    vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...

  4. 用 vue cli 脚手架搭建单页面 Vue 应用（进阶2）

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  5. 解决vue数据渲染过程中的闪动问题

    关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...

  6. Vue渲染数据理解以及Vue指令

    一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...

  7. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

  8. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  9. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

随机推荐

  1. docker 12 docker容器数据卷

    数据卷概念 ♣我们知道,当我们把一个运行中的容器关闭后,容器里的数据就没有了(如果你做了docker commit操作,数据会保留到新的镜像里面).所以我们就需要用容器数据卷把容器数据进行持久化储存. ...

  2. 【Atcoder hbpc C 183】1=0.999...

    Atcoder hbpc C 题意:给n个循环小数或者有限小数,问其中有多少个互不相同的. 思路:我的思路比较繁琐. 首先我们考虑分数化小数:假设原来的数是\(a.b(c)\),那么这个分数就是\(a ...

  3. HotSpot虚拟机对象探秘(对象创建，对象内存布局，对象访问定位）

    以常用的HotSpot虚拟机和JAVA内存区域堆为例,探讨对象的创建,对象的内存布局以及对象的访问定位 一.对象的创建 1)类加载:虚拟机遇到一条new指令时,先检测这个指令的参数能否在常量池中定位到 ...

  4. 线程安全之CAS机制详解（分析详细，通俗易懂）

    背景介绍:假设现在有一个线程共享的变量c=0,让两个线程分别对c进行c++操作100次,那么我们最后得到的结果是200吗? 1.在线程不安全的方式下:结果可能小于200,比如当前线程A取得c的值为3, ...

  5. odoo 11 配置nginx反向代理

    第一步 安装nginx 和 certbot    具体步骤可以参考这篇文章的第6,7步. 第二步 配置nginx映射到odoo网站的文件,主要有2个,文件中的cloudapp.top是我们自己的域名, ...

  6. JasperReport制作行内容合并的表格

    效果图: 实现思路一: 交叉表 另一个思路: 普通表格 缺点:无法实现内容 垂直居中显示 准备工作 一.数据准备 DROP TABLE IF EXISTS `address_item_sex_valu ...

  7. Maven报错Archive for required library:某.jar' in project '项目名'

    Maven报错Archive for required library:某.jar' in project '项目名'cannot be read or is not a valid ZIP file ...

  8. LCT维护删除时间最晚生成树

    用来做动态图问题. 维护一棵删除时间最晚的生成树,这样好处是加入一条非树边时可以直接判断加还是不加,没有现在不加入而之后再加入的情况.要是我比你先被删,那我就完全没必要加.否则你现在就可以被删除掉.

  9. Python入门-用户登录程序

    _flag = Falsecount = 0users = [['ziv', '123'], ['alex', '12345']]while count < 3: username = inpu ...

  10. hdu3790 dijkstra+堆优化

    题目来源:http://acm.hdu.edu.cn/showproblem.php?pid=3790 分析:dijkstra没有优化的话,复杂度是n*n,优化后的复杂度是m*logm,n是顶点数,m ...