搭建vite + vue3 + typescript

1.使用vite搭建项目

兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

npm init vite@latest || yarn create vite
// 提示需要安装create-vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
// 项目名称
? Project name: » vite-project
// 选择框架
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte
? Select a variant: » - Use arrow-keys. Return to submit.
    vue
>   vue-ts
cd vite-project
npm i
npm run dev

2.安装vue-router

npm install vue-router@4

配置vue-router

在项目src目录下面新建router目录，然后添加index.ts文件，在文件中添加以下内容

import {
    createRouter, createWebHashHistory } from 'vue-router'

// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
   
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})

3.安装vuex

npm install vuex@next

在项目src目录下面新建store目录，并添加index.ts文件，文件中添加以下内容

import {
    createStore } from 'vuex'

interface State {
   
  userName: string
}

export default createStore({
   
  	state:{
   
  	userName:'王大合'
  	}
}