Vue.js简介

初始Vue

前端技术的发展

HTML：HTML主要用来编写网页的结构，例如表示超链接。

CSS：CSS样式包括颜色、大小、字体等，布局合理的页面效果。

JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。

jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便，有效地提高了项目开发效率。

Vue：Vue通过虚拟DOM技术来减少对DOM的直接操作；通过尽可能简单的API来实现响应的数据绑定，支持单向和双向数据绑定。

什么是Vue

Vue的基本概念

1️⃣Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架。
2️⃣与其他大型框架相比，Vue被设计为可以自底向上逐层应用。
3️⃣其他大型框架往往一开始就对项目的技术方案进行强制性的要求，而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，也可以将Vue引入到一个现有的项目中。
Vue.js简介

Vue的基本工作原理(MVVM)图

Vue.js简介

Vue的优势

轻量级：Vue简单、直接，所以Vue使用起来更加友好
数据绑定：数据驱动视图，视图也可以驱动数据
指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为
插件：插件用于对Vue框架功能进行扩展

Vue、Angular和React的区别

1️⃣React和Vue的中心思想是一切都是组件，组件之间可以实现嵌套
2️⃣React依赖虚拟DOM，而Vue使用的是DOM模板
3️⃣Vue在模板中提供了指令，过滤器等，可以非常方便和快捷的操作DOM
4️⃣React采用了特殊的JSX语法，Vue中也推崇编写以*.vue后缀命名的文件格式

Node.js环境

Vue.js简介

npm包管理工具

npm的基本概念

npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题。

使用场景需求

从npm服务器下载别人编写的第三方包到本地使用。
从npm服务器下载并安装别人编写的命令程序到本地使用。
将自己编写的包或命令行程序上传到npm服务器供别人使用。

常用命令

npm install：安装项目所需要的全部包，需要配置package.json文件。
npm uninstall：卸载指定名称的包。
npm install 包名：安装指定名称的包。
npm update：更新指定名称的包。
npm start：项目启动。
npm run build：项目构建。

WebPack打包工具

webpack的基本概念

webpack是一个模块打包工具，可以把前端项目中的js、css、html、图片等文件都打包在一起，实现自动化构建，给前端开发人员带来了极大的便利。
1️⃣Webpack打包到底做了什么事情？
（1）分析代码，优化代码。
Webpack会分析项目结构，找到有兼容问题 JS代码进行兼容性处理，并且将一些浏览器不能直接运行的拓展语言（Scss、Less等）进行编译。
（2）代码混合压缩、打包。
2️⃣项目发布之前为什么要打包？
在模块化开发中，会编写大量模块，如果不打包就上线，那么页面加载或交互时，将会发起大量的请求。为了性能优化，需要使用Webpack这样的打包对模块进行打包整合，以减少需求数，就像简单的React项目，所有组件最终将被打包到一个app.js中。
Vue.js简介
3️⃣webpack的简单使用：
案例：webpack打包example.js文件到app.js。