江苏龙网

  1. 主页 > 生活百科 > >

搭建开箱即用的vue3框架( 三 )

vue3框架

【搭建开箱即用的vue3框架】上述模板将渲染红色背景白色的字 。
同时支持 属性化模式，即可以用简写 。该功能默认关闭，可在 windi.config.ts 中 设置 attributify 为 true 开启 。
<template><div text="white" bg="red-500">我是红色背景的白色文本</div><template>这在调整边距尺寸以及等方面可以减少代码量 。
同时预设 排版 插件，解决简单的布局困难问题 。
当然也支持 可视化分析器 生成 原子css 报告.
在终端中输入命令，即可看到报告
pnpm analysis# 或者 npm run analysis# 或者 yarn analysis或者打包输出该报告
pnpm analysis:build# 或者 npm run analysis:build# 或者 yarn analysis:build具体可见 Windi CSS
 
12. 暗黑模式支持暗黑模式由 Windi CSS 的 暗黑模式 和 VueUse 实现 。
src/composables 目录用来存储 composition-api 模块 。
该目录下预设了useDarks 模块，该模块导出 isDark 和 toggleDark 用来显示和切换暗黑模式 。
// src/composables/useDarks.ts// vueuse的 api 会自动按需引入，无需importexport const isDark = useDark()export const toggleDark = useToggle(isDark)export const useDarks = () => ({ isDark, toggleDark })模板中即可直接用
<script setup lang="ts">import { useDarks } from "../composables/useDarks";const { isDark, toggleDark } = useDarks()</script><template><div m="6">Hello，This is the tov template！！</div><div m="6" cursor="pointer" @click="toggleDark()">light: {{ isDark }} click me!!</div></template>具体可见 暗黑模式
 
13. SWR 请求支持SWR 是更现代的请求方式，具体可见文章 SWR 。
而 vue-request 是一个 SWR 的 Vue 版本请求库 。
你可以这样用，例如请求 /api/test
<script setup lang="ts">import { useRequest } from "vue-request"const { data, loading, error } = useRequest('/api/test')</script><template><div>data: {{data}}</div><div>error: {{error}}</div><div>loading: {{loading}}</div></template>所有基本的数据，状态和缓存都帮你搞定了，不需要重新封装 。
具体可见 vue-request
 
14. pinia 状态管理pinia 是下一代的状态管理库，比 vuex 更简单，ts 支持更好 。
你可以在 src/stores 中进行状态的定义 。
例如创建 src/stores/counter.ts
// src/stores/counter.tsimport { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},actions: {inc() {this.count++},},})定义完后在 setup 中直接使用即可
<!-- src/pages/index.vue --><script setup lang="ts">import { useCounterStore } from "../stores/counter"const Counter = useCounterStore()<script><template><div @click="Counter.inc">{{Counter.count}}</div></template>更多具体使用可见 pinia
 
15. pnpm 包管理器pnpm 是非常优秀的包管理器，更快、更节省空间、更合理 。
具体可见 pnpm
 
16. 跳转进度条支持跳转进度条由 nprogress 实现，可在src/styles/main.css 中调整配色 。
/** src/styles/main.css **//** 省略其他样式 **/#nprogress .bar {@Apply bg-purple-700 bg-opacity-75; /** 配色 **/position: fixed;z-index: 1031;top: 0;left: 0;width: 100%;height: 2px;}关于 @apply 由 Windi Css apply 指令 实现 。
具体可见 nprogress
 
17. Inspect 调试支持启动项目
pnpm dev# 或者 npm run dev# 或者 yarn dev可以看到一个 url

搭建开箱即用的vue3框架

文章插图
 
先进入 http://localhost:3000，再进入
http://localhost:3000/__inspect/ 即可获得依赖图谱 。
搭建开箱即用的vue3框架

文章插图
 
通过顶部的一些按钮还可以调整依赖呈现 。
具体可见 vite-plugin-inspect
 
18. 插件自动加载支持该功能由 vite 的 Global 导入 实现 。
只需要在 src/modules 中的模块里导出默认函数即可 。
例如 pinia，只需要这样做 。
// src/modules/pinia.tsimport { App } from 'vue'// 导出 default 接口export default (app: App) => app.use(createPinia())


推荐阅读


上一篇：淘宝店铺装修报价 店铺装修设计费一般多少钱

下一篇：海南省投诉 海南省消费局