就在今天凌晨 4 点左右，vue-next v3.0.0-beta.1 版本发布，这意味着 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 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 class="test">
    <h1>test page</h1>
  </div>
</template>
<script>
 export default {
 <span c