1、根目录配置 vue.config.js, 设置入口文件: index.js

module.exports = {
pages:{
index: {
entry: 'src/pages/home/index.js', //index.js为入口文件
template: 'public/index.html', //html页面文件
title: 'Home Page',
}
}
}

2、index.js

import Vue from 'vue'        //直接引入vue
import App from './App.vue' //引入APP.vue, template文件 Vue.config.productionTip = false //阻止vue在启动时控制台生成生产提示 new Vue({ //实例化Vue
render: h => h(App), //将template(APP)代码写入到 html页面文件(vue的作用域中:'#app')
}).$mount('#app') //vue的作用域'#app' //上面的代码相当于
new Vue({
  el: '#app',
  components:{HelloWorld}
})
//实例化了Vue, 确定vue的作用域'#app', 并且将template文件写入到'#app'作用域中, vue可解析template代码, 并注册了一个组件:Helloworld

3、APP.vue

<template>
<div id="app">
<img alt="Vue logo" src="./../../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> //组件: HelloWord, 通过msg父子传值
</div>
</template> <script>
import HelloWorld from './../../components/HelloWorld.vue' //引用组件: HelloWord, 因为index.js中仅注册了组件名称, 还需要引入组件内容 export default { //export default, 向外暴露一个对象
name: 'app',    //给组件起的名字, 暂时未用到
components: { //将局部组件components也暴露给index.js
HelloWorld
}
}
</script>

vue-cli: 渲染过程理解(vue create demo01方式创建)的更多相关文章

  1. vue-cli:渲染过程理解2(vue init webpack方式创建)

    main.js: 入口文件 import Vue from 'vue' //引入node_modules中的vue import App from './App' //引入当前路径(src)下的App ...

  2. 二、Vue 页面渲染过程

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

  3. ubuntu下安装vue/cli提示No command 'vue' found

    通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...

  4. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

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

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

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

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

  7. vue cli 3

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

  8. 利用vue-cli3快速搭建vue项目详细过程

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  9. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

随机推荐

  1. (三)JavaScript 语法

    字符串(String)字面量 可以使用单引号或双引号: "John Doe" 'John Doe' 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, ...

  2. 修改tomcat JVM 大小

    参考:https://blog.csdn.net/mynamepg/article/details/80591348 1.Xms表示初始分配给jvm的内存大小,-Xmx表示最大可分配给jvm的内存大小 ...

  3. Linux进程管理 (篇外)内核线程简要介绍

    关键词:kthread.irq.ksoftirqd.kworker.workqueues 在使用ps查看线程的时候,会有不少[...]名称的线程,这些有别于其它线程,都是内核线程. 其中多数内核线程从 ...

  4. ESP8266开发综合篇第一节(LUA)-下载和刷固件

    本节视频:  https://v.youku.com/v_show/id_XNDAwMTI2OTg2MA==.html?spm=a2h3j.8428770.3416059.1 一,整版测试 刷入测试固 ...

  5. java redis 分页查询数据

    package com.liying.tiger.test; import java.util.List; import org.springframework.context.Application ...

  6. 从一个例子入门Mysql储存过程

    例子 -- 秒杀执行存储过程 DELIMITER $$ -- 将分隔符; 转换为 $$ -- 定义存储过程 -- 参数: in 输入参数; out 输出参数 -- row_count():返回上一条修 ...

  7. 朱晔的互联网架构实践心得S1E3:相辅相成的存储五件套

    朱晔的互联网架构实践心得S1E3:相辅相成的存储五件套 [下载本文PDF进行阅读] 这里所说的五件套是指关系型数据库.索引型数据库.时序型数据库.文档型数据库和缓存型数据库. 上图显示了一套读写服务搭 ...

  8. P2P平台介绍

    https://www.ludou.org/tutengdai.html https://www.tutengdai.com/register?invite_code=9991300

  9. python之间的基础

    编程第一步 print('hello,world!') 变量名的命名的规则: 1:变量由字母,数字,下划线组成 2:变量不能以数字开头 3:禁止使用python中的关键字,如 'alse', 'Non ...

  10. OO博客作业4:第13-14周作业总结

    一.论述测试与正确性论证的效果差异,比较其优缺点 测试是设计若干组测试用例,运行程序并检验其是否完成预期功能.测试是一种直接发现BUG的方法,可以准确断定什么样的BUG会发生,并通过辅助调试进一步确定 ...