Vue基础—理论

前言

Vue的一些理论点，学习Vue的一些前置知识
更多可查看官方文档：Vue
博客地址：芒果橙的个人博客 【http://mangocheng.com】

一、介绍

1.概念

• Vue是一套用于构建用户界面的渐进式框架

• 与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用

• 核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

• 渐进式框架，随时可根据需要安装插件

• SPA：single-page application-单页应用

  一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内（采用的是div切换显示和隐藏），从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。

2.特点

• 声明式渲染：Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统，数据变化实时响应视图

• 提供了响应式（Reactive）和组件化（Composable）的视图组件

• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库

• 组件化应用构建：组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。

3.使用方式

• 单独引入的方式：html中标签

<script src="vue.min.js"></script>

• 官方脚手架（Vue-cli）创建

vue init webpack vuetest

---

二、开发环境

为了搭建VUE 项目，一般我们采用第二种方式构建。这边前端的技术栈一般都会涉及到这几个技术：NPM、Webpack、vue-cli。我们这边先了解一下这些技术的作用。

1. NPM

• 打开了连接整个 JavaScript 天才世界的一扇大门
• 世界上最大的软件注册表
• 来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使开发者能够轻松跟踪依赖项和版本
• 可以理解为JavaScript的包管理器，每个包都是个组件或模块，开发者可以下载使用

2. Webpack

• 现代 JavaScript 应用程序的静态模块打包器(module bundler)
• Webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

3.Vue-cli

• Vue 构建的脚手架，可以快速生成所需要的VUE 项目目录及相关配置