从零构建vue3+ts+vite项目打包及项目依赖配置

❗️❗️❗️❗️ 写在最前: 本文是根据B站作者 月光分层 视频vue+ts 工程化配置以及作者笔记稍作整理
💖💖作者B站地址https://space.bilibili.com/14110850
💖💖视频教程地址vue+ts 工程化配置
💖💖作者微信：专注前端技术分享,技术讨论加V:18111628033

接上一篇：从零构建vue3+ts+prettier+stylelint+husky+Lint-staged+Commitlint项目

开始配置之前：清空项目文件

一、路由基础配置

官网https://router.vuejs.org/zh/

1. `router/index.ts` 路由配置

import type { App } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'// 定义路由规则
const routes: RouteRecordRaw[] = [{path: '/',redirect: '/home'},{path: '/home',component: () => import('@/views/home/index.vue')},{path: '/about',component: () => import('@/views/about/index.vue')}
]// 创建路由实例
const router = createRouter({history: createWebHistory(),routes
})// 为 app 提供路由
export const useRouter = (app: App) => {app.use(router)
}

2. `main.ts` 注册路由

import { createApp } from 'vue'
import App from './App.vue'
import { useRouter } from './router'const app = createApp(App)// 使用路由
useRouter(app)app.mount('#app')

3. `App.vue` 提供路由出口

<template><div><router-link to="/home">home</router-link><router-link to="/about">about</router-link><router-view></router-view></div>
</template><script setup lang="ts"></script>

二、`pinia`仓库配置

官网https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

1. 持久化配置安装

pnpm i pinia-plugin-persistedstate

pinia-plugin-persistedstate: pinia持久化插件可以配置储存方式和指定储存内容

2. `store/index.ts`

// createPinia函数并不需要显示引入 配置有自动导入
// 持久化pinia插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// 创建pinia实例
const pinia = createPinia()
// 使用持久化插件
pinia.use(piniaPluginPersistedstate)
// 函数式注入pinia
const usePinia = (app) => {app.use(pinia)
}export default usePinia

3. 测试仓库 `store/app.ts` 使用hooks语法

