vue-cli: 渲染过程理解(vue create demo01方式创建)
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方式创建)的更多相关文章
- vue-cli:渲染过程理解2(vue init webpack方式创建)
main.js: 入口文件 import Vue from 'vue' //引入node_modules中的vue import App from './App' //引入当前路径(src)下的App ...
- 二、Vue 页面渲染过程
前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...
- ubuntu下安装vue/cli提示No command 'vue' found
通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...
- 前端——Vue CLI 3.x搭建Vue项目
一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...
- 解决vue数据渲染过程中的闪动问题
关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...
- Vue CLI 是如何实现的 -- 终端命令行工具篇
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- 利用vue-cli3快速搭建vue项目详细过程
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
随机推荐
- pytorch .detach() .detach_() 和 .data用于切断反向传播
参考:https://pytorch-cn.readthedocs.io/zh/latest/package_references/torch-autograd/#detachsource 当我们再训 ...
- # 20175329 2018-2019-2 《Java程序设计》第一周学习总结
教材学习内容总结 ·通过教材学习了如何安装JAVA ·在安装JAVA后对其环境变量的设置 ·第一次接触并手打出JAVA语言## 教材学习中的问题和解决过程- 问题1:在环境变量设置中不懂path cl ...
- 【php增删改查实例】第二十五节 - 在main.php中显示头像
在用户成功上传头像以后,用户登录系统,应该能够看到自己的头像,本节演示如何在这个地方: 添加用户头像. 1.用DIV做: border-radius:50% background:url(xxx.jp ...
- 漫画 | Redis常见面试问题(一)
最近,阿音在为接下来的一场面试做准备,其中的内容包括redis,而且redis是重点内容. Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数 ...
- SQL 显示表名显示列名
显示表名:show 表名: 显示列(Field)名:show columns from 表名:
- Let's-Bug修复日志
Version 1.1 2015/11/16 修复了上传图片画质问题的Bug 修复了搜索功能的部分Bug 增加了下拉刷新的功能 修复了部分界面跳转之间的问题
- 同步和异步概念(由DZW前端框架引发的百度地图api无法加载问题总结)
首先概念: 在计算机领域,同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去:异步是指进程不需要一直等下去,而是继续 ...
- 替换iframe的内容
一般就是点个按钮然后在不跳转页面的情况下显示另外一个页面的内容,显示的速度比较快,ifream还算是常用的吧 用的时候实现方式有以下几种, 1.替换src路径(觉得麻烦,没接触过,就不这样干了) 2. ...
- socket流程
- 多线程系列之十:Future模式
一,Future模式 假设有一个方法需要花费很长的时间才能获取运行结果.那么,与其一直等待结果,不如先拿一张 提货单.获取提货单并不耗费时间.这里提货单就称为Future角色获取Future角色的线程 ...