开始学习Vue2（脚手架，组件化开发）

一、单页面应用程序

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

二、vue-cli?脚手架

什么是脚手架

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

引用自 vue?-cli?官网上的一句话：程序员可以专注在撰写应用上，而不必花好几天去纠webpack?配置的问题

?安装和使用

1、脚手架基于?node?下才可安装

node?-v???检测?node?版本（安装成功，?自带?npm?工具）

npm??install ??-g cnpm

-?-registry=https://registry.npm.taobao.org

注意：npm?安装失败建议先用?npm?安装一下?cnpm?用淘宝镜像安装

2、安装脚手架

vue?-cli2.x

np?m?i vue?-cli?-g

vue?-cli3.x

npm?install?-g?@vue/cli

注： 两个版本不能同时存在

卸载：

np?m un?vue?-cli?或?@vue/cli

验证：vue?-cli?安装成功 vue???-V

3、利用?vue?-cli?搭建项目

Vue??in?it???模板名称 项目名称（1.x ???2.x）

Vue??create??项目名称 ?（3.x??4.x）

4、启动开发环境 ???Npm????serve

vue?项目的运行流程

在工程化的项目中，vue?要做的事情很单纯：通过 main.js把 App.vue?渲染到 index.html?的指定区域中。

其中：

①?App.vue?用来编写待渲染的模板结构

② index.html?中需要预留一个 el?区域

③ main.js?把 App.vue?渲染到了 index.html?所预留的区域中

三、组件化开发

> 什么是组件化

组件化开发指的是：根据封装的思想，把页面上可重用的 UI

结构封装为组件，从而方便项目的开发和维护。

vue?是一个支持组件化开发的前端框架。

vue?中规定：组件的后缀名是 .vue。之前接触到的

App.vue?文件本质上就是一个 vue?的组件

使用组件

.?组件开发三步曲：声明、注册、使用（不搭脚手架）

组件的使用事项：

1.组件必须要有一个根元素

2.当组件在使用中，标签中不需要嵌套东西可以使用单标签

3.在组件复用的时候，就使用双标签

组件开发三步曲：声明、注册、使用

①?vue?组件的三个组成部分：（搭脚手架）

每个 .vue?组件都由 3?部分构成，分别是：

template?->?组件的模板结构

script?->?组件的 JavaScript?行为

style?->?组件的样式

其中，每个组件中必须包含 template?模板结构，而 script行为和 style?样式是可选的组成部分。

②?vue?组件的使用

声明组件、注册组件、使用组件

③?通过?components?注册的是私有组件

通过?components?注册的是私有子组件

④?全局组件

在vue项目的main.js入口文件中，通过vue.component()方法，可以注册全局组件

组件中的?props

①?什么是?props

props是组件的自定义属性，在封装通用组件的时候，合理地使用props可以极大的提高组件的复用性!

②?prop?是只读属性

要想修改props的值，可以把props的值转存到data中，因为data中的数据都是可遗可写的!

③?prop?的默认值?default

在声明自定义属性时，可以通过defau性来定义属性的默认值。

④?prop?的?type?值类型

在声明自定义属性时，可以通过1ype来定义属性的值类型

Required?的意思时谁用我这个组件就必须要传递?init?的值，如果不传就会报错