vue3 的几种开始方式

[felix-cao]

vue3 官方, 主要提供了四种安装方式，本文另外增加了git clone的方式。 目前推荐使用第三种方法。vite 有很大的魔力，将来可能会取代 webpack

一、CDN

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

看一个 DEMO

二、npm 安装

这种方式，一般用于已存的而没有使用vue的老项目，采用的是 npm 默认的局部安装，把vue依赖加进来，前提是您当前目录已经有 package.json, 如果没有的话，先 npm init 去创建一个。

把 vue 依赖加载进来

# latest stable
$ npm install vue@next

安装完成后会在 package.json 的 dependencies 里找到 vue

三、CLI 命令行安装

vue-cli 是一个 official CLI 脚手架工具， 有一篇 DOC, 也有中文介绍

下载 vue 命令行工具

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

老项目

如果已有 vue2 的项目，要升级到 vue3, 等同于把 package.json 中 依赖的 vue2 更改为 vue3, 再 yarn install

# 在项目中执行
vue upgrade --next

创建新项目

vue create hello-world

四、Vite

vite 是个好东西，有了 vite, 尤大在 twitter 中说 I feel I may never be able to go back to webpack], 回头单独详述

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

或者用 yarn

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

五、git clone 方式

这种方式取 vue3 在 github 上托管的源码

$ git clone git@github.com:vuejs/vue-next.git
$ cd vue-next
$ yarn
$ yarn dev

yarn dev 后会在./packages/vue/下生成一个dist文件, 现在可以在 dist 下写 vue3 代码了