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. Linux之RTOS学习

    Linux之RTOS学习 RTOS: Real time operating system 系统选型 可选方案 RTLinux - FSMLabs, WindRiver Systems - http: ...

  2. pytorch visdom可视化工具学习—1—详细使用-1—基本使用函数

    使用教程,参考: https://github.com/facebookresearch/visdom https://www.pytorchtutorial.com/using-visdom-for ...

  3. truffle框架的简单使用

    truffle 给大家介绍一下这个框架怎么使用,其实把这个框架就是你们看我之前有一个教程是教你们怎么用remix-ide来连接私有链,编译,配置合约,然后进行调用的,truffle其实就是把这个步骤放 ...

  4. i春秋-百度杯十月场-EXEC

    进入网站,查看源代码,发现是用vim编辑,而抓包没有有效信息,加参数也无果.百度查了一下vim能形成什么文件.找到答案说,用vim编辑文本xxx.php中途退出,会自动创建一个文件.xxx.php.s ...

  5. 建一个网站python

    域名()+  服务器+ 源码 制作一个自己的网站.................

  6. IntelliJ IDEA（一） ：安装与破解

    前言 我是从eclipse转IDEA的,对于习惯了eclipse快捷键的我来说,转IDEA开始很不习惯,IDEA快捷键多,组合多,记不住,虽然可以设置使用eclipse的快捷键,但是总感觉怪怪的.开始 ...

  7. FineUIMvc新特性速递（大间距模式，隐藏菜单垂直滚动条）

    即将发布的 FineUIMvc 新版本会引入两个重要的特性,用来提升用户体验,现在就来先睹为快吧: 大间距模式 我们已经支持的显示模式有:紧凑模式,普通模式,大字体模式. 紧凑模式: 普通模式: 大字 ...

  8. 基于HTTP可供浏览器调用的本地打印程序

    之前给公司做打印都是用ActiveX控件,只支持IE浏览器,最近需要支持谷歌,又不想去学谷歌插件编写,于是就用本地启动一个http服务器来供浏览器调用(写成windows服务更好),同事用了都说好(笑 ...

  9. 通过 Systemd Journal 收集日志

    随着 systemd 成了主流的 init 系统,systemd 的功能也在不断的增加,比如对系统日志的管理.Systemd 设计的日志系统好处多多,这里笔者就不再赘述了,本文笔者主要介绍 syste ...

  10. OSS网页上传和断点续传（STSToken篇）

    云账号AccessKey拥有所有API访问权限,在客户端不要直接使用,会泄露ak信息,造成安全问题.所以使用STS方式(临时账号权限)给客户端授权. C#版获取STSToken 一.下载阿里SDK(a ...