vue3 ts vite

npm init vite@latest

npm install -D sass

npm i vant

npm i vite-plugin-style-import@1.4.1 -D



vite.config.ts配置如下：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default defineConfig({

    plugins: [

        vue(),

        styleImport({

            resolves: [VantResolve()]

        })

    ]

})

 

npm i vue-router@4 --save

npm install @types/node --save-dev  配置@

vite.config.ts配置如下：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'

import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default defineConfig({

    plugins: [

        vue(),

        styleImport({

            resolves: [VantResolve()]

        })

    ],

    resolve: {

        alias: {

            '@': resolve(__dirname, 'src')

        }

    }

})

 

tsconfig.ts加

"baseUrl": ".",

    "paths": {

      "@/*": ["src/*"]

    },否则那个不写后缀会报错

要加在compilerOptions对象里

 

router.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [

    {

        path: "/",

        name: "task",

        meta: {

            title: "自定义作业",

        },

        component: () => import("@/views/index/index.vue")  

    }

];

const router = createRouter({

    history: createWebHashHistory(),

    routes

});

export default router;

 

main.js关于router的

import router from "@/router"

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