从零构建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')}}}
})

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【计算机毕业设计】安卓054基于Android校园助手

【计算机毕业设计】安卓054基于Android校园助手

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
LAMP源码编译安装——CentOS7

LAMP源码编译安装——CentOS7

文章目录 LAMP是什么LAMP软件组件LinuxApacheMySQLPHP 源码安装Apache一、准备工作二、安装环境依赖包三、配置软件模块四、编译及安装五、优化配置文件路径六、添加httpd系统服务&#xff08;有两种方法&#xff09;方法一&#xff1a;方法二&#xff1a; 七、修改httpd 服务配…
阅读更多...
2024HBCPC：C Goose Goose Duck

2024HBCPC：C Goose Goose Duck

题目描述 Iris 有 n n n 个喜欢玩鹅鸭杀的朋友&#xff0c;编号为 1 ∼ n 1∼n 1∼n。 假期的时候&#xff0c;大家经常会在群里问有没有人玩鹅鸭杀&#xff0c;并且报出现在已经参与的人数。 但是每个人对于当前是否加入游戏都有自己的想法。 具体的来说&#xff0c;对于第…
阅读更多...
【Python音视频技术】用moviepy实现图文成片功能

【Python音视频技术】用moviepy实现图文成片功能

今天上班的时候看到有人群里问 图文成片怎么实现。 临时给我提供一点写作的灵感&#xff0c;趁着下班写一篇。这里用到 python的moviepy库&#xff0c; 之前文章介绍过。 大体思路&#xff1a;假定有4张图片&#xff0c;每张图片将在视频中展示2秒钟&#xff0c;并且图片会按照…
阅读更多...
公告：关于博主的重要通知

公告：关于博主的重要通知

大家好&#xff0c;我是博主夏目。 本期不分享知识&#xff0c;博主想说明一下博主的一些重要提示。 分享的内容&#xff0c;从不收费&#xff0c;也未向任何人进行收费。 意在分享知识&#xff0c;传播文化&#xff0c;结交更多志同道合的朋友。 截至目前&#xff0c;从未…
阅读更多...
如何选择一个AI大模型的私家炼丹炉

如何选择一个AI大模型的私家炼丹炉

随着计算机图形处理技术的不断进步&#xff0c;NVIDIA作为图形处理器&#xff08;GPU&#xff09;的领先制造商&#xff0c;其推出的RTX系列消费级显卡在性能和技术创新方面均引起了广泛关注。依托这些消费级显卡性能的突飞猛进&#xff0c;AI炼丹师们也有望将大模型训练、推理…
阅读更多...
《C++ Primer Plus》第十二章复习题和编程练习

《C++ Primer Plus》第十二章复习题和编程练习

目录 一、复习题二、编程练习 一、复习题 1. 假设String类有如下私有成员&#xff1a; // String 类声明 class String { private: char* str;int len;// ... };a. 下述默认构造函数有什么问题&#xff1f; String::String() { } // 默认构造函数b. 下述构造函数有什么问题…
阅读更多...
go语言函数之defer

go语言函数之defer

Go函数里面提供了defer关键字&#xff0c;可以注册多个延迟调用&#xff0c;这些调用以先进后出&#xff08;FILO&#xff09;的顺序在函数返回前被执行。这点有点类似java语言中异常处理中的的finaly子句&#xff0c;defer常用于保证一些资源最终一定能够得到回收和释放。 pa…
阅读更多...
VirtualBox+Ubuntu22.10+Docker+ROS2

VirtualBox+Ubuntu22.10+Docker+ROS2

Docker 拉取ros2镜像 docker pull osrf/ros:foxy-desktop 运行 docker run -it --nameros2 -p 50022:22 osrf/ros:foxy-desktop 进入容器安装组件 apt-get update apt-get install vim apt-get install git apt-get install net-tools # 安装ssh apt-get install openssh…
阅读更多...
Java面试题分享0519

Java面试题分享0519

目录 1、重载和重写区别&#xff1f; 2、构造器&#xff08;Constructor&#xff09;是否可被重写&#xff08;override&#xff09; 3、break 、continue 、return 作用&#xff1f; 4、JAVA 创建对象有哪些方式&#xff1f; 5、 和 equals 有什么区别&#xff1f; 6、I…
阅读更多...
centos下给es7.12.1设置密码

centos下给es7.12.1设置密码

