首页 编程相关 正文
我要发布

Vite + Vue + TypeScript 项目搭建总结

编程相关
2025-12-13 0 534

1. 初始项目

官网地址：Vite | 下一代的前端工具链

1.1 项目搭建

pnpm create vite

然后按照提示操作，这里选择的是 Vue + TypeScript，生成的目录结构如下 

├── .vscode
│   └── extensions.json
├── public
│   └── vite.svg
├── src
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── .gitignore
├── README.md
├── index.html
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
  1. .vscode/extensions.json：用来配置推荐安装的 VSCode 插件
  2. public/vite.svg：网站图标，可自定义
  3. src/：存放项目源代码

    1. assets/：存放静态资源，如图片、字体等
    2. components/：存放公共组件
    3. App.vue，根组件
    4. main.ts：入口 TypeScript 文件
    5. vite-env.d.ts：Vite 环境变量
  4. .gitignore：指定被 Git 忽略的文件或文件夹
  5. README.md：描述项目的主要信息
  6. index.html：入口 HTML 文件
  7. package.json：项目的依赖列表和工具配置信息
  8. tsconfig.app.json：定义项目中其他文件的 TypeScript 编译规则
  9. tsconfig.json：tsconfig.node.json和tsconfig.app.json最终会被引入到这个文件中
  10. tsconfig.node.json：专门用来配置vite.config.ts文件的编译规则
  11. vite.config.ts：Vite 配置文件

1.2 配置

官网地址：配置 Vite | Vite 官方中文文档

修改vite.config.ts配置文件

1.2.1 服务器配置

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

