Vue 3.0 全家桶发布内容包括：
vue: Beta
vue-router: Alpha
vuex: Alpha
vue-class-component: Alpha
vue-cli: Experimental support via vue-cli-plugin-vue-next
eslint-plugin-vue: Alpha
vue-test-utils: Alpha
vue-devtools: WIP
jsx: WIP
可以看到 Vue 3.0 beta 版本是一个项目系列，包含了我们在开发过程中需要的套件、webpack 插件等等，本文将带大家快速搭建基于 Vue 3.0 的项目框架，这和之前很多 Vue 3.0 的 Demo 不同，是具备商业化项目能力的框架，本文将包括以下内容：
基于 vue-cli 快速搭建 Vue 3.0 项目
Vue 3.0 基本特性体验
集成 vue-router 和 vuex 4.0
说个题外话，今天中午我搭建 Vue 3.0 项目时，发现了 vue-router-next 一个 block 级别的 BUG，想在 vue-router-next 项目 issue 中反馈时，发现已经有人提交了相似问题，随后晚上测试时，bug 已经被 fixed，为 Vue 团队的高效点赞，issue 地址，所以当大家发现使用中问题时，可以及时到项目 issue 下进行反馈，这是一支可以信赖的团队！
Vue 3.0 项目初始化
Vue 3.0 项目初始化过程和 Vue 2.0 类似，具体步骤如下：
Vue 项目初始化
第一步，安装 vue-cli：
npm install -g @vue/cli
注意以下命令是错误的！
npm install -g vue npm install -g vue-cli
安装成功后，我们即可使用 vue 命令，测试方法：
$ vue -V @vue/cli 4.3.1
第二步，初始化 vue 项目：
vue create vue-next-test
输入命令后，会出现命令行交互窗口，这里我们选择 Manually select features：
Vue CLI v4.3.1 ? Please pick a preset: default (babel, eslint) ❯ Manually select features
随后我们勾选：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，这些都是开发商业级项目必须的：
Vue CLI v4.3.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ❯◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing
注意：Vue 3.0 项目目前需要从 Vue 2.0 项目升级而来，所以为了直接升级到 Vue 3.0 全家桶，我们需要在 Vue 项目创建过程中勾选 Router 和 Vuex，所以避免手动写初始化代码
回车后会自动安装依赖，为了加速安装速度，我们可以使用淘宝源来加快初始化速度：
vue create -r https://registry.npm.taobao.org vue-next-test
项目创建完毕后，目录结构如下：
. ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── main.js ├── router │ └── index.js ├── store │ └── index.js └── views ├── About.vue └── Home.vue
升级 Vue 3.0 项目
目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，vue-cli 还没有直接支持，我们进入项目目录，并输入以下指令：
cd vue-next-test vue add vue-next
执行上述指令后，会自动安装 vue-cli-plugin-vue-next 插件（查看项目代码），该插件会完成以下操作：
安装 Vue 3.0 依赖
更新 Vue 3.0 webpack loader 配置，使其能够支持 .vue 文件构建（这点非常重要）
创建 Vue 3.0 的模板代码
自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本，如果未安装则不会升级
自动生成 Vue Router 和 Vuex 模板代码
完成上述操作后，项目正式升级到 Vue 3.0，注意该插件还能支持 typescript，用 typescript 的同学还得再等等。
Vue 3.0 基本特性体验
下面我们从项目开发的角度逐步体验 Vue 3.0 的开发流程
创建路由
项目开发中，我们通常需要创建新页面，然后添加路由配置，我们在 /src/views 目录下创建 Test.vue：
<template> <div> <h1>test page</h1> </div> </template> <script> export default { } </script> <style lang="less" scoped> .test { color: red; } </style>
之后在 /src/router/index.js 中创建路由配置：
import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: 'https://www.jb51.net/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '/test', name: 'Test', component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router