Vue 3 如何安装

如何安装

实验介绍

我们每一次学习一个框架，比如像几年前的 jQuery，以及其他的第三方 javascript 实用库：loadash，underscore，dayjs，等等，我们都需要引入这些库的源文件才能使用这些库的 API，所以我们的 vue3.0 也不例外，同样需要引入，当然，我们引入的方式可能各式各样，我们需要根据自己的使用情况来以不同的方式引入框架的源文件。

Vue 的开发工具查看

我们都知道在 vue2.x 有一个叫做 vue-devtool 这个神奇的工具，它可以看到到组件的各种属性，事件的触发，所以开发时，需要先安装这个工具，我们可以下载源码，通过以下命令自己编译：

npm run build

在这里我们就不讲述如何编译了，需要自己科学上网，去谷歌商店下载安装就行了。

获取Chrome扩展程序

获取Firefox插件

获取独立的Electron应用程序

安装之后我们通过按下 F12 ，来查看是否安装成功。

CDN

我们还记得我们在使用 JQuery 的时候，经常使用 cdn 加速器，来引入我们需要的源文件，vue3.0 也不例外，有些情况可能是我们需要学习，不想使用 vue 自带的脚手架搭建项目，只需要引入下面的链接，我们就可以使用 vue3.0 的各种 API。

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

npm

当然，我们在工作做中，一般是通过使用 webpack，或者 vue-cli，构建项目的，所以自然需要 node，安装 node

之后自然会自带 npm，就可以使用 npm 来安装 vue3.0：

npm install vue@next

vue-cli 脚手架

Vue提供了一个官方CLI，可用于快速搭建 Single Page Applications。它为现代的前端工作流提供构建设置。只需几分钟就可以启动并重新运行热保存，可用于生产的构建。有关更多详细信息，请参见Vue CLI文档。

对于Vue 3，您应该使用Vue CLI v4.5，该版本在上npm提供@vue/cli。要升级，您需要在@vue/cli全球范围内重新安装最新版本：

yarn global add @vue/cli
# OR
npm install -g @vue/cli

Vite 构建工具

Vite 是一个 Web 开发构建工具，由于其本机 ES6 模块导入方法，因此可以快速提供代码服务。

通过在终端中运行以下命令，可以使用 Vite 快速设置 Vue 项目。

使用 NPM：

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

如何升级 vue-cli

很简单，就是先用以下命令卸载 vue-cli：

npm uninstall @vue/cli -g

然后重新安装一次就行了

npm install @vue/cli -g

查看 vue-cli 版本：

vue -V

创建一个项目

同样使用以下命令：

vue create code1

回车之后：

选择：

Manually select features

回车之后：

选择：

Choose VUe version
Babel
Router
Vuex
CSS Pre-processors

回车之后，选择版本：

3.x (Preview)

等待安装完毕：

然后

cd code1
yarn serve

跑起来之后：