vite vue3 ts配置

最新推荐文章于 2025-03-16 17:49:02 发布

Victor.IT

最新推荐文章于 2025-03-16 17:49:02 发布

阅读量661

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/lichaoqun678/article/details/129143411

版权

本文介绍了如何使用npm,yarn或pnpm安装Vite，配置@别名，安装VueRouter以及创建基本路由。同时，讲解了在项目中安装less和less-loader的过程，以及解决TS导入JS文件时可能出现的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装vite

使用npm

npm create vite@latest

使用yarn

yarn create vite

使用pnpm

pnpm create vite

配置@路径

1、安装path插件

npm  install  path  --save

2、在vite.config.ts中导入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname,'./src')
    }
  }
})

3、在tsconfig.json中添加

"compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "paths": {
      "@": ["./src"],
      "@/*":["./src/*"]
    }
  },

安装router

npm i vue-router -D

在src目录下新建router目录,并新建index.js文件

//1.从VueRouter中导入需要的函数模块
import {createRouter, createWebHashHistory } from 'vue-router'
// 2.导入 HelloWorld.vue 组件
const routes = [
  { path: '/', component: () => import('../components/HelloWorld.vue')}
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

//导出router
export default router

在main.ts文件中把router挂载上去

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index.js'; //导入router配置文件

const app = createApp(App);
app.use(router); //挂载router
app.mount('#app');

ps:如果在ts文件中导入js报错需配置tsconfig.json
“noImplicitAny”: false

最后在app.vue中使用

<template>
	<router-view /> //使用的router-view
</template>

安装less

 npm install less less-loader --save-dev