阅读 1323

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

友情提示:写此文章是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>
复制代码

无图无真像

No type errors found