vue-cli:渲染过程理解2(vue init webpack方式创建)
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方式创建)的更多相关文章
- vue-cli: 渲染过程理解(vue create demo01方式创建)
1.根目录配置 vue.config.js, 设置入口文件: index.js module.exports = { pages:{ index: { entry: 'src/pages/home/i ...
- 二、Vue 页面渲染过程
前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...
- vue中keepalive怎么理解?---vue中文社区
vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- 解决vue数据渲染过程中的闪动问题
关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...
- Vue渲染数据理解以及Vue指令
一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...
- Vue CLI 是如何实现的 -- 终端命令行工具篇
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
随机推荐
- 当你想要在conda指定的某个环境中安装包的方法
1)使用conda install -n 环境名 包名 userdeMBP:pytorch user$ conda install -n deeplearning2 tensorflow 2)进入环境 ...
- keras神经网络三个例子
keras构造神经网络,非常之方便!以后就它了.本文给出了三个例子,都是普通的神经网络 例一.离散输出,单标签.多分类 例二.图像识别,单标签.多分类.没有用到卷积神经网络(CNN) 例三.时序预测, ...
- ML.NET 示例:推荐之矩阵分解
写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...
- [UWP]如何使用代码创建DataTemplate(或者ControlTemplate)
1. 前言 在UWP中DataTemplate是一个十分重要的功能,并且几乎无处不在,例如DataGrid中的DataGridTemplateColumn: <controls:DataGrid ...
- .NetCore 2.1中的HttpClientFactory最佳实践
.NET Core 2.1中的HttpClientFactory最佳实践 ASP.NET Core 2.1中出现一个新的HttpClientFactory功能, 它有助于解决开发人员在使用HttpCl ...
- Django 多表查询练习题 Q查询 F查询 聚合 分组
-------------------------------------------------自己偷的懒,或许用加倍时间也补不回来,珍惜现在的拥有的时光,把我现在! 上节回顾 基于对象的跨表查询( ...
- PS打造油画般的风景人像
- MyBatis使用注解开发
- CI框架在模型中切换读写库和读写库
如果你想在控制器中切换在application/config/database.php中配置好的数据库group,那么你可以参考这篇博客:CI框架在控制器中切换读写库和读写库 如果你是希望在模型中切换 ...
- js处理ajax返回的json数组
一.json对象和json数组的区别 jsonObject = {} # json对象 jsonArray=[{},{}] # json数组 二.数据处理 前台接收到后台传过来的json数组实际上是一 ...