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. nginx之七：nginx path（root）文件路径配置

    nginx指定文件路径有两种方式root和alias,这两者的用法区别,使用方法总结了如下,方便大家在应用过程中,快速响应.root和alias主要区别在于如何解释location后面的uri,这会使 ...

  2. 箱线图boxplot

    箱线图boxplot--展示数据的分布 图表作用: 1.反映一组数据的分布特征,如:分布是否对称,是否存在离群点 2.对多组数据的分布特征进行比较 3.如果只有一个定量变量,很少用箱线图去看数据的分布 ...

  3. mysql 数据库磁盘占用量统计

    查看某个表的磁盘占用量 select (data_length+index_length)/1024/1024 M from information_schema.tables where table ...

  4. Redis学习之SDS源码分析

    一.SDS的简单介绍 SDS:简单动态字符串(simple dynamic string) 1)SDS是Redis默认的字符表示,比如包含字符串值的键值对都是在底层由SDS实现的 2)SDS用来保存数 ...

  5. Scala学习(八)练习

    Scala中继承&练习 1. 扩展如下的BankAccount类,新类CheckingAccount对每次存款和取款都收取1美元的手续费 class BankAccount ( initial ...

  6. js 对象与数组相互转化的快捷方法 Object.keys()、Object.values()、Object.entries()

    Object.keys() Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性.这些属性的顺序与手动遍历该对象属性时的一致. 例如: let ...

  7. Linux运维必会的MySQL企业面试题大全

    (1)基础笔试命令考察 1.开启MySQL服务 /etc/init.d/mysqld start service mysqld start systemctl start mysqld 2.检测端口是 ...

  8. iOS开发简记（5）：设备唯一标识与全局变量

    这里记录两个iOS开发中经常用到的知识点,一个是唯一标识,一个是全局变量. (1)唯一标识 唯一标识一台设备(比如iPhone.iPad等)是一个基本的实现与业务上的需求,因为这个唯一标识在许多场景都 ...

  9. C#里面滥用String造成的性能问题

    前两天给我们的json写一个解析函数, 之前用的正宗的json parser, 支持完整的json特性. 但是实际上我们用到特性, 只有key-value的映射, value的类型只有数字和字符串两种 ...

  10. linux下的shell脚本（基本）

    shell有些命令和格式不用老是容易忘,学而时习之,不亦说乎~ 先说明以下内容来自: http://c.biancheng.net/cpp/shell/ ,C语言中文网,请大家支持原作,点击链接查看. ...