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. copy from insert using 语句迁移数据

    使用copy实现long类型转移表空间,表空间的数据文件损坏,在转移该表空间相关表时,遇到让人郁闷的long类型.不能使用ctas和move来实现转移,最后通过古老的copy来实现该项工作. 1.模拟 ...

  2. python3 day04 大纲

    上节课内容回顾: 1. 小数据池 存储数据. 共享小数据池 int,str, bool == 和 is区别: == 判断的是两边的值 is 左右两端的内存地址 2. 深浅拷贝 1. = 没有创建新对象 ...

  3. Linux系统学习之Linux账号管理

    一.基本介绍 Linux用户分为三类,即普通用户.根用户.系统用户. 普通用户指的是所有使用Linux系统的真实用户. 根用户就是root用户,权限最大,它的ID为0,也被称为超级用户,root用户拥 ...

  4. [Spark][kafka]kafka 生产者，消费者 互动例子

    [Spark][kafka]kafka 生产者,消费者 互动例子 # pwd/usr/local/kafka_2.11-0.10.0.1/bin 创建topic:# ./kafka-topics.sh ...

  5. asp.net调用前台js调用后台代码分享

    asp.net调用前台js调用后台代码分享 C#前台js调用后台代码前台js<script type="text/javascript" language="jav ...

  6. Web 应用 WEB框架 HTTP协议 初识Django

    ----------------------------财富存在于人的思想里,你没找到路,不等于没有路,你想知道将来要得到什么,你必须知道现在应该先做什么和先放弃什么! [web 应用] web应用 ...

  7. rest_framework之视图及源码剖析

    最初形态(工作中可能会使用) 引子 Django的CBV我们应该都有所了解及使用,大体概括一下就是通过定义类并在类中定义get post put delete等对应于请求方法的方法,当请求来的时候会自 ...

  8. SQL SERVER按多字段查找重复的数据并删除只保留一条

    由于一次操作失误,给表中插入了多条重复的数据,所以就需要删除重复的数据只保留一条,一时想不到好方法,各种查资料,终于找到了,特意写到这里,方便以后自己用~ 查询: select A.n_PatentI ...

  9. github/gitlab同时管理多个ssh key

    之前一直用github,但是github有一个不好的地方,要是创建私有的项目的话需要付费,而gitlab上则可以免费创建管理私有的项目.由于最近想把自己论文的一些东西整理一下,很多东西还是不方便公开, ...

  10. POJ 2406 Power Strings（KMP）

    Description Given two strings a and b we define a*b to be their concatenation. For example, if a = & ...