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

news2024/10/5 20:18:26

❗️❗️❗️❗️ 写在最前: 本文是根据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: 1px
    presetRemToPx({
      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')
      }
    }
  }
})