安装可参考&#xff1a; centos7下安装elasticsearch7.8.1并配置远程连接_在一台服务器centos7上安装和配置elasticsearch。-CSDN博客 1、先停掉es进程 2、设置输入密码后访问配置 cd /home/soft/elasticsearch-7.12.1/config vim elasticsearch.yml 3、启动es服务 cd /home/…
阅读更多...
香橙派 AIpro开发板初上手

香橙派 AIpro开发板初上手

一、香橙派 AIpro开箱 最近拿到了香橙派 AIpro&#xff08;OrangePi AIpro&#xff09;&#xff0c;下面就是里面的板子和相关的配件。包含主板、散热组件、电源适配器、双C口电源线、32GB SD卡。我手上的这个是8G LPDDR4X运存的版本。 OrangePi AIpro开发板是一款由香橙派与华…
阅读更多...
VUE3 学习笔记（4）：VUE 事件处理、传参、事件修饰

VUE3 学习笔记（4）：VUE 事件处理、传参、事件修饰

常见的Web事件 页面事件 Onload --加载 Onunload --取消 Onscroll --滚动 Onresize --大小改变 表单事件 Onsubmit --提交 onchange --变更 Onselect --选择 Onreset --重置 焦点事件 Onfocus --得到焦点 Onblur --失去焦点 鼠标事件 Onclick --点击 Ondbclick --双击 onmouseu…
阅读更多...
在Python中实现限定抽奖次数的机制

在Python中实现限定抽奖次数的机制

目录 一、引言 二、需求分析 三、设计思路 四、代码实现 4.1 使用字典存储用户抽奖次数 4.2 使用数据库存储用户抽奖次数 五、扩展与优化 六、总结 一、引言 在当今互联网应用中&#xff0c;抽奖系统作为吸引用户、提高用户参与度和活跃度的重要手段&#xff0c;已经被…
阅读更多...
ideavim与vim相关笔记

ideavim与vim相关笔记

本文主要用于记录一些使用 vim/ideavim 开发的心得笔记&#xff0c;为了速度也为了折腾 强烈的个人向 笔记 ideavim 与 vim 混杂&#xff0c;无序但使用二级标题做大分类&#xff0c;当字典用,默认 vim 和 ideavim 通用&#xff0c;不通用会标记出来 文件操作 刷新重载当前打开…
阅读更多...
为什么配置了安全组还是有攻击进来？

为什么配置了安全组还是有攻击进来？

面对DDoS攻击&#xff0c;即使配置了安全组规则来限制入站流量&#xff0c;攻击者仍可能找到绕过这些基本防护措施的方法&#xff0c;尤其是当攻击流量巨大时。这是因为安全组主要工作在网络层和传输层&#xff0c;它们依据IP地址、协议和端口号来过滤流量&#xff0c;对于应用…
阅读更多...
AttributeError: module ‘numpy‘ has no attribute ‘bool‘

AttributeError: module ‘numpy‘ has no attribute ‘bool‘

报错内容&#xff1a; AttributeError: module numpy has no attribute bool. np.bool was a deprecated alias for the builtin bool. To avoid this error in existing code, use bool by itself. Doing this will not modify any behavior and is safe. If you specifically…
阅读更多...
【Spring】设计模式(GOF)

【Spring】设计模式(GOF)

Spring Framework在其架构和实现中广泛使用了多种GOF&#xff08;Gang of Four&#xff09;设计模式。这些设计模式帮助Spring解决了许多常见的软件开发问题&#xff0c;提高了代码的可重用性、可维护性和可扩展性。 1、工厂模式&#xff08;Factory Pattern&#xff09; 1.1简…
阅读更多...
Android14 WMS-窗口添加流程(一)-Client端

Android14 WMS-窗口添加流程(一)-Client端

窗口布局在onCreate方法中通过setContentView(R.layout.xxx)加载&#xff0c;但窗口的显示并不是在wm_on_create_called中, 而是在wm_on_resume_called后&#xff0c;也就是说应用onResume时此窗口是不可见的&#xff0c;真正可见是当此window窗口的mDrawState变化状态从NO_SUR…
阅读更多...
Raven2掠夺者2渡鸦2游戏预约注册教程 账号注册教程

Raven2掠夺者2渡鸦2游戏预约注册教程 账号注册教程

《渡鸦2》是一款源自韩国的创新力作&#xff0c;作为《Raven》系列的最新续篇&#xff0c;这款游戏在MMORPG手游领域内再度扩展了其标志性的暗黑奇幻宇宙&#xff0c;融入了大量革新的游戏设计与丰富内容。定档于2024年5月29日开启公测的《渡鸦2》&#xff0c;正处在紧张刺激的…
阅读更多...
最新文章

Copyright @ 2022~2023