-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path826db4a2.html
More file actions
262 lines (239 loc) · 70 KB
/
826db4a2.html
File metadata and controls
262 lines (239 loc) · 70 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Vite+Vue3+TypeScript轻量级框架搭建(2) | Big Pineapple</title><meta name="author" content="DB"><meta name="copyright" content="DB"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="unplugin-vue-components - 自动导入、按需导入组件安装 1pnpm install unplugin-vue-components -D 配置 12345678910111213141516171819202122232425// vite.config.tsimport &#123; defineConfig &#125; from &#x27;vite&#x27;imp">
<meta property="og:type" content="article">
<meta property="og:title" content="Vite+Vue3+TypeScript轻量级框架搭建(2)">
<meta property="og:url" content="https://dabotxt.github.io/826db4a2.html">
<meta property="og:site_name" content="Big Pineapple">
<meta property="og:description" content="unplugin-vue-components - 自动导入、按需导入组件安装 1pnpm install unplugin-vue-components -D 配置 12345678910111213141516171819202122232425// vite.config.tsimport &#123; defineConfig &#125; from &#x27;vite&#x27;imp">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s1.ax1x.com/2022/05/05/OeUDJA.jpg">
<meta property="article:published_time" content="2022-05-05T09:44:30.000Z">
<meta property="article:modified_time" content="2026-01-29T08:05:00.129Z">
<meta property="article:author" content="DB">
<meta property="article:tag" content="Vite">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s1.ax1x.com/2022/05/05/OeUDJA.jpg"><script type="application/ld+json">{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Vite+Vue3+TypeScript轻量级框架搭建(2)",
"url": "https://dabotxt.github.io/826db4a2.html",
"image": "https://s1.ax1x.com/2022/05/05/OeUDJA.jpg",
"datePublished": "2022-05-05T09:44:30.000Z",
"dateModified": "2026-01-29T08:05:00.129Z",
"author": [
{
"@type": "Person",
"name": "DB",
"url": "https://dabotxt.github.io"
}
]
}</script><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://dabotxt.github.io/826db4a2.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css?v=5.5.4"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.0/css/all.min.css"><script>
(() => {
const saveToLocal = {
set: (key, value, ttl) => {
if (!ttl) return
const expiry = Date.now() + ttl * 86400000
localStorage.setItem(key, JSON.stringify({ value, expiry }))
},
get: key => {
const itemStr = localStorage.getItem(key)
if (!itemStr) return undefined
const { value, expiry } = JSON.parse(itemStr)
if (Date.now() > expiry) {
localStorage.removeItem(key)
return undefined
}
return value
}
}
window.btf = {
saveToLocal,
getScript: (url, attr = {}) => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
script.onload = script.onreadystatechange = () => {
if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
}
script.onerror = reject
document.head.appendChild(script)
}),
getCSS: (url, id) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onload = link.onreadystatechange = () => {
if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
}
link.onerror = reject
document.head.appendChild(link)
}),
addGlobalFn: (key, fn, name = false, parent = window) => {
if (!false && key.startsWith('pjax')) return
const globalFn = parent.globalFn || {}
globalFn[key] = globalFn[key] || {}
globalFn[key][name || Object.keys(globalFn[key]).length] = fn
parent.globalFn = globalFn
}
}
const activateDarkMode = () => {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
const activateLightMode = () => {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
btf.activateDarkMode = activateDarkMode
btf.activateLightMode = activateLightMode
const theme = saveToLocal.get('theme')
theme === 'dark' ? activateDarkMode() : theme === 'light' ? activateLightMode() : null
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
}
const detectApple = () => {
if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
document.documentElement.classList.add('apple')
}
}
detectApple()
})()
</script><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"pagination":{"enable":false,"hitsPerPage":8},"languages":{"hits_empty":"未找到符合您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
translate: undefined,
highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false,"highlightFullpage":false,"highlightMacStyle":false},
copy: {
success: '复制成功',
error: '复制失败',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '',
dateSuffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'null',
Snackbar: undefined,
infinitegrid: {
js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid@4.13.0/dist/infinitegrid.min.js',
buttonText: '加载更多'
},
isPhotoFigcaption: false,
islazyloadPlugin: false,
isAnchor: false,
percent: {
toc: true,
rightside: false,
},
autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'Vite+Vue3+TypeScript轻量级框架搭建(2)',
isHighlightShrink: false,
isToc: true,
pageType: 'post'
}</script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(https://s1.ax1x.com/2022/05/05/OeUIWn.png);"><nav id="nav"><span id="blog-info"><a class="nav-site-title" href="/"><span class="site-name">Big Pineapple</span></a><a class="nav-page-title" href="/"><span class="site-name">Vite+Vue3+TypeScript轻量级框架搭建(2)</span><span class="site-name"><i class="fa-solid fa-circle-arrow-left"></i><span> 返回首页</span></span></a></span><div id="menus"><div id="search-button"><span class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></span></div></div></nav><div id="post-info"><h1 class="post-title">Vite+Vue3+TypeScript轻量级框架搭建(2)</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-05-05T09:44:30.000Z" title="发表于 2022-05-05 17:44:30">2022-05-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2026-01-29T08:05:00.129Z" title="更新于 2026-01-29 16:05:00">2026-01-29</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Vite/">Vite</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title=""><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">浏览量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="container post-content" id="article-container"><h3 id="unplugin-vue-components-自动导入、按需导入组件"><a href="#unplugin-vue-components-自动导入、按需导入组件" class="headerlink" title="unplugin-vue-components - 自动导入、按需导入组件"></a>unplugin-vue-components - 自动导入、按需导入组件</h3><p>安装</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm install unplugin-vue-components -D</span><br></pre></td></tr></table></figure>
<p>配置</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vite.config.ts</span></span><br><span class="line"><span class="keyword">import</span> { defineConfig } <span class="keyword">from</span> <span class="string">'vite'</span></span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">'@vitejs/plugin-vue'</span></span><br><span class="line"><span class="keyword">import</span> vueSetupExtend <span class="keyword">from</span> <span class="string">'vite-plugin-vue-setup-extend'</span></span><br><span class="line"><span class="keyword">import</span> legacy <span class="keyword">from</span> <span class="string">'@vitejs/plugin-legacy'</span></span><br><span class="line"><span class="keyword">import</span> compressPlugin <span class="keyword">from</span> <span class="string">'vite-plugin-compression'</span></span><br><span class="line"><span class="keyword">import</span> viteImagemin <span class="keyword">from</span> <span class="string">'vite-plugin-imagemin'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Components</span> <span class="keyword">from</span> <span class="string">'unplugin-vue-components/vite'</span></span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">ElementPlusResolver</span> } <span class="keyword">from</span> <span class="string">'unplugin-vue-components/resolvers'</span></span><br><span class="line"><span class="comment">// https://vitejs.dev/config/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>({</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="title function_">vue</span>(),</span><br><span class="line"> ...省略插件配置,</span><br><span class="line"> <span class="title class_">Components</span>({</span><br><span class="line"> <span class="attr">dirs</span>: [<span class="string">'src/components'</span>],</span><br><span class="line"> <span class="attr">resolvers</span>: [<span class="title class_">ElementPlusResolver</span>()],</span><br><span class="line"> <span class="comment">// 组件的有效文件扩展名。</span></span><br><span class="line"> <span class="attr">extensions</span>: [<span class="string">'vue'</span>],</span><br><span class="line"> <span class="comment">// 允许子目录作为组件的命名空间前缀。</span></span><br><span class="line"> <span class="attr">directoryAsNamespace</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">deep</span>: <span class="literal">true</span>,</span><br><span class="line"> })</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>现在已经注释掉HelloWorld组件引入,项目仍正常运行</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><script setup lang="ts" name="App"></span><br><span class="line">// This starter template is using Vue 3 <script setup> SFCs</span><br><span class="line">// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup</span><br><span class="line">// import HelloWorld from './components/HelloWorld.vue'</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><template></span><br><span class="line"> <img alt="Vue logo" src="./assets/logo.png" /></span><br><span class="line"> <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><style></span><br><span class="line"></style></span><br></pre></td></tr></table></figure>
<p>运行或打包会自动生成components.d.ts文件内容如下：</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// generated by unplugin-vue-components</span></span><br><span class="line"><span class="comment">// We suggest you to commit this file into source control</span></span><br><span class="line"><span class="comment">// Read more: https://github.com/vuejs/vue-next/pull/3399</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'@vue/runtime-core'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">'@vue/runtime-core'</span> {</span><br><span class="line"> <span class="keyword">export</span> <span class="keyword">interface</span> <span class="title class_">GlobalComponents</span> {</span><br><span class="line"> <span class="title class_">HelloWorld</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'./src/components/HelloWorld.vue'</span>)[<span class="string">'default'</span>]</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">export</span> {}</span><br></pre></td></tr></table></figure>
<h3 id="安装Vant-UI-组件库"><a href="#安装Vant-UI-组件库" class="headerlink" title="安装Vant UI 组件库"></a>安装Vant UI 组件库</h3><p>安装</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm add vant</span><br></pre></td></tr></table></figure>
<h3 id="vite-plugin-style-import-按需引入组件库样式"><a href="#vite-plugin-style-import-按需引入组件库样式" class="headerlink" title="vite-plugin-style-import - 按需引入组件库样式"></a>vite-plugin-style-import - 按需引入组件库样式</h3><p>安装</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm install vite-plugin-style-import consola -D</span><br></pre></td></tr></table></figure>
<p>配置</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { defineConfig } <span class="keyword">from</span> <span class="string">'vite'</span></span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">'@vitejs/plugin-vue'</span></span><br><span class="line"><span class="keyword">import</span> vueSetupExtend <span class="keyword">from</span> <span class="string">'vite-plugin-vue-setup-extend'</span></span><br><span class="line"><span class="keyword">import</span> legacy <span class="keyword">from</span> <span class="string">'@vitejs/plugin-legacy'</span></span><br><span class="line"><span class="keyword">import</span> compressPlugin <span class="keyword">from</span> <span class="string">'vite-plugin-compression'</span></span><br><span class="line"><span class="keyword">import</span> viteImagemin <span class="keyword">from</span> <span class="string">'vite-plugin-imagemin'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Components</span> <span class="keyword">from</span> <span class="string">'unplugin-vue-components/vite'</span></span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">VantResolver</span> } <span class="keyword">from</span> <span class="string">'unplugin-vue-components/resolvers'</span></span><br><span class="line"><span class="keyword">import</span> { createStyleImportPlugin, <span class="title class_">VantResolve</span> } <span class="keyword">from</span> <span class="string">'vite-plugin-style-import'</span></span><br><span class="line"><span class="comment">// https://vitejs.dev/config/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>({</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="title function_">vue</span>(),</span><br><span class="line"> <span class="title function_">vueSetupExtend</span>(),</span><br><span class="line"> <span class="title function_">legacy</span>({</span><br><span class="line"> <span class="attr">targets</span>: [<span class="string">'defaults'</span>, <span class="string">'not IE 11'</span>],</span><br><span class="line"> <span class="attr">additionalLegacyPolyfills</span>: [<span class="string">'regenerator-runtime/runtime'</span>]</span><br><span class="line"> }),</span><br><span class="line"> <span class="title function_">compressPlugin</span>({</span><br><span class="line"> <span class="attr">verbose</span>: <span class="literal">false</span>, <span class="comment">// 是否在控制台输出压缩结果</span></span><br><span class="line"> <span class="attr">disable</span>: <span class="literal">false</span>, <span class="comment">// 是否禁用</span></span><br><span class="line"> <span class="attr">threshold</span>: <span class="number">10240</span>, <span class="comment">// 文件容量大于这个值进行压缩，它将被压缩，单位为b</span></span><br><span class="line"> <span class="attr">algorithm</span>: <span class="string">'gzip'</span>, <span class="comment">// 压缩算法 可选 ['gzip','brotliCompress' ,'deflate','deflateRaw']</span></span><br><span class="line"> <span class="attr">ext</span>: <span class="string">'.gz'</span>, <span class="comment">// 生成的压缩包后缀</span></span><br><span class="line"> }),</span><br><span class="line"> <span class="title function_">viteImagemin</span>({</span><br><span class="line"> <span class="attr">gifsicle</span>: {</span><br><span class="line"> <span class="attr">optimizationLevel</span>: <span class="number">7</span>,</span><br><span class="line"> <span class="attr">interlaced</span>: <span class="literal">false</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">optipng</span>: {</span><br><span class="line"> <span class="attr">optimizationLevel</span>: <span class="number">7</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">mozjpeg</span>: {</span><br><span class="line"> <span class="attr">quality</span>: <span class="number">20</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">pngquant</span>: {</span><br><span class="line"> <span class="attr">quality</span>: [<span class="number">0.8</span>, <span class="number">0.9</span>],</span><br><span class="line"> <span class="attr">speed</span>: <span class="number">4</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">svgo</span>: {</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'removeViewBox'</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'removeEmptyAttrs'</span>,</span><br><span class="line"> <span class="attr">active</span>: <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }),</span><br><span class="line"> <span class="title class_">Components</span>({</span><br><span class="line"> <span class="attr">dirs</span>: [<span class="string">'src/components'</span>],</span><br><span class="line"> <span class="attr">resolvers</span>: [<span class="title class_">VantResolver</span>()],</span><br><span class="line"> <span class="comment">// 组件的有效文件扩展名。</span></span><br><span class="line"> <span class="attr">extensions</span>: [<span class="string">'vue'</span>],</span><br><span class="line"> <span class="comment">// 允许子目录作为组件的命名空间前缀。</span></span><br><span class="line"> <span class="attr">directoryAsNamespace</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">deep</span>: <span class="literal">true</span>,</span><br><span class="line"> }),</span><br><span class="line"> <span class="title function_">createStyleImportPlugin</span>({ <span class="attr">resolves</span>: [<span class="title class_">VantResolve</span>()] }),</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>使用vant组件不用手动引入,unplugin-vue-components 按需自动导入组件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">van-button</span> <span class="attr">type</span>=<span class="string">"primary"</span>></span>主要按钮<span class="tag"></<span class="name">van-button</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="unplugin-auto-import-API自动导入"><a href="#unplugin-auto-import-API自动导入" class="headerlink" title="unplugin-auto-import - API自动导入"></a>unplugin-auto-import - API自动导入</h3><p>setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import { ref } from ‘vue’。<br>可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm install unplugin-auto-import -D</span><br></pre></td></tr></table></figure>
<p>配置</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { defineConfig } <span class="keyword">from</span> <span class="string">'vite'</span></span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">'@vitejs/plugin-vue'</span></span><br><span class="line"><span class="keyword">import</span> vueSetupExtend <span class="keyword">from</span> <span class="string">'vite-plugin-vue-setup-extend'</span></span><br><span class="line"><span class="keyword">import</span> legacy <span class="keyword">from</span> <span class="string">'@vitejs/plugin-legacy'</span></span><br><span class="line"><span class="keyword">import</span> compressPlugin <span class="keyword">from</span> <span class="string">'vite-plugin-compression'</span></span><br><span class="line"><span class="keyword">import</span> viteImagemin <span class="keyword">from</span> <span class="string">'vite-plugin-imagemin'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Components</span> <span class="keyword">from</span> <span class="string">'unplugin-vue-components/vite'</span></span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">VantResolver</span> } <span class="keyword">from</span> <span class="string">'unplugin-vue-components/resolvers'</span></span><br><span class="line"><span class="keyword">import</span> { createStyleImportPlugin, <span class="title class_">VantResolve</span> } <span class="keyword">from</span> <span class="string">'vite-plugin-style-import'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">AutoImport</span> <span class="keyword">from</span> <span class="string">'unplugin-auto-import/vite'</span></span><br><span class="line"><span class="comment">// https://vitejs.dev/config/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>({</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="title function_">vue</span>(),</span><br><span class="line"> <span class="title function_">vueSetupExtend</span>(),</span><br><span class="line"> <span class="title function_">legacy</span>({</span><br><span class="line"> <span class="attr">targets</span>: [<span class="string">'defaults'</span>, <span class="string">'not IE 11'</span>],</span><br><span class="line"> <span class="attr">additionalLegacyPolyfills</span>: [<span class="string">'regenerator-runtime/runtime'</span>]</span><br><span class="line"> }),</span><br><span class="line"> <span class="title function_">compressPlugin</span>({</span><br><span class="line"> <span class="attr">verbose</span>: <span class="literal">false</span>, <span class="comment">// 是否在控制台输出压缩结果</span></span><br><span class="line"> <span class="attr">disable</span>: <span class="literal">false</span>, <span class="comment">// 是否禁用</span></span><br><span class="line"> <span class="attr">threshold</span>: <span class="number">10240</span>, <span class="comment">// 文件容量大于这个值进行压缩，它将被压缩，单位为b</span></span><br><span class="line"> <span class="attr">algorithm</span>: <span class="string">'gzip'</span>, <span class="comment">// 压缩算法 可选 ['gzip','brotliCompress' ,'deflate','deflateRaw']</span></span><br><span class="line"> <span class="attr">ext</span>: <span class="string">'.gz'</span>, <span class="comment">// 生成的压缩包后缀</span></span><br><span class="line"> }),</span><br><span class="line"> <span class="title function_">viteImagemin</span>({</span><br><span class="line"> <span class="attr">gifsicle</span>: {</span><br><span class="line"> <span class="attr">optimizationLevel</span>: <span class="number">7</span>,</span><br><span class="line"> <span class="attr">interlaced</span>: <span class="literal">false</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">optipng</span>: {</span><br><span class="line"> <span class="attr">optimizationLevel</span>: <span class="number">7</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">mozjpeg</span>: {</span><br><span class="line"> <span class="attr">quality</span>: <span class="number">20</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">pngquant</span>: {</span><br><span class="line"> <span class="attr">quality</span>: [<span class="number">0.8</span>, <span class="number">0.9</span>],</span><br><span class="line"> <span class="attr">speed</span>: <span class="number">4</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">svgo</span>: {</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'removeViewBox'</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'removeEmptyAttrs'</span>,</span><br><span class="line"> <span class="attr">active</span>: <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }),</span><br><span class="line"> <span class="title class_">Components</span>({</span><br><span class="line"> <span class="attr">dirs</span>: [<span class="string">'src/components'</span>],</span><br><span class="line"> <span class="attr">resolvers</span>: [<span class="title class_">VantResolver</span>()],</span><br><span class="line"> <span class="comment">// 组件的有效文件扩展名。</span></span><br><span class="line"> <span class="attr">extensions</span>: [<span class="string">'vue'</span>],</span><br><span class="line"> <span class="comment">// 允许子目录作为组件的命名空间前缀。</span></span><br><span class="line"> <span class="attr">directoryAsNamespace</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">deep</span>: <span class="literal">true</span>,</span><br><span class="line"> }),</span><br><span class="line"> <span class="title function_">createStyleImportPlugin</span>({ <span class="attr">resolves</span>: [<span class="title class_">VantResolve</span>()] }),</span><br><span class="line"> <span class="title class_">AutoImport</span>({</span><br><span class="line"> <span class="attr">imports</span>: [<span class="string">'vue'</span>],</span><br><span class="line"> <span class="attr">resolvers</span>: [<span class="title class_">VantResolver</span>({ <span class="attr">importStyle</span>: <span class="literal">false</span> })]</span><br><span class="line"> })</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>使用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><script setup lang="ts"></span><br><span class="line">const count = ref(0)</span><br><span class="line">const state = reactive({</span><br><span class="line"> data: '321'</span><br><span class="line">})</span><br><span class="line">const { data } = toRefs(state)</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><template></span><br><span class="line"> {{count}}</span><br><span class="line"> {{data}}</span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><style scoped></span><br><span class="line"></style></span><br></pre></td></tr></table></figure>
<p>运行或打包会自动生成auto-imports.d.ts文件内容如下：</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Generated by 'unplugin-auto-import'</span></span><br><span class="line"><span class="comment">// We suggest you to commit this file into source control</span></span><br><span class="line"><span class="keyword">declare</span> <span class="variable language_">global</span> {</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">computed</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'computed'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">createApp</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'createApp'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">customRef</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'customRef'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">defineAsyncComponent</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'defineAsyncComponent'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">defineComponent</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'defineComponent'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">effectScope</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'effectScope'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="title class_">EffectScope</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'EffectScope'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">getCurrentInstance</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'getCurrentInstance'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">getCurrentScope</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'getCurrentScope'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">h</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'h'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">inject</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'inject'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">isReadonly</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'isReadonly'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">isRef</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'isRef'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">markRaw</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'markRaw'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">nextTick</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'nextTick'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onActivated</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onActivated'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onBeforeMount</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onBeforeMount'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onBeforeUnmount</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onBeforeUnmount'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onBeforeUpdate</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onBeforeUpdate'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onDeactivated</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onDeactivated'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onErrorCaptured</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onErrorCaptured'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onMounted</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onMounted'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onRenderTracked</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onRenderTracked'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onRenderTriggered</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onRenderTriggered'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onScopeDispose</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onScopeDispose'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onServerPrefetch</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onServerPrefetch'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onUnmounted</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onUnmounted'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">onUpdated</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'onUpdated'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">provide</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'provide'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">reactive</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'reactive'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">readonly</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'readonly'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">ref</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'ref'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">resolveComponent</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'resolveComponent'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">shallowReactive</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'shallowReactive'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">shallowReadonly</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'shallowReadonly'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">shallowRef</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'shallowRef'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">toRaw</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'toRaw'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">toRef</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'toRef'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">toRefs</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'toRefs'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">triggerRef</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'triggerRef'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">unref</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'unref'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">useAttrs</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'useAttrs'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">useCssModule</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'useCssModule'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">useCssVars</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'useCssVars'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">useSlots</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'useSlots'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">watch</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'watch'</span>]</span><br><span class="line"> <span class="keyword">const</span> <span class="attr">watchEffect</span>: <span class="keyword">typeof</span> <span class="keyword">import</span>(<span class="string">'vue'</span>)[<span class="string">'watchEffect'</span>]</span><br><span class="line">}</span><br><span class="line"><span class="keyword">export</span> {}</span><br></pre></td></tr></table></figure></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://dabotxt.github.io">DB</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://dabotxt.github.io/826db4a2.html">https://dabotxt.github.io/826db4a2.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来源 <a href="https://dabotxt.github.io" target="_blank">Big Pineapple</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vite/">Vite</a></div><div class="post-share"><div class="social-share" data-image="https://s1.ax1x.com/2022/05/05/OeUDJA.jpg" data-sites="facebook,x,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related" href="/b51dc851.html" title="pinia"><img class="cover" src="https://s1.ax1x.com/2022/05/09/OG6eoT.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="info"><div class="info-1"><div class="info-item-1">上一篇</div><div class="info-item-2">pinia</div></div><div class="info-2"><div class="info-item-1">Pinia与Vuex的不同Pinia是Vue.js团队开发的一个全新的状态管理库，并且Pinia符合Vuex5的提案，已被纳入官方GitHub。Vuex： State、Gettes、Mutations(同步)、Actions(异步)Pinia： State、Gettes、Actions(同步异步都支持) Pinia的核心特性Pinia没有Mutations、Actions支持同步和异步、没有模块的嵌套结构（每个store互相独立）、更好的TypeScript支持、Vue2和Vue3都支持。 安装1pnpm add pinia Pinia初始化设置main.ts文件 12import { createPinia } from 'pinia'createApp(App).use(createPinia()).mount('#app') 在store目录下面新建一个user.ts 123456789101112131415161718import { defineStore } from 'p...</div></div></div></a><a class="pagination-related" href="/5e9df9d6.html" title="Vite+Vue3+TypeScript轻量级框架搭建(1)"><img class="cover" src="https://s1.ax1x.com/2022/05/05/OeUDJA.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="info text-right"><div class="info-1"><div class="info-item-1">下一篇</div><div class="info-item-2">Vite+Vue3+TypeScript轻量级框架搭建(1)</div></div><div class="info-2"><div class="info-item-1">初始化项目q1234npm init vite@latest√ Project name: vite+vue3+ts // 项目名字√ Select a framework: » vue // 框架语言√ Select a variant: » vue-ts // 拓展语言 添加setup name增强插件安装 1pnpm install vite-plugin-vue-setup-extend -D 配置 1234567import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueSetupExtend from 'vite-plugin-vue-setup-extend'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(), vueSetupExtend()]}) 使用 12&...</div></div></div></a></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><a class="pagination-related" href="/5e9df9d6.html" title="Vite+Vue3+TypeScript轻量级框架搭建(1)"><img class="cover" src="https://s1.ax1x.com/2022/05/05/OeUDJA.jpg" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-05</div><div class="info-item-2">Vite+Vue3+TypeScript轻量级框架搭建(1)</div></div><div class="info-2"><div class="info-item-1">初始化项目q1234npm init vite@latest√ Project name: vite+vue3+ts // 项目名字√ Select a framework: » vue // 框架语言√ Select a variant: » vue-ts // 拓展语言 添加setup name增强插件安装 1pnpm install vite-plugin-vue-setup-extend -D 配置 1234567import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueSetupExtend from 'vite-plugin-vue-setup-extend'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(), vueSetupExtend()]}) 使用 12&...</div></div></div></a><a class="pagination-related" href="/55bb1443.html" title="关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题"><img class="cover" src="https://s1.ax1x.com/2022/05/05/OeUDJA.jpg" alt="cover"><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2025-01-06</div><div class="info-item-2">关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题</div></div><div class="info-2"><div class="info-item-1">在vite项目中，有时候我们需要全局引入css变量、scss变量，或者引入全局scss样式文件，vite提供了以下这种配置方式123456789//vite.config.jscss: { preprocessorOptions: { //define global scss variable scss: { additionalData: `@import '@/styles/variables.scss';`, } }} 这种写法没有任何问题，并且我已经在一些项目中实践过了，可有一次我创建新项目的时候却无效了，在浏览器上也没有看到任何相关的样式，但是在main.js中引入又是正常的,后来去插件官方论坛找到了解决方法是这样说的。 原来这不是一个bug，只有在main.js引入一个其他scss文件或者在.vue文件中使用 style，并且里面有内容，则 scss.additionalData 配置的全局scss文件就可以正确引入了，还建议我们在 scss.additio...</div></div></div></a></div></div><hr class="custom-hr"/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="giscus-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="https://s1.ax1x.com/2022/04/29/LvbDbT.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">DB</div><div class="author-info-description">事当决而不决者，愚人也</div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">22</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://haiyong.site/moyu/shengchengshu.html"><i class="iconfont icon-youxishoubing"></i><span>Just Relax</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"><p align="center">微信号：***</p>
<p align="center">QQ号：***</p>
</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#unplugin-vue-components-%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5%E3%80%81%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5%E7%BB%84%E4%BB%B6"><span class="toc-number">1.</span> <span class="toc-text">unplugin-vue-components - 自动导入、按需导入组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85Vant-UI-%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="toc-number">2.</span> <span class="toc-text">安装Vant UI 组件库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vite-plugin-style-import-%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5%E7%BB%84%E4%BB%B6%E5%BA%93%E6%A0%B7%E5%BC%8F"><span class="toc-number">3.</span> <span class="toc-text">vite-plugin-style-import - 按需引入组件库样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#unplugin-auto-import-API%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5"><span class="toc-number">4.</span> <span class="toc-text">unplugin-auto-import - API自动导入</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/90338fix.html" title="解决iOS分发Non-public API问题"><img src="https://s1.ax1x.com/2022/05/10/OtyPTx.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="解决iOS分发Non-public API问题"/></a><div class="content"><a class="title" href="/90338fix.html" title="解决iOS分发Non-public API问题">解决iOS分发Non-public API问题</a><time datetime="2026-01-29T02:38:20.000Z" title="发表于 2026-01-29 10:38:20">2026-01-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/55bb1443.html" title="关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题"><img src="https://s1.ax1x.com/2022/05/05/OeUDJA.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题"/></a><div class="content"><a class="title" href="/55bb1443.html" title="关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题">关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题</a><time datetime="2025-01-06T02:48:34.000Z" title="发表于 2025-01-06 10:48:34">2025-01-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/e973ebbc.html" title="安装依赖超时443解决"><img src="/images/npm.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="安装依赖超时443解决"/></a><div class="content"><a class="title" href="/e973ebbc.html" title="安装依赖超时443解决">安装依赖超时443解决</a><time datetime="2024-09-13T07:18:32.000Z" title="发表于 2024-09-13 15:18:32">2024-09-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/3bc3f9fd.html" title="Git推送失败443"><img src="/images/git.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Git推送失败443"/></a><div class="content"><a class="title" href="/3bc3f9fd.html" title="Git推送失败443">Git推送失败443</a><time datetime="2024-08-21T09:22:44.000Z" title="发表于 2024-08-21 17:22:44">2024-08-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/36de35a5.html" title="电脑共享VPN到手机方法"><img src="/images/vpn.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="电脑共享VPN到手机方法"/></a><div class="content"><a class="title" href="/36de35a5.html" title="电脑共享VPN到手机方法">电脑共享VPN到手机方法</a><time datetime="2024-08-21T09:03:09.000Z" title="发表于 2024-08-21 17:03:09">2024-08-21</time></div></div></div></div></div></div></main><footer id="footer"><div class="footer-other"><div class="footer-copyright"><span class="copyright">© 2022 - 2026 By DB</span><span class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo 6.3.0</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly 5.5.4</a></span></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="前往评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=5.5.4"></script><script src="/js/main.js?v=5.5.4"></script><div class="js-pjax"><script>(() => {
const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
const option = null
const getGiscusTheme = theme => theme === 'dark' ? 'dark' : 'light'
const createScriptElement = config => {
const ele = document.createElement('script')
Object.entries(config).forEach(([key, value]) => {
ele.setAttribute(key, value)
})
return ele
}
const loadGiscus = (el = document, key) => {
const mappingConfig = isShuoshuo
? { 'data-mapping': 'specific', 'data-term': key }
: { 'data-mapping': (option && option['data-mapping']) || 'pathname' }
const giscusConfig = {
src: 'https://giscus.app/client.js',
'data-repo': 'dabotxt/dabotxt.github.io',
'data-repo-id': 'R_kgDOHLfmJw',
'data-category-id': 'DIC_kwDOHLfmJ84C1lei',
'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
'data-reactions-enabled': '1',
crossorigin: 'anonymous',
async: true,
...option,
...mappingConfig
}
const scriptElement = createScriptElement(giscusConfig)
el.querySelector('#giscus-wrap').appendChild(scriptElement)
if (isShuoshuo) {
window.shuoshuoComment.destroyGiscus = () => {
if (el.children.length) {
el.innerHTML = ''
el.classList.add('no-comment')
}
}
}
}
const changeGiscusTheme = theme => {
const iframe = document.querySelector('#giscus-wrap iframe')
if (iframe) {
const message = {
giscus: {
setConfig: {
theme: getGiscusTheme(theme)
}
}
}
iframe.contentWindow.postMessage(message, 'https://giscus.app')
}
}
btf.addGlobalFn('themeChange', changeGiscusTheme, 'giscus')
if (isShuoshuo) {
'Giscus' === 'Giscus'
? window.shuoshuoComment = { loadComment: loadGiscus }
: window.loadOtherComment = loadGiscus
return
}
if ('Giscus' === 'Giscus' || !false) {
if (false) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
else loadGiscus()
} else {
window.loadOtherComment = loadGiscus
}
})()</script></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><i class="fas fa-spinner fa-pulse" id="loading-status" hidden="hidden"></i><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="text-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据加载中</span></div><div class="local-search-input"><input placeholder="搜索文章..." type="text"/></div><hr/><div id="local-search-results"></div><div class="ais-Pagination" id="local-search-pagination" style="display:none;"><ul class="ais-Pagination-list"></ul></div><div id="local-search-stats"></div></div><div id="search-mask"></div><script src="/js/search/local-search.js?v=5.5.4"></script></div></div></body></html>