Vue基础说明2

1.单页面应用程序

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名
思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能
与交互都在这唯一的一个页面内完成。

2. 什么是 vue-cli

vue-cli 是 Vue.js 开发的标准工具。 它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

1. 在终端下运行如下的命令，创建指定名称的项目：

		npm install -g @vue/cli  // vue -V  可查看
		
		vue create 项目的名称   //基于 vue-cli 快速生成工程化的 Vue 项目：

2. vue 项目中 src 目录的构成：

• assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
• components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
• main.js 是项目的入口文件。整个项目的运行要先执行 main.js ,就是打包的入口文件
• App.vue 是项目的根组件。

4.vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

Vue 实例的 $mount() 方法，作用和 el 属性完全一样！
index.html中的<div id="app"></div> 起占位作用，会被替换掉

5.vue 组件

1. 什么是组件化开发
   组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。
   2 .vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。
   用对象 会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：
   https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数

6.组件的 props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！
props 是只读的 default 默认值 type 值类型 required 必填项

export default {
  // props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值
  // 自定义属性的名字，是封装者自定义的（只要名称合法即可）
  // props 中的数据，可以直接在模板结构中被使用
  // 注意：props 是只读的，不要直接修改 props 的值，否则终端会报错！
  // props: ['init'],
  props: {
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },
}

7.组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是：
① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素
解决：
为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题，
如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。
当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/样式穿透

8. vue-template-compiler

"devDependencies": {
    "vue-template-compiler": "^2.6.11"
  }