Vue3 + vite + typescript 尝鲜

• 安装 vite

npm i vite -g
vite -v

• 创建项目且运行

npm init vite-app vue3demo

cd vue3demo

yarn

yarn dev

• 安装vuex vue-router typescript

yarn add vue-router@4.0.1 vuex@4.0 typescript

• 配置vite.config.ts

vite.config.ts 相当于 @vue-cli 项目中的 vue.config.js

import path from 'path'
module.exports = {
  alias:{
    '/@/': path.resolve(__dirname,'./src')
  },
}

• router (创建文件)

import { createRouter, createWebHashHistory } from 'vue-router'
// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: [
    {
      path:'/',
      name:'Home',
      component:()=>import('/@/views/demo1.vue')
    }
  ]
})

• main.ts(修改文件名, ps: 修改main.js引入)

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
import vuex from './store/index'
const app = createApp(App)
app.use(router)
app.use(vuex)
app.mount('#app')

• store(创建文件)

import { createStore } from 'vuex'
interface State {
  userName: string
}
export default createStore({
    state:{
    userName:'xx'
    }
});

• 根目录下新建shim.d.ts(解决ts识别不了.vue文件)

declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}