vue-cli脚手架初使用

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个