搭建一个vue3 + vite + ts项目

创建项目

npm install -g yarn // vite项目创建方式有很多，我们采用yarn，如果没有则需要全局安装
yarn create vite my-vue-app --template vue-ts // 创建vite项目，并指定采用vue3+ts的项目模板
cd my-vue-app
yarn // 安装依赖
yarn dev // 运行

打开项目后发现 main.ts 引入 App.vue 报错，在项目生成的vite-env.d.ts文件中，默认是没有配置的，加入如下代码可以解决这个报错问题

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

配置路由

yarn add vue-router

新建src/router/index.ts

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  // history: createWebHashHistory(),  // hash 模式
  history: createWebHistory(), // history 模式
  routes,
})

// 全局路由守卫
router.beforeEach((to, from, next)=>{
  console.log(to, from)
  if (to.meta.title) {
    document.title = `${to.meta.title}`;
  }
  next()
})

router.afterEach((to, from)=>{
  console.log('afterEach')
})

export default router;

新建src/router/routes.ts

import { RouteRecordRaw } from 'vue-router';

const routes:RouteRecordRaw[] = [
  {
    path: "/",
    name: "index",
    meta: {
      title: "首页",
    },
    component: () => import("../pages/homePage/index.vue")
  },
]
export default routes;

在src/main.js入口文件中注册使用路由

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

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

在src/App.vue文件中使用<router-view/>

<template>
  <router-view />
</template>

less安装以及使用

npm install less --save-dev
npm install less-loader --save-dev

引入 Element-plus

npm install element-plus --save

在 main.js 文件中引入 element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

vite.config.ts 配置

npm install path
npm install process
// 先安装以上几个插件

import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
function pathResolve(dir: string): string {
    return resolve(process.cwd(), '.', dir)
};
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': pathResolve('src')
        }
    },
    server: {
        host: '0.0.0.0', //ip地址
        port: 3006, //端口号
        open: true //启动后是否自动打开浏览器
    },
})

启动项目后报错如下；

Cannot find module 'node:fs';

这个错误通常是由于Vite未能正确地加载Node.js的内置模块引起的。以下是一些解决方法：

1. 确保你的Node.js版本是最新版本。你可以通过运行node -v命令来检查当前安装的Node.js版本。
2. 尝试清除npm缓存并重新安装依赖项。可以运行以下命令：

npm cache clean --force  
npm install

1. 如果仍然存在问题，可以尝试删除node_modules文件夹，重新运行npm install命令来重新安装依赖项。
2. 如果你使用的是Windows操作系统，可以尝试将文件系统（fs）的代码复制到你的项目中，并在你的代码中引用它。

经检查，node 版本14.x,最新是 18.x,升级 node 至18.x 后重新启动项目，报错如下：

TypeError: vite.createFilter is not a function

这个错误通常是由于 Vite 版本与项目所需的 Vite 版本不兼容。确保你的Vite版本是最新的，并且与你的项目所需的版本匹配。你可以通过运行以下命令更新Vite：

npm install -g @vitejs/cli

成功重新启动：