搭建開箱即用的vue3框架

前言

項目開發困難，搭建項目浪費時間，文檔七零八落，上班沒時間劃水（其實我想有更多的時間學習，

提高自己的）。那么干貨福利來了，以下一些好的插件和配置，還有相應的鏈接地址，你還怕沒時間劃水嗎^0^
復制代碼

option

1. Vite 的 
2. Vue3 的
3. 文件路由
4. 布局系統
5.  Mock 支持
6. Api 自動引入
7. 組件自動引入
8. 圖標自動引入
9.  VueUse 支持
10. TypeScript 的
11. Windi css 的
12. 暗黑模式支持
13. SWR 請求支持
14. pinia 狀態管理
15. pnpm 包管理器
16. 跳轉進度條支持
17. Inspect 調試支持
18. 插件自動加載支持
19. Vitest 單元測試支持
20. 支持 Markdown 渲染
21. 路徑別名 `~` 支持
22. 命令行自動創建與刪除
23. i18n 國際化支持
24. 漂亮的 404頁 支持
25. tsx 支持
26. gzip 資源壓縮支持
27. 環境變量配置支持
復制代碼

官網

Gitee

Github

網易云課堂

友情鏈接

1. Vite 的

該模板采用 vite 作為構建工具，你可以在根目錄下的 vite.config.ts 對項目的構建進行配置。

對于眾多主流插件的引入和繁雜配置已經整合到根目錄下的預設 presets 中，大多數情況下你是不需要重新對它們進行配置的。

2. Vue3 的

3. 文件路由

目錄結構即路由。

eg:

src/pages/index.vue => /
src/pages/about.vue => /about
src/pages/users/index.vue => /users
src/pages/users/profile.vue => /users/profile
src/pages/users/[id].vue => /users/:id
src/pages/[user]/settings.vue => /:user/settings
src/pages/[...notFound].vue => 404 路由

具體可見 vite-plugin-pages

4. 布局系統

默認布局

src/layouts/default.vue 將作為默認布局。

<!-- src/layouts/default.vue -->
<template>
    我是默認布局
    <router-view /> <!-- 頁面視圖出口 -->
</template>

此時 src/pages/index.vue

<!-- src/pages/index.vue -->
<template>
    <div>我是首頁</div> 
</template>

路由到 /時，頁面將渲染

我是默認布局
我是首頁

此時 src/pages/about.vue

<!-- src/pages/about.vue -->
<template>
    <div>我是關于頁</div> 
</template>

路由到 /about 時，頁面將渲染

我是默認布局
我是關于頁

非默認布局

隨便創建一個 src/layouts/custom.vue

<!-- src/layouts/custom.vue -->
<template>
    我是非默認布局custom
    <router-view /> <!-- 頁面視圖出口 -->
</template>

此時 src/pages/index.vue 內

<!-- src/pages/index.vue -->
<template>
    <div>我是首頁</div> 
</template>

<!-- 添加自定義塊  -->
<route lang="yaml">
meta:
  layout: custom
</route>

此時路由到 /, 頁面將渲染

我是非默認布局custom
我是首頁

具體可見 vite-plugin-vue-layouts

5. Mock 支持

在根目錄下的 mock 目錄下，可以在模塊中導出默認的 api 資源。

例如 mock/test.ts 內導出

import { MockMethod } from 'vite-plugin-mock'
export default [
    {
        url: '/api/get',
        method: 'get',
        response: () => {
            return {
                code: 0,
                data: {
                    name: 'vben'
                }
            }
        }
    }
] as MockMethod[]

在 src 中就可以進行模擬請求。

<script setup lang="ts">
    import { useRequest } from "vue-request"
    // 請求接口 /api/get
    const { data, loading, error } = useRequest('/api/get') 
</script>

<template>
    <div>data: {{data}}</div>
    <div>loading: {{loading}}</div>
    <div>error: {{error}}</div>
</template>

這里用到 vue-request 去做請求，不過因為該 mock 攔截的是一整個接口，所以換成 axIOS 等請求庫也是可以的。

更多 mock 設置可見 vite-plugin-mock

6. Api 自動引入

原本 vue 的 api 需要自行 import。

import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

現在可以直接使用。

const count = ref(0)
const doubled = computed(() => count.value * 2)

而且上邊的 api 是按需自動引入的。

目前模板支持自動引入 api 的庫列表包括:

vue
pinia
vueuse
vue-i18n
vue-router

當然還有項目中的自動引入，只需要滿足以下規范即可。

src/composables 下凡是 use 開頭的模塊，同時里邊有 default 導出，該導出就可以被按需自動引入。

