山东大学项目实训Web实验室（WebLab）（二）前端组件安装

框架介绍

Vue3

Vue介绍

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

Vue3安装

Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。

将 Vue.js 添加到项目中主要有四种方式：

1. 在页面上以 CDN 包的形式导入。
2. 下载 JavaScript 文件并自行托管。
3. 使用 npm 安装它。
4. 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

本项目使用npm安装

在用 Vue 构建大型应用时推荐使用 npm 安装。npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。

npm install vue@next
npm install -D @vue/compiler-sfc

Vue 提供了一个官方的 CLI ，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

npm install -g @vue/cli

CodeMirror

CodeMirror介绍

CodeMirror是一个通用的文本编辑器，在JavaScript中为浏览器实现。它专门用于编辑代码，并带有许多实现更高级编辑功能的语言模式和插件。
CodeMirror拥有丰富的编程API和CSS主题化系统可用于定制CodeMirror以适应应用程序，并使用新功能对其进行扩展。

CodeMirror安装

npm install vue-codemirror

Element-Plus

Element-Plus介绍

Element-Plus是基于 Vue 3，面向设计师和开发者的组件库。（注意：Element-Plus适用于Vue3框架）

Element-Plus安装

npm install element-plus --save
npm install @element-plus/icons-vue