vite2+TypeScript+vue3创建配置router+vuex

vite

不支持ie11

创建项目

npm init @vitejs/app

命名：

image.png

选择要创建的框架，这里选择vue

image.png

选择语言 这里用TypeScript或者javaScript都可以

image.png

这样一个vite2+vue3项目就创建完成了

image.png

cd 项目目录
npm install
npm run dev

成功启动，几乎是秒开

image.png

image.png

配置路由

npm i vue-router -s

src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../views/layouts/index.vue'

const routes: Array = [
    {
        path: '/',
        name: 'Layout',
        component: Layout,
        redirect: '/index',
        children: [
            {
                path: 'index',
                name: 'Index',
                component: () => import( '../views/index/index.vue')
            }
        ]
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

main.ts

//main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App).use(router)
app.mount('#app')

配置vuex

src/store/index.ts

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

export default createStore({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    },
    plugins: [
    ]
})

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App).use(store).use(router)
app.mount('#app')