友情提示:写此文章是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
}
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>