vite+ts项目引入vue-router、less、types-node

文章目录

• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

创建完vite + ts + vue3项目，因为是个裸包啥也没有，就install了vue-router和less

​ vue-router：Vue Router

less、less-loader：Getting started | Less.js

然后发现不能用别名'@'，搜了一下发现还需要types-node，就又install了一个

 types-node：GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.

一、安装

# vue-router
pnpm install vue-router

#less less-loader
pnpm install less less-loader -D

#types-node
pnpm install @type/node -D

二、配置

1.配置别名

打开tsconfig.json，代码如下：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "_c/*": ["src/components/*"]
    }
  }
}

打开vite.config.ts 

resolve: {
  alias: {
    '@': resolve(__dirname, 'src'),
    '_c': resolve(__dirname, 'src/components')
  }
},

2.配置router

src下创建router目录

因为准备搞动态路由模块化，所以目录中创建index.ts和routes.ts

创建一个

// routes.ts
import HelloWorld from '_c/HelloWorld.vue'
import {RouteRecordRaw} from "vue-router";

export let staticRoutes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: HelloWorld
    },
]

// index.ts
import {createRouter, createWebHashHistory} from "vue-router";

// 导入routes
import {staticRoutes} from './routes';

const router = createRouter({
    history: createWebHashHistory(),
    routes: staticRoutes
})
export default router

运行并访问√

---

总结

在tsconfig.json和vite.config.ts中都要进行别名配置