Vite + Vue + TypeScript 项目搭建总结

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

pnpm install 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' } },
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/882257.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【VUE3.0】动手做一套像素风的前端UI组件库---先导篇

【VUE3.0】动手做一套像素风的前端UI组件库---先导篇

系列文章目录 【VUE3.0】动手做一套像素风的前端UI组件库—Button【VUE3.0】动手做一套像素风的前端UI组件库—Radio 目录 系列文章目录引言准备素材字体鼠标手势图 创建vue3项目构建项目1. 根据命令行提示选择如下：2. 进入项目根目录下载依赖并启动。3. 设置项目s…
阅读更多...
MySQL函数介绍--日期与时间函数（二）

MySQL函数介绍--日期与时间函数（二）

我相信大家在学习各种语言的时候或多或少听过我们函数或者方法这一类的名词，函数在计算机语言的使用中可以说是贯穿始终，那么大家有没有思考过到底函数是什么？函数的作用又是什么呢？我们为什么要使用函数？其实&#xf…
阅读更多...
什么是上层封禁海外流量

什么是上层封禁海外流量

上层封禁海外流量（Upper-layer Blocking of Overseas Traffic）是一种网络安全策略，旨在通过在网络传输的上层进行流量控制和过滤，从而阻止来自海外的恶意流量或不必要的访问。这一措施主要用于防止分布式拒绝服务（DDoS…
阅读更多...
【AIGC】ChatGPT RAG提取文档内容，高效制作PPT、论文

【AIGC】ChatGPT RAG提取文档内容，高效制作PPT、论文

目录 一、理解 RAG 技术 二、利用 ChatGPT 的 RAG 技术提取文档内容 三、高效制作 PPT 四、高效撰写论文 五、最佳实践与建议 六、工具推荐 随着人工智能生成内容（AIGC）的快速发展，利用先进的技术工具如 ChatGPT 的 RAG（Ret…
阅读更多...
【深度学习】（3）--损失函数

【深度学习】（3）--损失函数

文章目录 损失函数一、L1Loss损失函数1. 定义2. 优缺点3. 应用 二、NLLLoss损失函数1. 定义与原理2. 优点与注意3. 应用 三、MSELoss损失函数1. 定义与原理2. 优点与注意3. 应用 四、BCELoss损失函数1. 定义与原理2. 优点与注意3. 应用 五、CrossEntropyLoss损失函数1. 定义与原…
阅读更多...
【觅图网-注册安全分析报告-无验证方式导致安全隐患】

【觅图网-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击，存在如下安全问题： 1. 暴力破解密码，造成用户信息泄露 2. 短信盗刷的安全问题，影响业务及导致用户投诉 3. 带来经济损失，尤其是后付费客户，风险巨大，造…
阅读更多...
Java集合（Map篇）

Java集合（Map篇）

一.Map a.使用Map i.键值（key-value）映射表的数据结构，能高效通过key快速查找value（元素）。 ii.Map是一个接口，最常用的实现类是HashMap。 iii.重复放入k-v不会有问题，但是一个…
阅读更多...
Rasa对话模型——做一个语言助手

Rasa对话模型——做一个语言助手

1、Rasa模型 1.1 模型介绍 Rasa是一个用于构建对话 AI 的开源框架，主要用于开发聊天机器人和语音助手。Rasa 提供了自然语言理解（NLU）和对话管理（DM）功能，使开发者能够创建智能、交互式的对话系统。 1.2…
阅读更多...
【计算机网络】计算机网络基础二

【计算机网络】计算机网络基础二

🍑个人主页：Jupiter. 🚀 所属专栏：Linux从入门到进阶 欢迎大家点赞收藏评论😊 目录 以太网的通信原理令牌环网的通信原理网络传输基本流程 数据包封装和分用 网络传输流程图 局域网通信（同一个网段内的两台…
阅读更多...
Java基础笔记1】Java基础语法

Java基础笔记1】Java基础语法

目录 一、Java简介 二、JDK和Java初体验 三、配置环境变量 四、IDEA快捷键 五、Java语法基础 1. 注释 2. 字面量 3. 变量 4. 关键字和标识符 5. 变量详解 a. 数值数据在计算机中的存储​编辑 b. 文本、图片、音频等数据在计算机中的存储 c. 八进制和十六进制 6. 数据类型 a. …
阅读更多...
Java多线程(1)—线程基础

