光脚丫思考Vue3与实战：第02章 安装Vue.js

下面是本文的屏幕录像的在线视频：

02-安装Vue.js

温馨提示：

1、视频下载：线上视频被压缩处理，可以下载高清版本：https://pan.baidu.com/s/16594YUpNNrkjZfrCx7e5kQ 提取码：hws6

2、示例代码：https://pan.baidu.com/s/1oYV0Lej_E3ufyEUMxq1S2Q 提取码：ikhe 

下图是文章大纲：

 

一、概述

Vue.js是设计是渐进式逐步使用的。这意味着可以根据需要将其以多种方式集成到项目中。
将Vue.js添加到项目的三种主要方法：

• 在页面上将其作为CDN包导入；
• 使用NPM安装；
• 使用正式的CLI来搭建项目，该项目为现代的前端工作流提供了包括功能齐备的构建设置（例如，热重载，保存时的ESLint检查等）。

 

二、发行说明

最新版本：v3.0.3 （2020-11-25）
每个版本的详细发行说明可在GitHub上找到：https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md

 

三、Vue Devtools

温馨提示：
1、目前处于Beta版-Vuex和路由器集成仍在进行中。（2020-11-22）
2、此处只是对Vue DevTools做个简单的演示，后续有专门的视频做详细的说明。
使用Vue时，我们还建议您在浏览器中安装Vue Devtools（地址：https://github.com/vuejs/vue-devtools#vue-devtools），使您可以在更加用户友好的界面中检查和调试Vue应用程序。

• 获取Chrome扩展程序：https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
• 获取Firefox插件：https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/
• 获取独立的电子应用程序：https://github.com/vuejs/vue-devtools/blob/dev/packages/shell-electron/README.md
   

四、CDN

出于原型制作或学习目的，您可以将最新版本与以下各项配合使用：

<script src="https://unpkg.com/vue@next"></script>

对于生产，我们建议链接到特定的版本号并进行构建，以避免新版本意外损坏。特定版本类似如下引用：

<script src="https://unpkg.com/vue@3.0.3"></script>

 

五、NPM

使用Vue构建大型应用程序时，建议使用NPM安装方法。它与Webpack或Rollup等模块捆绑器很好地配对。Vue还提供了用于创作单一文件组件的随附工具。

# latest stable
$ npm install vue@next

温馨提示：关于如何创建Vue项目，可以参考我的另外一篇文章《03-Vue.js环境准备-使用vue-cli快速搭建项目(cli3+)》：https://blog.csdn.net/gjysk/article/details/108524736

 

六、CLI

Vue提供了一个官方CLI，是用于快速搭建单页面应用的脚手架。它为现代的前端工作流提供了功能齐全的构建设置。只需几分钟就可以启动并重新运行热重载，保存时做ESLint验证，以及可用于生产环境的构建。有关更多详细信息，请参见Vue CLI文档。
温馨提示：CLI假定您具有Node.js和相关构建工具的先验知识。如果你是刚开始使用Vue或前端构建工具，我们强烈建议先不用使用任何构建工具来使用Vue.js。
对于Vue 3，您应该使用Vue CLI v4.5（可从上NPM获得）@vue/cli。要升级，您需要在@vue/cli全局范围内重新安装最新版本：

npm install -g @vue/cli

然后在Vue项目中运行：

vue upgrade --next

温馨提示：关于如何创建Vue项目，可以参考我的另外一篇文章《03-Vue.js环境准备-使用vue-cli快速搭建项目(cli3+)》：https://blog.csdn.net/gjysk/article/details/108524736

 

七、参考资料

• 官网资料：https://v3.vuejs.org/guide/installation.html