栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Python

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

Python 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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 = [
    {
        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中都要进行别名配置

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1005346.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号