export default defineConfig({
 plugins: [vue()],
 server: { port: 3000, proxy: { \'/api\': \'http://localhost:8080\' } },
});

1.2.2 别名

下载@types/node依赖 

pnpm install @types/node

添加别名 

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

export default defineConfig({
 resolve: { alias: { \'@\': resolve(__dirname, \'src\') } },
 plugins: [vue()],
 server: { port: 3000, proxy: { \'/api\': \'http://localhost:8080\' } },
});

修改tsconfig.app.json，添加别名映射 

{
 \"compilerOptions\": {
  \"composite\": true, // 是否编译构建引用项目
  \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.app.tsbuildinfo\", // 指定文件用来存储增量编译信息
  \"target\": \"ES2020\", // 用于指定编译之后的版本目标
  \"useDefineForClassFields\": true, // 改变类属性声明的行为
  \"module\": \"ESNext\", // 指定要使用的模块标准
  \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"], // 指定要包含在编译中的库文件
  \"skipLibCheck\": true, // 跳过声明文件的类型检查
  /* Bundler mode */
  \"moduleResolution\": \"bundler\", // 模块解析策略
  \"allowImportingTsExtensions\": true, // 允许在非 TypeScript 文件中导入 .ts 或 .tsx 文件
  \"resolveJsonModule\": true, // 解析 JSON 模块
  \"isolatedModules\": true, // 是否将每个文件作为单独的模块
  \"moduleDetection\": \"force\", // 强制 TypeScript 将所有文件视为模块
  \"noEmit\": true, // 不生成编译文件
  \"jsx\": \"preserve\", // 指定 JSX 代码用于的开发环境
  /* Linting */
  \"strict\": true, // 是否启动所有类型检查
  \"noUnusedLocals\": true, // 检查是否有定义但是没有使用的变量
  \"noUnusedParameters\": true, // 检查是否有在函数体中没有使用的参数
  \"noFallthroughCasesInSwitch\": true, // 检查 Switch 中是否有 Case 没有使用 break 跳出
  /* Alias */
  \"baseUrl\": \".\", // 设置解析非相对模块名称的基本目录
  \"paths\": { \"@/*\": [\"src/*\"] } // 设置模块名称到基于 baseUrl 的路径映射
 },
 \"include\": [\"src/**/*.ts\", \"src/**/*.tsx\", \"src/**/*.vue\"] // 指定要编译的路径列表
}

2. UnoCSS

官网地址：UnoCSS: The instant on-demand Atomic CSS engine

2.1 安装

pnpm add -D unocss

安装插件 

import { defineConfig } from \'vite\';
import vue from \'@vitejs/plugin-vue\';
import { resolve } from \'path\';
import UnoCSS from \'unocss/vite\';
export default defineConfig({
 resolve: { alias: { \'@\': resolve(__dirname, \'src\') } },
 plugins: [vue(), UnoCSS()],
 server: { port: 3000, proxy: { \'/api\': \'http://localhost:8080\' } },
});

根目录下创建uno.config.ts文件 

import { defineConfig } from \'unocss\';
export default defineConfig({
 // ...UnoCSS options
});

添加virtual:uno.css到主入口，即main.ts文件 

import { createApp } from \'vue\';
import App from \'./App.vue\';
import \'virtual:uno.css\';
createApp(App).mount(\'#app\');

2.2 预设

  1. Uno preset：默认预设，目前相当于@unocss/preset-wind

    • Wind preset：Tailwind CSS / Windi CSS 兼容预设，继承了@unocss/preset-mini
    • Mini preset：基础预设，只包含最基本的工具
  2. Icons preset：使用纯 CSS 的任意图标，图标数据源为 Iconify

    • pnpm add -D @iconify-json/ic
    • pnpm add -D @iconify-json/mdi
    • pnpm add -D @iconify-json/line-md
    • pnpm add -D @iconify-json/twemoji
    • …
  3. Attributify preset：为其他预设启用属性模式
  4. Typography preset：提供一组可以用于为原生 HTML 添加排版默认值的文本类
  5. Tagify preset：为其他预设启用标签化模式

修改uno.config.ts文件 

import {
 defineConfig,
 presetAttributify,
 presetIcons,
 presetTagify,
 presetTypography,
 presetUno,
} from \'unocss\';

export default defineConfig({
 presets: [
  presetUno(),
  presetIcons(),
  presetAttributify(),
  presetTypography(),
  presetTagify(),
 ],
});

3. unplugin-auto-import

GitHub 地址：unplugin/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup 

pnpm i -D unplugin-auto-import

安装插件 

import { defineConfig } from \'vite\';
import vue from \'@vitejs/plugin-vue\';
import { resolve } from \'path\';
import UnoCSS from \'unocss/vite\';
import AutoImport from \'unplugin-auto-import/vite\';
export default defineConfig({
 resolve: { alias: { \'@\': resolve(__dirname, \'src\') } },
 plugins: [
  vue(),
  UnoCSS(),
  AutoImport({
   imports: [\'vue\', \'vue-router\', \'pinia\'],
   dirs: [],
   vueTemplate: true,
  }),
 ],
 server: { port: 3000, proxy: { \'/api\': \'http://localhost:8080\' } },
});

当安装了 TypeScript 时，会应用默认配置，生成相关的./auto-imports.d.ts文件，即根目录下，但可以看到在tsconfig.app.json里编译路径列表只包含了src/下的文件，因此要手动添加进去，或者修改配置自定义生成文件路径 

{
 \"compilerOptions\": {
  \"composite\": true, // 是否编译构建引用项目
  \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.app.tsbuildinfo\", // 指定文件用来存储增量编译信息
  \"target\": \"ES2020\", // 用于指定编译之后的版本目标
  \"useDefineForClassFields\": true, // 改变类属性声明的行为
  \"module\": \"ESNext\", // 指定要使用的模块标准
  \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"], // 指定要包含在编译中的库文件
  \"skipLibCheck\": true, // 跳过声明文件的类型检查
  /* Bundler mode */
  \"moduleResolution\": \"bundler\", // 模块解析策略
  \"allowImportingTsExtensions\": true, // 允许在非 TypeScript 文件中导入 .ts 或 .tsx 文件
  \"resolveJsonModule\": true, // 解析 JSON 模块
  \"isolatedModules\": true, // 是否将每个文件作为单独的模块
  \"moduleDetection\": \"force\", // 强制 TypeScript 将所有文件视为模块
  \"noEmit\": true, // 不生成编译文件
  \"jsx\": \"preserve\", // 指定 JSX 代码用于的开发环境
  /* Linting */
  \"strict\": true, // 是否启动所有类型检查
  \"noUnusedLocals\": true, // 检查是否有定义但是没有使用的变量
  \"noUnusedParameters\": true, // 检查是否有在函数体中没有使用的参数
  \"noFallthroughCasesInSwitch\": true, // 检查 Switch 中是否有 Case 没有使用 break 跳出
  /* Alias */
  \"baseUrl\": \".\", // 设置解析非相对模块名称的基本目录
  \"paths\": { \"@/*\": [\"src/*\"] } // 设置模块名称到基于 baseUrl 的路径映射
 },
 // 指定要编译的路径列表
 \"include\": [
  \"src/**/*.ts\",
  \"src/**/*.tsx\",
  \"src/**/*.vue\",
  \"auto-imports.d.ts\"
 ]
}

4. unplugin-vue-components

GitHub 地址：unplugin/unplugin-vue-components: ?? On-demand components auto importing for Vue 

pnpm i unplugin-vue-components -D

安装插件 

import { defineConfig } from \'vite\';
import vue from \'@vitejs/plugin-vue\';
import { resolve } from \'path\';
import UnoCSS from \'unocss/vite\';
import AutoImport from \'unplugin-auto-import/vite\';
import Components from \'unplugin-vue-components/vite\';
export default defineConfig({
 resolve: { alias: { \'@\': resolve(__dirname, \'src\') } },
 plugins: [
  vue(),
  UnoCSS(),
  AutoImport({
   imports: [\'vue\', \'vue-router\', \'pinia\'],
   dirs: [],
   vueTemplate: true,
  }),
  Components(),
 ],
 server: { port: 3000, proxy: { \'/api\': \'http://localhost:8080\' } },
});

和 unplugin-auto-import 一样，会应用默认配置，生成相关的./components.d.ts文件，同样将其加入到编译路径列表 

{
 \"compilerOptions\": {
  \"composite\": true, // 是否编译构建引用项目
  \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.app.tsbuildinfo\", // 指定文件用来存储增量编译信息
  \"target\": \"ES2020\", // 用于指定编译之后的版本目标
  \"useDefineForClassFields\": true, // 改变类属性声明的行为
  \"module\": \"ESNext\", // 指定要使用的模块标准
  \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"], // 指定要包含在编译中的库文件
  \"skipLibCheck\": true, // 跳过声明文件的类型检查
  /* Bundler mode */
  \"moduleResolution\": \"bundler\", // 模块解析策略
  \"allowImportingTsExtensions\": true, // 允许在非 TypeScript 文件中导入 .ts 或 .tsx 文件
  \"resolveJsonModule\": true, // 解析 JSON 模块
  \"isolatedModules\": true, // 是否将每个文件作为单独的模块
  \"moduleDetection\": \"force\", // 强制 TypeScript 将所有文件视为模块
  \"noEmit\": true, // 不生成编译文件
  \"jsx\": \"preserve\", // 指定 JSX 代码用于的开发环境

  /* Linting */
  \"strict\": true, // 是否启动所有类型检查
  \"noUnusedLocals\": true, // 检查是否有定义但是没有使用的变量
  \"noUnusedParameters\": true, // 检查是否有在函数体中没有使用的参数
  \"noFallthroughCasesInSwitch\": true, // 检查 Switch 中是否有 Case 没有使用 break 跳出
  /* Alias */
  \"baseUrl\": \".\", // 设置解析非相对模块名称的基本目录
  \"paths\": { \"@/*\": [\"src/*\"] } // 设置模块名称到基于 baseUrl 的路径映射
 },
 // 指定要编译的路径列表
 \"include\": [
  \"src/**/*.ts\",
  \"src/**/*.tsx\",
  \"src/**/*.vue\",
  \"auto-imports.d.ts\",
  \"components.d.ts\"
 ]
}

5. Vue Router

官网地址：Vue Router | Vue.js 的官方路由 

pnpm add vue-router@4

创建src/router/index.ts文件 

import { createRouter, createWebHistory } from \'vue-router\';

const routes = [{ path: \'/\', component: () => import(\'@/App.vue\') }];

const router = createRouter({
 history: createWebHistory(),
 routes,
 scrollBehavior(_to, _from, savedPosition) {
  return savedPosition ? savedPosition : { left: 0, top: 0 };
 },
});

export default router;

将src/router/index.ts添加到主入口 

import { createApp } from \'vue\';
import App from \'./App.vue\';
import router from \'./router\';
import \'virtual:uno.css\';
createApp(App).use(router).mount(\'#app\');

6. Pinia

官网地址：Pinia | The intuitive store for Vue.js 

pnpm install pinia

创建一个 pinia 实例（根 store）并将其传递给应用 

import { createApp } from \'vue\';
import App from \'./App.vue\';
import router from \'./router\';
import { createPinia } from \'pinia\';
import \'virtual:uno.css\';
createApp(App).use(router).use(createPinia()).mount(\'#app\');

创建一个src\\pinia\\index.ts文件 

export const useCounterStore = defineStore(\'counter\', {
 state: () => ({ count: 0 }),
 getters: {
  double: (state) => state.count * 2,
 },
 actions: {
  increment() {
   this.count++;
  },
 },
});

7. Axios

官网地址：Axios 

pnpm install axios

创建src\\request\\index.ts文件，自定义一个 Axios 实例 

import axios from \'axios\';
const request = axios.create({
 timeout: 5000,
 headers: { \'Content-Type\': \'application/json\', Accept: \'application/json\' },
});
// 请求拦截器
request.interceptors.request.use(
 (config) => {
  return config;
 },
 (error) => {
  return Promise.reject(error);
 }
);
// 响应拦截器
request.interceptors.response.use(
 (response) => {
  return response;
 },
 (error) => {
  if (error.response) {
   switch (error.response.status) {
    case 401:
     // 未认证
     break;
    case 403:
     // 未授权
     break;
    case 404:
     // 资源未找到
     break;
    case 408:
     // 超时
     break;
    case 500:
     // 服务器错误
     break;
    default:
     // 未知错误
     break;
   }
  }
  return Promise.reject(error);
 }
);
export default request;

8. Element Plus（可选）

官网地址：一个 Vue 3 UI 框架 | Element Plus

自动导入 

import { defineConfig } from \'vite\';
import vue from \'@vitejs/plugin-vue\';
import { resolve } from \'path\';
import UnoCSS from \'unocss/vite\';
import AutoImport from \'unplugin-auto-import/vite\';
import Components from \'unplugin-vue-components/vite\';
import { ElementPlusResolver } from \'unplugin-vue-components/resolvers\';
export default defineConfig({
 resolve: { alias: { \'@\': resolve(__dirname, \'src\') } },
 plugins: [
  vue(),
  UnoCSS(),
  AutoImport({
   imports: [\'vue\', \'vue-router\', \'pinia\'],
   dirs: [\'src/router\', \'src/request\'],
   vueTemplate: true,
   resolvers: [ElementPlusResolver()],
  }),
  Components({
   resolvers: [ElementPlusResolver()],
  }),
 ],
 server: { port: 3000, proxy: { \'/api\': \'http://localhost:8080\' } },
});
收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

申明：本文由第三方发布，内容仅代表作者观点，与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，也不代表本网对其真实性负责。

左子网 编程相关 Vite + Vue + TypeScript 项目搭建总结 https://www.zuozi.net/36693.html

vite.config.ts配置
上一篇： vite.config.ts配置
Wireshark零基础使用教程（超详细）
下一篇： Wireshark零基础使用教程（超详细）
常见问题

发货方式是什么？

  • 1、自动：拍下后，点击（下载）链接即可下载；2、手动：拍下后，联系卖家发放即可或者联系官方找开发者发货。
查看详情

交易周期是多久呢？

  • 1、源码默认交易周期：手动发货商品为1-3天，并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放，如遇纠纷无限期延长收款金额直至纠纷解决或者退款！；
查看详情

能退款么？

  • 1、描述：源码描述(含标题)与实际源码不一致的（例：货不对板）； 2、演示：有演示站时，与实际源码小于95%一致的（但描述中有”不保证完全一样、有变化的可能性”类似显著声明的除外）； 3、发货：不发货可无理由退款； 4、安装：免费提供安装服务的源码但卖家不履行的； 5、收费：价格虚标，额外收取其他费用的（但描述中有显著声明或双方交易前有商定的除外）； 6、其他：如质量方面的硬性常规问题BUG等。 注：经核实符合上述任一，均支持退款，但卖家予以积极解决问题则除外。
查看详情

注意事项

  • 1、左子会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在左子上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于左子介入快速处理。
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
左子网

分享最新WordPress教程共同学习，共同进步，共同成长！

QQ交流群
左子网

QQ交流群

您的支持，是我们最大的动力！ https://qm.qq.com/q/iR7Nj0TrOg
热门文章
热门标签
随机推荐
热门评论
终身VIP会员限时钜惠
首页 源码 菜单 案例 我的