// 引入defineStore 创建pinia仓库
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'// 导出app仓库函数
export const useAppStore = defineStore('app',() => {// 数据const num = ref(20)// 改变数据函数const addNum = () => {num.value += 1}// 计算熟悉const doubleNum = computed(() => num.value * 2)// 把仓库数据和函数return出去return {num,addNum,doubleNum}},{// 持久化配置persist: {// sessionStorage存储持久化数据storage: sessionStorage,paths: ['num']}}
)

4. `main.ts` 注册仓库

// ...
import usePinia from '@/store'
const app = createApp(App)// 使用pinia
usePinia(app)app.mount('#app')

5. 使用仓库测试效果 `views/home/index.vue`

<template><div><h1>Home</h1><h3>{{ num }}</h3><h3>{{ doubleNum }}</h3><button @click="appStore.addNum()">num+1</button></div>
</template><script setup lang="ts">
import { storeToRefs } from 'pinia'import { useAppStore } from '@/store/app'const appStore = useAppStore()const { num, doubleNum } = storeToRefs(appStore)
</script>

三、配置`scss`

1. 安装

pnpm add -D scss

2. `main.ts` 全局引入

// 全局样式引入
import '@/styles/index.scss'

3. `vite.config.ts` 全局注入样式变量和`mixin`

// https://vitejs.dev/config/
export default defineConfig({// ...css: {preprocessorOptions: {// 全局样式变量预注入scss: {additionalData: `@use "./src/styles/variables.scss" as *;@use "./src/styles/mixin.scss" as *;`,javascriptEnabled: true}}}
})

四、`unocss`使用

在这里插入图片描述

官网https://unocss.dev/guide/

1. 安装

pnpm i unocss @iconify-json/ep @unocss/preset-rem-to-px @unocss/transformer-directives -D

unocss 核心库

@iconify-json/ep 是 Element Plus 的图标库 https://icones.js.org/ 网站里面找

@unocss/preset-rem-to-px 把unocss自带的rem转为px

@unocss/transformer-directives 可以使用@apply @screen theme函数

icon官网https://unocss.dev/presets/icons

博客https://blog.csdn.net/qq_42618566/article/details/135680388

2. `vite.config.ts` 配置

// unocss vite插件配置
import UnoCSS from 'unocss/vite'// https://vitejs.dev/config/
export default defineConfig({// ...plugins: [// ...UnoCSS(),],
})

3. 在根目录新建`uno.config.ts`

// uno.config.ts// 预设rem转px
import presetRemToPx from '@unocss/preset-rem-to-px'
// transformerDirectives 可以使用@apply @screen theme函数
import transformerDirective from '@unocss/transformer-directives'
import {defineConfig,presetAttributify,presetUno,transformerVariantGroup,presetIcons
} from 'unocss'export default defineConfig({presets: [presetAttributify(),presetUno(),// 现在mt-1会转换为margin-top: 1pxpresetRemToPx({baseFontSize: 4}),// 自动引入图标配置presetIcons({scale: 1.2,warn: true})],transformers: [transformerVariantGroup(), transformerDirective()],//  自定义配置项rules: [/** 以下官网规则可自定义转换 *//* 例如 m-1 转换为 margin:0.25rem */// [/^m-(\d+)$/, ([, d]) => ({margin: `${d / 4}rem`})],// [/^p-(\d+)$/, match => ({padding: `${match[1] / 4}rem`})],],// 自定义属性 一个属性可以对应多个unocss类值shortcuts: [{// 垂直水平居中'flex-center': 'flex items-center justify-center',// 放在最后'flex-end': 'flex items-center justify-end',// 垂直居中'flex-middle': 'flex items-center',// 分开两边'flex-between': 'flex items-center justify-between',// 竖着居中'flex-col-center': 'flex flex-col justify-center'}]
})

4. `main.ts` 全局配置

// eslint-disable-next-line import/no-unresolved
import 'virtual:uno.css' // uno.css

<template><div w200 h200 bg-coolGray flex-center gap-4><div w20 h20 bg-red></div><div w20 h20 bg-red></div><div w20 h20 bg-red></div>
</div>
</template>

5. 图标

i前缀-ep图库名:lock图标名称

<template><div i-ep:ice-drink></div><div i-ep:switch></div>
</template>

五、`gzip`压缩

当前端资源过大时，服务器请求资源会比较慢。前端可以将资源通过Gzip压缩使文件体积减少大概60%左右，压缩后的文件，通过后端简单处理，浏览器可以将其正常解析出来。

安装

pnpm i vite-plugin-compression -D

vite.config.ts配置

// 压缩gzip
import viteCompression from 'vite-plugin-compression'// https://vitejs.dev/config/
export default defineConfig({// ...plugins: [// ...viteCompression({verbose: true, // 默认即可disable: false, // 开启压缩(不禁用)，默认即可deleteOriginFile: false, // 删除源文件threshold: 10240, // 压缩前最小文件大小algorithm: 'gzip', // 压缩算法ext: '.gz' // 文件类型})],
})

效果图

在这里插入图片描述

六、打包进度

vite-plugin-progress 插件是一个在打包时展示进度条的插件，如果您觉得该插件对您的项目有帮助

插件网站https://www.npmjs.com/package/vite-plugin-progress

安装

pnpm i vite-plugin-progress -D

vite.config.ts配置

// 打包进度
import progress from 'vite-plugin-progress'// https://vitejs.dev/config/
export default defineConfig({// ...plugins: [// ...progress()],
})

7、自动重启

对config.js/config.ts等配置文件修改后重启

插件网站https://www.npmjs.com/package/vite-plugin-restart

安装

pnpm i vite-plugin-restart -D

vite.config.ts配置

// 自动重启
import ViteRestart from 'vite-plugin-restart'// https://vitejs.dev/config/
export default defineConfig({// ...plugins: [// ...ViteRestart({restart: ['*.config.[jt]s', '**/config/*.[jt]s', '*.config.cjs']})],
})

8、跨域配置

官网https://cn.vitejs.dev/config/server-options.html#server-proxy

vite.config.ts配置

// https://vitejs.dev/config/
export default defineConfig({server: {// 监听所有公共ip// host: '0.0.0.0', // 可在package.json中开启： "dev": "vite --host" 代替cors: true,port: 3300,proxy: {// 前缀'/api': {target: 'http://www.example.com',changeOrigin: true,// 前缀重写rewrite: (path: string) => path.replace(/^\/api/, '/api')}}}
})