前言

Vue(发音为 /vjuː/，类似 view)是一款渐进式Web前端框架，提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

官方网站：https://cn.vuejs.org/ 或 https://vuejs.org/
在这里插入图片描述

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

本文主要介绍下Vue的基础概念与在前端开发中的使用方式等内容。（基于 Vue3 ，当前版本为 3.2.41 ）

开发环境准备

不管以哪种方式开发，编辑器和相关插件都是需要的，这里使用 VS code 进行开发：
下载地址：https://code.visualstudio.com/
下载安装后需要装 Volar 扩展，见下图：
在这里插入图片描述

如果是以 构建方式 进行开发的话还需要有相关工具支持，这些都是基于 Node.js 的：
Node.js官网：https://nodejs.org/
从官网下载安装，常理来说安装完就可以用了，不过因为大陆网络原因，所以需要科学上网或者使用代理等，比较简单的方式是使用 nrm 换源：

# 全局安装nrm
npm install -g nrm# 测试可用源速度
nrm test
# 切换源
nrm use

这部分内容更多介绍可以参考下面文章：
《Node.js入门 01：基础使用与说明》https://blog.csdn.net/Naisu_kun/article/details/120665042
《Node.js入门 02：包管理器npm》https://blog.csdn.net/Naisu_kun/article/details/120663782

无构建使用

无构建使用Vue就和jQuery等很多传统的JS库一样，使用时就是导入JS文件到页面中，在原生Html 的基础上使用这些库提供的API辅助进行开发。

无构建使用最常见的就是通过CDN来使用，官方文档中提到的CDN有下面几个：

UNPKG：https://unpkg.com/browse/vue@3/
jsDelivr：https://www.jsdelivr.com/package/npm/vue
cdnjs：https://cdnjs.com/libraries/vue

下面是最传统的使用方式，全局方式导入：



  

{{ message }}

在这里插入图片描述

现在也可以使用ES模块方式导入：





{{ message }}

也可以用Import maps方式来导入ES模块：





{{ message }}

在这里插入图片描述

也可以将库文件下载到本地使用：
从 https://www.jsdelivr.com/package/npm/vue 下载比较方便，下载后库文件都在 package/dist/ 目录下：
在这里插入图片描述

也可以使用 npm i vue 命令进行下载，下载后库文件都在 node_modules/vue/dist/ 目录下。

需要注意的是如果使用ES模块的话是不支持以文件形式访问的，本地测试时可以使用 Live Server 扩展启用HTTP服务以正常访问：
在这里插入图片描述

构建式使用

构建式的使用Vue是比较被推荐的方式，这个和传统的外挂一个库的方式使用就有较大差别了，可以最大程度的发挥Vue的特点。目前Vue项目构建都是依赖 Vite 工具进行的，当然入门使用时不用关注到这些具体的细节。

使用 npm init vue@latest 命令即可生成基本的Vue项目框架，根据提示选择相关的功能，最终会在当前目录下生成项目文件夹：
在这里插入图片描述

进入项目文件夹使用 npm install 命令可以安装所需要的模块。然后使用 npm run dev 命令即可运行项目，可以在浏览器中查看效果：
在这里插入图片描述
使用 Ctrl + C 终止当前运行。

当准备将应用发布到生产环境时可以运行 npm run build 命令，这将在项目文件夹下生成 dist 目录，其中的所有内容就是最终可以部署到服务器上的文件了。需要注意的是默认情况下这些文件是不支持以文件形式访问的，本地测试时可以使用 Live Server 扩展启用HTTP服务以正常访问：
在这里插入图片描述