例如有個 src/composables/foo.ts

// default 導出
export default 1000

此時就不再需要 import了

<script setup lang="ts">
    console.log(foo) // 輸出 1000
</script>

<template>
    <div @click="store.inc()">{{store.counter}}</div>
</template>

src/stores 下凡是 Store 結尾的模塊，同時里邊有 default 導出，該導出就可以按需自動引入。

例如有個
src/stores/counterStore.ts

// default 導出
export default defineStore('counter', {
    state() {
        return {
            counter: 1
        }
    },
    actions: {
        inc() {
            this.counter++
        }
    }
})

此時就不再需要 import了

<script setup lang="ts">
    const store = counterStore()
</script>

<template>
    <div @click="store.inc()">{{store.counter}}</div>
</template>

具體可見 unplugin-auto-import 與
vite-auto-import-resolvers

7. 組件自動引入

原來需要 import

<!-- src/pages/index.vue -->
<script setup lang="ts">
    import Hello from "../components/Hello.vue"
</script>

<template>
    <Hello />
</template>

現在只要在 src/components 下定義的組件都將會按需引入，即 import 是不需要的。

<!-- src/pages/index.vue -->
<template>
    <Hello />
</template>

同時流行組件庫自動引入也是支持的，例如 Naive ui。

只需安裝依賴。

pnpm add naive-ui

# 或者 npm i naive-ui
# 或者 yarn add naive-ui

即可在模板中使用。

<!-- src/pages/index.vue -->
<template>
    <n-button type="success">Success</n-button>
</template>

目前支持的組件庫有:

naive ui
arco.design
element-plus
ant design of vue
@vueuse/components

具體可見 unplugin-vue-components

8. 圖標自動引入

可前往 icones，隨意選擇點擊進入其中一個圖標庫

再點擊選擇其中一個喜歡的圖標

復制其名稱

在模板中即可直接用組件的形式直接使用，注意加上前綴 i-。

<template>
    <i-mdi:account-box-multiple />
</template>

保存后等待自動下載該圖標庫后，就可以在頁面中看到對應圖標。

注意自動下載圖標需要 pnpm 包管理器支持，如果你是其他包管理器需要手動安裝圖標集

圖標集名稱為 @iconify/ 加 : 前綴，例如上邊的圖標是 mdi:account-box-multiple，圖標集名稱就為 @iconify/mdi。

npm i @iconify/mdi -D

# 或者 yarn add @iconify/mdi -D

同時推薦你使用 vscode 插件 Iconify IntelliSense。

該插件會在模板中顯示圖標的預覽。就像這樣

<!-- 模板中代碼 -->
<template>
    <i-mdi:account-box-multiple />
</template>

將在 vscode 中得到圖標預覽

具體可見 unplugin-icons

9. VueUse 支持

VueUse 是一個超級強的 hooks 庫，例如你要獲取鼠標位置，只需要這樣

<script setup lang="ts">
    // useMouse 被自動按需引入了，不需要import
    const { x, y } = useMouse()
</script>

<template>
    <div>x坐標 {{x}}</div>
    <div>y坐標 {{y}}</div>
</template>

具體可見 VueUse

10. TypeScript 的

不需要重新配置，直接用 ts 書寫就行了。

11. Windi CSS 的

Windi CSS 是一個開發中速度更快的原子css 庫。

直接在模板中用就行了，不需要配置。

<template>
    <div class="bg-red-500 text-white">
        我是紅色背景的白色文本
    </div>
<template>

上述模板將渲染紅色背景白色的字。

