Vue初体验——创建并运行一个Vue应用

Vue是什么

Vue是什么？ Vue是一个渐进式的前端框架。更简单的理解要追溯到MVC、MVVM模式，　主要就是分离数据层和控制层。对于一个典型的Web应用， 比如Java Web应用：

• 模型层：定义数据模型，也就是类
• 控制层： 后端语言获取数据库数据， 进行一些逻辑封装和处理。
• 视图层：结合后端返回的数据， 结合HTML标签在浏览器中进行显示。

传统的应用将数据和HTML标签混合起来进行显示，比如返回１０条数据，循环显示１０个Div。在页面简单的状况下还好，数据量大、页面复杂的状况下处理起来往往容易出错，而且不宜追踪，于是在前端的视图层又进一步的细分为MVC（或MVVM）模式。

• 模型层：前端的数据模型
• 控制层：负责从后端获取数据
• 视图层：单纯的页面，不涉及数据

现在更多的使用的是MVVM ，也就是绑定视图和模型， 数据修改的时候，页面显示同步更新；页面输入改动时，同步更新数据。
以上的这个思想，也就是所谓的框架。

JQuery是框架吗？

JQuery 曾经风行很长时间， 而且现在也一直在用， 严格意义上 JQuery不能算是框架， 只是一个前端的包。其提供了一些很便捷的方式选择页面的元素，更改DOM或是设置样式。比如：

$("#test").hide()

但是，JQuery没有MVC等框架的概念，其加快了前端的开发速度，但思路还是停留在传统上。

前端框架有哪些？

知名的前端框架有：

• AngularJS： 背靠Google大树
• React： 起源于FaceBook的内部项目
• Ext JS： 老牌的JavaScript框架。一站式的前端解决方案，使用Ext JS 之后，基本不需要再使用其他的Javascript库，而且其提供了对AngularJS和React等框架的兼容。也提供了很多很要用的前端设计、开发和测试等工具， 最大的缺点就是不开源、收费。
• Vue： JavaScript框架最有前景的新星，更是中国的骄傲。有丰富的中文文档和中文社区。但是Vue本身就真的只是框架，并没有提供现成的前端组件，比如样式美观的表单、树等。使用Vue，一般需要搭配ElementUI的组件库使用。这也是和Ext JS一站式的差距。

Vue项目的创建步骤

Vue的使用可以像使用传统的JS框架的方式，在一个html文件中导入Vue的JS和CSS文件；但是，更习惯和流行的方式还是使用NPM进行模块化开发。
本篇基于NPM演示Vue项目的创建和运行，步骤主要包括：

1. 安装Node.js
2. 安装淘宝镜像（可选步骤）
3. 安装Vue CLI命令工具
4. 创建Vue项目
5. 运行Vue项目

演示环境的安装规划

• 系统： Windows 64 位

• Node.js 版本： node-v12.18.3

• Vue CLI版本： v4.5.4

• Node.js安装路径：D:\install\nodejs

• 项目路径：D:\demoworkspace\vue

• 项目名称：my-vue

１. 下载并安装Node.js

Node.js的下载地址是:
https://nodejs.org/zh-cn/
选择稳定版本下载：

目前稳定的最新版本是node-v12.18.3，这里在64位Windows系统下开发，所以下载node-v12.18.3-x64.msi安装文件。

如果官方下载速度慢的话， 也可以从以下网盘地址获取安装文件。

链接：https://pan.baidu.com/s/1E9vXuP_UpyDfgrwxceMkRw
提取码：gve3

设置模块安装位置

npm config list
npm config set prefix "D:\install\nodejs\node_global"
npm config set cache "D:\install\nodejs\node_cache"

2. 使用淘宝镜像

在命令行中输入 cnpm -v
如果报“‘cnpm’ 不是内部或外部命令，也不是可运行的程序…”的错误， 则将以下路径加到操作系统的环境变量中。
D:\install\nodejs\node_global

3. 安装Vue CLI （全局安装）

cnpm install -g @vue/cli

也可以使用npm命令，但是速度非常慢。

验证Vue CLI是否安装成功：vue -V

4. 创建项目

切换到项目路径：

cd D:\demoworkspace\vue

vue create my-vue

5. 运行项目

cd my-vue
npm run serve

http://localhost:8080/