Vue.js基础介绍与环境搭建

Vue.js基础

Vue.js简介

Vue.js是一个用于构建用户界面的 $\underline{渐进式} \underline{\text{渐进式}}$ 渐进式 JavaScript框架，" $\underline{自底向上、增量开发} \underline{\text{自底向上、增量开发}}$ 自底向上、增量开发"的设计方式。
Vue.js的核心是只关注视图层。

Vue.js与MVVM架构模型

MVVM （Model-View-ViewModel）
ViewModel在MVVM中负责在Model（模型）和View（视图）中间的桥接工作，当Model改变时通过ViewModel通知View，反之亦然。

双向数据绑定

双向数据绑定就是指View和Model的数据相互同步。

Vue.js会通过DOM Listeners来监听并改变Model中的数据，当Model中的数据发生改变时，会通过Data Bingings来监听并改变View中数据的展示。
Vue.js框架底层，是通过使用JavaScript Object对象的defineProperty()方法，重新定义了对象获取属性值和设置属性值的方法，来实现"数据双向绑定"操作的。因此，其原理仍旧是通过Javascript方式实现的。

Vue.js特点

Vue.js是基于MVVM框架设计的，一套用于构建用户浏览器界面的、渐进式的前端WEb框架。
Vue.js 是基于数据驱动思想开发的JavaScript框架，实现了在尽可能的条件下减少繁杂的DOM操作。
Vue.js开发了一套自己的模版语言，采用虚拟DOM的方式渲染Html页面，实现了将前后端进行分离的开发方式。
Vue.js的核心库只关注视图层，同时借助MVVM架构的特点实现了"双向数据绑定"的核心功能
Vue.js只聚焦于视图层，具备能力实现单文件组件以及相对复杂的单页面应用。
Vue.js是一个轻巧的、高性能可组件化的JavaScript框架，设计了易于学习的API方法，能够非常方便地与其他前端库进行有效整合。

Vue.js快速开发环境

直接 script 引入本地Vue.js

vue.js库文件包含两个版本，分别是"开发版本"和"生产版本"。
开发版本：包含完整的警告信息和调试模式。
生产版本：删除了相关警告信息（体积更小、运行更快），用于最终打包发布时使用。（文件名中加入"min"字符串以示区别）

通过CDN方式引入Vue.js

Vue.js脚手架开发环境

安装Vue.js脚手架

所谓 "脚手架" 就是为了快速搭建应用程序开发框架而设计开发的 $\underline{自动构建工具} \underline{\text{自动构建工具}}$ 自动构建工具。
Vue.js框架的脚手架就是vue-cli命令行工具。

Vue.js框架自身迭代速度很快，目前主流的是Vue 2版本和Vue 3+版本。
Vue 3+版本在Vue 2版本的基础上增加了不少新特性和新功能。因此，也造成了Vue 3+版本与Vue 2版本在使用上多少有些差异。
在Vue.js脚手架（vue-cli）的使用上，Vue3+版本与Vue2版本也存在着不同。

当前系统开发环境已经安装好npm工具和Webpack工具，这样就可以继续安装vue-cli命令行工具了

npm install -g @vue/cli //注：Vue 3+版本为 "@vue/cli",Vue 2版本为 "vue/cli"

vue-V // 验证vue-cli命令行工具是否安装成功了 注："-V"要使用大写字母

通过Vue.js脚手架进行快速原型开发测试

Vue.js脚手架支持快速原型开发方式，就是通过单个的Vue页面进行简单应用的设计。
要使用这种快速原型开发方式，需要添加对vue-cli命令行工具的服务支持

npm install -g @vue/cli-service-global

成功添加后，就可以通过 "vue serve" 命令进行快速原型开发测试了。
在开发测试前，需要在VS Code开发工具中安装一个名称为 "Vetur" 的Vue.js扩展插件，该扩展插件添加了VS Code开发工具对Vue文件的支持。

vue serve [文件名].vue  //命令直接启动Http服务测试Vue.js单页面文件

通过Vue.js脚手架进行打包

vue build [文件名].vue //将通过生产模式对Vue.js文件进行打包，打包成功后的文件均输出到 "dist"目录下

在dist目录中，自动生成一个index.html页面文件和一组js文件和map文件（js子目录内）。最后，就可以将dist目录中的文件直接部署到服务器中去测试了。

通过Vue.js脚手架创建应用

通过 "vue create"命令，可以直接创建Vue.js应用项目，该应用项目会自动生成若干必要的框架文件，以及一个默认的Vue单文件页面。同时，这个默认的Vue单文件页面已经是一个最基本的Vue.js应用了，通过"npm run"命令就可以直接运行测试该应用项目。

vue create createvue(项目名称)

安装好后 Vue.js基础介绍与环境搭建

通过vue-cli结合Webpack创建应用

通过vue-cli命令行工具还可以结合Webpack工具创建Vue.js项目应用。
严格来讲，这其实是Vue 2版本下的操作方式,所结合的Webpack工具其实是Vue.js官方所推荐的模版。

下面具体介绍下Vue 2 版本下通过vue-cli命令行工具创建应用项目及测试运行的过程：

创建项目

对于Vue 2 版本下vue-cli命令行工具，创建应用项目是通过 "vue init",而不是 "vue create"

vue init webpack your-project-name

在使用"vue-init"命令之前需要先安装该命令扩展工具，命令如下：

npm install -g @vue/cli-init

启动运行项目

npm run dev

对项目进行打包发布

npm run build

* $\underline{vue create 和 vue init 区别} \underline{\text{vue create 和 vue init 区别}}$ vue create 和 vue init 区别

通过vue-cli结合Webpack创建应用

在 VS Code 安装 vetur 插件，该插件实现了vue代码基本语法的高亮功能。
浏览器打开插件 Debugger for Chrome，Debugger for Firefox。
VS Code 设置断点方法代码行 F9快捷键即可。
VS Code 运行浏览器调试方法 F5快捷键

学习书籍《vue.js+Node.js全栈开发实战》
cn.vuejs.org Vue.js中文官方网站
（1）cn.vuejs.org/js/vue.js 开发版本
（2）cn.vuejs.org/js/vue.min.… 生产版本