同時支持屬性化模式，即可以用簡寫。該功能默認關閉，可在 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 會自動按需引入，無需import
export 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.ts
import { 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

先進入 http://localhost:3000，再進入
http://localhost:3000/__inspect/ 即可獲得依賴圖譜。

通過頂部的一些按鈕還可以調整依賴呈現。

具體可見 vite-plugin-inspect

18. 插件自動加載支持

該功能由 vite 的 Global 導入實現。

只需要在 src/modules 中的模塊里導出默認函數即可。

例如 pinia，只需要這樣做。

// src/modules/pinia.ts

import { App } from 'vue'

// 導出 default 接口
export default (app: App) => app.use(createPinia())

或者 vue-router

// src/modules/router.ts

import { App } from 'vue'

// 省略各種配置

// 導出 default 接口
export default (app: App) => app.use(router)

當然 pinia 和 vue-router 已經預設好了，你不需要重新關注他們。

具體可見實現插件自動加載實現

19. Vitest 單元測試支持

在 src/test 目錄中可以書寫單元測試。

import { it, describe, expect, assert } from 'vitest'

describe('suite name', () => {
    it('foo', () => {
        expect(1 + 1).toEqual(2)
        expect(true).to.be.true
    })

    it('bar', () => {
        assert.equal(Math.sqrt(4), 2)
    })

    it('snapshot', () => {
        expect({ foo: 'bar' }).toMatchSnapshot()
    })
})

然后在終端中輸入命令即可測試

pnpm test

# 或者 npm run test
# 或者 yarn test

或者生成報告

pnpm coverage

# 或者 npm run coverage
# 或者 yarn coverage

具體可見 Vitest

20. 支持 Markdown 渲染

markdown 渲染可以用來書寫一些簡單的說明。

只需要把 src/pages 目錄下的頁面后綴由 .vue 改為 .md，然后再改為 markdown 語法即可。

例如 src/pages/about.md

## About Page

> The page is markdown file

當你路由到 /about 后即可看到對應的 markdown 渲染。

具體可見 vite-plugin-md

21. 路徑別名~支持

~ 路徑將被導向項目的 src 目錄。

<!-- src/pages/index.vue -->
<script lang="ts" setup>
    import { useDarks } from "~/composables/dark"

// 等價于
// import { useDarks } from "../composables/dark"
</script>

22. 命令行自動創建與刪除

只要輸入，即可創建一個標準的頁面或組件

pnpm auto:create

# 或者 npm run auto:create
# 或者 yarn auto:create

當然也可以進行刪除

pnpm auto:remove

# 或者 npm run auto:remove
# 或者 yarn auto:remove

23. i18n 國際化支持

在日常的業務當中，可能會存在一些需要國際化的場景。那么只需要在根目錄下的 locales 中定義不同語言的 yml 即可在項目中做到開箱即用的國際化支持。

比如 locales/en.yml 中用來定義需要國際化支持的英文內容。

# locales/en.yml
# English

index: index
about: about
not-found: Notfound

又如 locales/zh-CN.yml 中用來定義需要國際化支持的中文內容。

# locales/zh-CN.yml
# 中文

index: 主頁
about: 關于
not-found: 未找到頁面

此時在組件中即可這樣用

<script setup>
// 該api是全局按需引入的，所以可以直接用
// t 用來綁定特定的語塊
const { t, locale } = useI18n()

const toggleLocale = () => {
     // locale.value 用來表示當前所屬語言，可修改進行語言切換
     locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
}
</script>

<template>
    <div m="6" cursor="pointer" @click="toggleLocale()">language: {{ t('index') }} click me!!</div>
</template>

更詳細的說明可見用到的 vite 插件 @
intlify/vite-plugin-vue-i18n 與 vue插件 vue-i18n。

另外 yml 是目前前端中流行的配置文件格式，語法可見阮一峰先生的 YAML 語言教程。

vscode 插件推薦:

多合一的 i18n 支持 i18n Ally

24. 漂亮的404頁支持

在日常業務中，當用戶訪問不存在的頁面時，應該給到我們的用戶一個不存在的信息提示，而這個提示的頁面就是 404 頁。

你可以隨便訪問一個不存在的頁面，例如 /bucunzai

當然還有暗黑模式適應。

也支持簡單的響應式適應。例如移動端瀏覽器上會有正確的顯示。

當然如果這個 404 的封面不符合你的口味，那么可以在 pages/[...notFound].vue 中修改 img 標簽的 src。默認是 32.svg，支持 1 ~ 33 的 svg。

例如，默認

<!-- 省略各種代碼 -->
<template>
    <img src="/notFound/32.svg" class="cover" alt="page not found" />
</template>

修改 /notFound/32.svg 為 /notFound/33.svg

<!-- 省略各種代碼 -->
<template>
    <img src="/notFound/33.svg" class="cover" alt="page not found" />
</template>

即可切換封面為

25.tsx支持

只需要 tsx 文件放在 src/components 下，即可直接在模板中使用。

例如你有一個 src/components/foo.tsx 文件，那么即可直接在模板中使用。

// src/components/foo.tsx
export default defineComponent({
    render() {
        return <div>Test</div>
    }
})

<template>
    <foo />
</template>

具體可見 @vitejs/plugin-vue-jsx

26.gzip資源壓縮支持

生產環境下開箱即用的 gzip 資源壓縮，無需配置。

具體可見 vite-plugin-compression

27.環境變量配置支持

根目錄下有三個環境變量配置文件 .env，.env.development 和 .env.production 用來對項目進行配置。

日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