友情提示：写此文章是2020-05-16日，遇到的问题可能随着后续升级消失。祝vue越来越好。

安装&版本信息

我先列一下自己的版本信息吧：

@vue/cli 4.3.1
node v12.16.3
yarn 1.10.1

安装过程

vue create xxxx
// 进行你自己的配置
cd xxxx //进入你刚刚的项目
vue add vue-next // 配置vue 3!
// 如果你选了ts,你会得到一个无法正常运行的helloworld。

下面是vue的全家桶版本信息：

"vue-cli-plugin-vue-next": "~0.1.2"

上面的插件自动给我整上了：

"vue": "^3.0.0-beta.1",
"vue-router": "^4.0.0-alpha.5",
"vuex": "^4.0.0-alpha.1"

整活

src/shims-tsx.d.ts

一个字：删！做法出处：github.com/vuejs/vue-n…

src/shims-vue.d.ts

改成：

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  var component: ComponentOptions
  export default component
}

做法出处：github.com/vuejs/vue-n…

src/store/index.ts & main.ts

这两个一起改，前面的文件动了，后面也跟着动~ index.ts 改成：

import { createStore } from 'vuex'
export const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

main.ts的引用部分 import store from './store'改成import {store} from './store' 做法出处： node_mudules下的README.md文件里写的！

src/router/index.ts

因为那个config什么的，不知道为什么识别不了，那就不识别了吧~

import {  createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'

const routes: Array<any> = [
{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

出处：自己整的

最后一个了：src/components/HelloWorld.vue

这个因为vue3的变化，所以，script部分改成：

<script lang="ts">
export default {}
</script>

无图无真像

真·vue3.0全家桶+ts尝鲜、过坑。