从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios

最新推荐文章于 2025-05-22 09:01:29 发布

微微上扬的嘴角丶

最新推荐文章于 2025-05-22 09:01:29 发布

阅读量1.2k

点赞数 8

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript vue typescript

本文链接：https://blog.youkuaiyun.com/on1yLX/article/details/140960690

项目同步git：vue3+vite+ts+pinia+vant+less: 空白的vue3架子，使用vant ui，适用于移动端一类的开发。架子没有任何页面，基本无需删除任何代码，拉取便可直接用于开发。如果有帮助到各位朋友还请点个小心心哦

觉得有帮助的小伙伴请点下小心心哦

为避免赘述，过于基础的点会直接省略或贴图，比如创建文件夹/文件的路径/路由一类

配置相应功能，也尽量只贴相关代码，并不代表整个文件内容

我会尽量把每一步都记录下来，让跟随文档操作的朋友也能还原项目

项目不尽完美，但是主体功能应该都可以有所参考

一.本地初始环境

二.使用vite脚手架，创建vue3+ts

yarn create vite

输入项目名，回车确认

选择Vue和TypeScript

文件目录如下，项目创建成功！

三.启动项目：根据提示进入项目运行项目，或自行使用编码器输入指令进行启动

yarn    // 安装依赖
yarn dev // 运行项目

浏览器打开地址，运行成功！

四.必备依赖

This package contains type definitions for Node.js (Node.js — Run JavaScript Everywhere)

yarn add @types/node -S -D

五.配置路径别名@

1.位置：直接改写vite.config.ts -- 顺便就添加alias

// vite.config.ts

import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

function pathResolve(dir: string) {
  return resolve(process.cwd(), ".", dir);
}

// https://vitejs.dev/config/
export default () => {
  return {
    resolve: {
      alias: [
        {
          find: "@",
          replacement: pathResolve("src"),
        },
        {
          find: "views",
          replacement: pathResolve("src/views"),
        },
      ],
    },
    plugins: [vue()],
  };
};

2.位置：tsconfig.json -- 修改baseUrl及paths

// tsconfig.json
{

  "compilerOptions": {

     ......

　 "baseUrl": "./",

    "paths": {

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

      "views/*": ["src/views/*"],

      "components/*": ["src/components/*"],

      "assets/*": ["src/assets/*"]

    }

  },

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

  "references": [{ "path": "./tsconfig.node.json" }]

}

六.配置vue-router

yarn add vue-router -S

推荐一个很好的插件nprogress【进度条】

yarn add @types/nprogress nprogress -D

main.ts引入router

// main.ts

import { createApp } from 'vue'
import './style.css'

import App from './App.vue'
import router from "./router";

const app = createApp(App as any);
app.use(router)

app.mount('#app')

src下创建router文件夹，项目往往需要模块化，所以代码尽量不要杂糅在一起

/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import NProgress from "nprogress";
import "nprogress/n