【Vue】「Vue.js 入门指南」（一）从安装到创建第一个应用程序
原创【Vue】「Vue.js 入门指南」（一）从安装到创建第一个应用程序
原创
前言
本篇博文是《Vue.js 打怪升级之路》中入门系列的第一篇博文，主要内容是从零开始讲解 Vue，一步步学习如何安装 node.js，并创建第一个 Vue.js 应用程序。，往期系列文章请访问博主的 Vue 专栏，博文中的所有代码全部收集在博主的 GitHub 仓库中；
认识 Vue.js
Vue.js 是一个流行的 JavaScript 框架，用于构建交互式 Web 界面。它是一个轻量级的框架，易于学习和使用，并且具有高度的灵活性和可扩展性。Vue 的核心库只关注视图层，因此它可以很容易地与其他库或现有项目集成。Vue 还提供了许多有用的功能，例如组件化、响应式数据绑定、指令等，使开发人员可以更快速地构建复杂的 Web 应用程序。Vue 的流行度在不断增长，它已经成为了许多开发人员的首选框架之一。
下面是 Vue2 和 Vue3 之间的一些主要区别，包括它们的优势和劣势：
特性 | Vue2 | Vue3 |
|---|---|---|
性能 | 性能较好，但在大型应用程序中可能会出现性能问题； | 性能更好，特别是在大型应用程序中； |
大小 | 相对较大，需要引入许多附加库； | 更小，核心库的大小减少了约30%； |
组件 | 组件 API 较为繁琐，需要使用Vue.extend() 来创建组件； | 组件 API 更简单，可以使用普通的 JavaScript 类来定义组件； |
数据响应式 | 基于Object.defineProperty 实现，存在一些限制； | 基于 ES6 的 Proxy 实现，更加灵活和强大； |
TypeScript 支持 | 需要使用额外的插件来支持 TypeScript； | 内置了对 TypeScript 的支持； |
Composition API | 未提供； | 提供了新的 Composition API，使代码更加模块化和可重用； |
Teleport 组件 | 未提供； | 提供了 Teleport 组件，使得在 DOM 中移动组件更加容易； |
其他 | 对 IE11 的支持较好； | 不再支持 IE11； |
总体来说，Vue3 相对于 Vue2 来说具有更好的性能和更小的体积，同时提供了更加灵活和强大的数据响应式机制和组件 API。Vue3 还提供了新的 Composition API 和 Teleport 组件，使得开发更加容易和高效。但是，Vue3 不再支持 IE11，这可能会影响一些需要支持旧版浏览器的项目。
Vue 的官方文档点击下方进行跳转：
安装 Node.js
在使用 Vue 构建项目之前，我们需要先安装一个 Node.js，在 Node.js 官网 选择一个合适的版本进行下载：
下面以 Node v16.19.0 (LTS) 为例进行安装：
啥都不用管，直接点 Next 就行了，一切默认。
在安装完成之后，可以通过在命令行中输入下述指令来进行验证：
node -v # 返回 nodejs 版本npm -v # 返回 npm 版本运行结果：
另外，在安装目录中新建文件夹node_cache 和node_global 来用于存储 node 的缓存与全局数据：
使用以下两条语句将刚刚创建好的文件夹的路径设置到 node 的变量中去：
npm config set prefix "your_path\node_global"npm config set cache "your_path\node_cache"运行结果：
然后新建环境变量NODE_PATH，在此之前需要自行在 nodeglobal 文件夹下创建子文件夹 nodemodules：
并将其添加到系统变量的 path 中：
同时要将用户变量的 path 中的..\AppData\Roaming\npm 路径修改成D:\Nodejs\node16\node_global：
通过指令npm install express-g 进行验证：
国内可以通过安装淘宝镜像来进行加速：
创建第一个应用程序
通过指令cnpm install--globalvue-cli 来安装 Vue 脚手架vue-cli，然后便可以通过指令vue init webpackmy-project 来创建一个基于 webpack 模板的新项目：
不过由于使用了代理服务器，因此可能会出现如下报错：
vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate这通常意味着计算机上的 SSL 证书不被信任，常见的解决方案就是通过指令npm configsetnpm_config_strict_ssl=false 来关闭 SSL 证书校验，还有一种方式就是通过离线方式进行项目初始化。
博主个人的话还是比较喜欢用vue ui，通过下述两个指令进行安装：
cnpm i -g @vue/clicnpm install -g @vue/cli在安装完成之后，通过指令vue ui 进行启动：
Vue 项目管理器界面如下所示：
- 单击 “创建” 标签页，点击 “在此创建新项目”：
- 填写相关项目信息：
- 选择 Vue 的版本，并点击 “创建项目”：
- 等待项目创建：
- 运行项目并启动：
- 运行结果：
后记
当你完成了阅读这篇博文时，希望你对 Vue.js 有了更深入的了解和认识。通过学习相关概念、安装 Node.js 以及创建第一个应用程序，你已经迈出了使用 Vue.js 的第一步了。接下来，你可以进一步学习 Vue.js 的高级特性和概念，例如组件、路由和状态管理。通过进一步探索 Vue.js 的世界，您将能够构建更为复杂和功能丰富的应用程序。
以上就是 Vue.js 入门指南：从安装到创建第一个应用程序 的所有内容了，希望本篇博文对大家有所帮助！
参考：
📝 上篇精讲：这是第一篇，没有上一篇喔~ 💖 我是 𝓼𝓲𝓭𝓲𝓸𝓽，期待你的关注，创作不易，请多多支持； 👍 公众号：sidiot的技术驿站； 🔥 系列专栏：Vue.js 打怪升级之路
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。