1. vue.config.js配置
module.exports = {
lintOnSave: false,
devServer: {
open: true,
port: 8080
}
}
2. 创建单文件组件 .vue
<template>
<div id="father">
<p>大盒子</p>
<Son></Son>
</div>
</template>
<script>
import Son from './04-son'
export default {
components: {
'Son': Son
}
}
</script>
<style scoped lang="less">
#father {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 500px;
height: 500px;
border: 2px solid purple;
}
</style>
3. vue里this指向
- Vue实例内部指向new Vue()。
- 组件内部的this指向组件实例,同时该VueComponent有继承Vue,因此组件内部使用this与Vue实例的用法完全一致,即组件内部this可以正常访问Vue组件实例的data、methods、computed等成员。
4. render的使用方法
new Vue({
render:h=>h('p','ok') // 要生成 <p>ok</p> 并覆盖渲染 div容器
render:h=>h(组件模块) // 要使用一个组件模块 对 div容器 进行覆盖渲染
})
- 真实项目中一般喜欢创建一个名称为App.vue的组件,并用它去渲染覆盖 div容器。所有业务逻辑实现都从App.vue开始,div容器就是一个空壳摆设。
- 通过render对App.vue组件覆盖渲染应用,所有业务通过App.vue展开:
- 在main.js文件中,要使用默认的vue import Vue from 'vue’
- 所有业务组件都通过App.vue文件做应用( 组件的引入、注册、使用)
5. SPA
概念:
-
SPA英文全称是Single Page Application, 中文翻译是 “单页面应用程序项目”。
通俗的理解是:
- 一个网站只有一个Web页面;
- 网站的所有功能都在这个唯一的页面上进行展示与使用
-
好处:
- 实现了前后端分离模式(目前最好的开发模式)开发,各司其职;提高了开发效率;
- 用户体验好,页面部分内容发生变化只需要更新局部即可(非刷新整个页面);
-
缺点:
- 对SEO(搜索引擎)不是很友好,网站从开始到结束始终访问一个程序文件,造成搜索引擎不给检索, 但是有解决方案。同时后台系统应用本身对seo不做要求。
- 每次应用运行时,需要一次性把全部的html、js、css等内容加载进来,因此会造成页面一开始请求速度较慢的问题(首页较慢,后续页面正常)。
-
应用场合:
- 后台管理系统 和 移动端项目,它们特点是供访问的页面总数量小于500个