Java多线程(1)—线程基础

一、关于线程 1.1 简介 计算机线程（Thread）是操作系统能够进行运算调度的最小单位。线程的优势在于提高了程序的效率和响应能力，尤其在处理 I/O 操作或多任务时。多线程编程能够充分利用多核处理器的计算能力，达到更高的性能。 …
阅读更多...
electron-updater实现electron全量版本更新

electron-updater实现electron全量版本更新

在 Electron 应用中使用 electron-updater 来实现自动更新功能时，通常你会在一个专门的模块或文件中管理更新逻辑。如果你想要使用 ES6 的 import 语法来引入 electron-updater，你需要确保你的项目已经配置好了支持 ES6 模块的构建工具（如 We…
阅读更多...
【Fastapi】参数获取，json和query

【Fastapi】参数获取，json和query

【Fastapi】参数获取，json和query 前言giteegithub query形式json传递同步方法使用json 前言 花了半个月的时间看了一本小说，懈怠了…今天更新下fastapi框架的参数获取 gitee https://gitee.com/zz1521145346/fastapi_frame.git github https://git…
阅读更多...
828华为云征文｜Flexus云服务器X实例实践：部署Alist文件列表程序

828华为云征文｜Flexus云服务器X实例实践：部署Alist文件列表程序

828华为云征文｜Flexus云服务器X实例实践：部署Alist文件列表程序 引言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 主要使用场景 二、购买Flexus云服务器X实例2.1 购买规格参考2.2 查看Flexus云服务器X实例状态 三、远程连接Flexus云服务…
阅读更多...
python是什么语言写的

python是什么语言写的

Python是一种计算机程序设计语言。是一种面向对象的动态类型语言。现今Python语言很火，可有人提问，这么火的语言它的底层又是什么语言编写的呢？ python是C语言编写的，它有很多包也是用C语言写的。 所以说，C语言还是很…
阅读更多...
二分查找算法(5) _山脉数组的峰顶索引

二分查找算法(5) _山脉数组的峰顶索引

个人主页：C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 二分查找算法(5) _山脉数组的峰顶索引 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记，欢迎大家在评论区交流讨论💌…
阅读更多...
二分算法——优选算法

二分算法——优选算法

个人主页：敲上瘾-CSDN博客 个人专栏：游戏、数据结构、c语言基础、c学习、算法 本章我们来学习的是二分查找算法，二分算法的应用非常广泛，不仅限于数组查找，还可以用于解决各种搜索问题、查找极值问题等。在数据结构和算…
阅读更多...
海外仓商品退换货管理：选择系统为何至关重要？

海外仓商品退换货管理：选择系统为何至关重要？

随着跨境电商的蓬勃发展，退换货问题成为了卖家们不得不面对的挑战。退换货处理不仅繁琐，而且对效率和服务质量的要求极高。因此，许多卖家选择海外仓来简化退换货流程。然而，海外仓在处理退换货时同样面临诸多难题，涉及…
阅读更多...
openeuler 22.03 lts sp4 使用 kubeadm 部署 k8s-v1.28.2 高可用集群

openeuler 22.03 lts sp4 使用 kubeadm 部署 k8s-v1.28.2 高可用集群

文章目录 [toc]废话篇这篇文章什么时候写的为什么是 openeuler为什么是 22.03 lts sp4高可用架构题外话 干活篇环境介绍系统初始化相关关闭防火墙关闭 selinux关闭 swap开启内核模块开启模块自动加载服务 sysctl 内核参数调整清空 iptables 规则安装各种依赖和工具修改 .bashrc…
阅读更多...
【uni-app】小兔鲜项目-基础架构-请求和上传文件拦截器

【uni-app】小兔鲜项目-基础架构-请求和上传文件拦截器

注意事项 uni.request 请求封装 请求和上传文件拦截器 uniapp 拦截器： uni.addInterceptor 接口说明：接口文档 实现需求 拼接基础地址设置超时时间添加请求头标识添加 token 参考代码 // src/utils/http.ts// 请求基地址 const baseURL https://pca…
阅读更多...
最新文章

Copyright @ 2022~2023