什么是Vue

Vue 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

Vue的技术栈包括：◼Node.js ◼ Webpack ◼ Vue.js ◼ Vue-CLI ◼ Vue-Router ◼ Vuex ◼ Axios ◼ Element UI

Node.js

Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进
行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
在这里插入图片描述

Vue.js

Vue.js 是一个轻巧、高性能、可组件化的 MVVM （Model-View-ViewModel）库。

Vue-CLI

Vue-CLI 是 Vue 项目开发的快速构建工具（项目脚手架）。

Vue-Router

Vue-Router 是 Vue.js 官方的路由管理器

VueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Element UI

Element UI 是一套采用 Vue 作为基础框架实现的 UI 组件库，能帮
助网站快速成型。
在这里插入图片描述

Vue的整体架构设计

在这里插入图片描述

搭建Vue3项目

安装Node.js

参考：https://blog.csdn.net/Small_Yogurt/article/details/104968169，其中的第十步不同做。

查看是否安装成功：
进入cmd命令提示符窗口，输入以下命令：

 #查看node.js 版本
 node-v
 #查看npm 版本
 npm-v
 # 升级或安装 cnpm
 npm install cnpm -g
 #升级 npm
 cnpm install npm -g

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装，cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用。

安装 Vue CLI

对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级，你应该需要全局重新安装最新版本的 @vue/cli，同样在命令行中输入以下指令：

# 使用cnpm安装 vue-cli
cnpm install -g @vue/cli

#安装完后查看版本，高于@vue/cli 4.5.10则没问题
vue --version

#更新一下
vue upgrade --next

至此Vue3已经全部配置成功。

创建 Vue 3项目

手工创建（可省略）

创建成功如下图所示：
在这里插入图片描述

可视化创建工具来创建项目(可忽略)

除了使用 vue create 命令创建项目，我们还可以使用可视化创建工具来创建项目。
◼ 第一步：在工作区运行命令：vue ui
在这里插入图片描述

◼ 第二步：点击"创建"选项来创建一个项目，选择底部"在此创建项目"，页面上方也可以选择路径
在这里插入图片描述
◼ 第三步：然后输入项目名称，选择包管理工具为 npm，然后点击下一步

◼ 第四步：选择预设配置或者之前我们已经设置好的配置

等待安装完成

等待几秒后，就可以看到新项目创建成功。管理界面如下：
在这里插入图片描述