本文為快速搭建vite4項目，一些插件的詳情就不做過多的解釋，都放有官網(wǎng)鏈接，需要深入了解的小伙伴可自行查看。至于為什么選擇使用vite，因為它具備著快速啟動、按需編譯、模塊熱更新的亮點。歸根結底最大的特點就是快。vue的創(chuàng)始人是尤雨溪大佬，vite也是他。所以放心大膽的用吧。

壹、初始化項目 ????????

1?? 通過yarn初始化項目

yarn create vite 你的項目名稱 --template vue-ts

注：如果沒有yarn的可通過npm執(zhí)行命令npm install -g yarn進行安裝

2?? 如下圖，到這里我們的vite項目就初始化好了，跟著提示，進入ts-super-web(自己的項目名)根目錄下執(zhí)行yarn，下載完依賴后執(zhí)行yarn dev就可以啟動項目。

3???啟動成功以后瀏覽器訪問http://127.0.0.1:5173/?????????

貳、安裝相關依賴?????????

1?? element-plus為UI框架。pinia和vuex一樣為狀態(tài)管理。vue-router路由。nprogress頂部進度條。animate.css一個跨瀏覽器的動畫庫。

yarn add element-plus pinia vue-router nprogress animate.css

2?? 安裝圖標庫

yarn add @iconify-json/carbon @iconify-json/ep @iconify-json/noto -D

3?? 按需引入涉及到的依賴安裝

yarn add unplugin-vue-components unplugin-auto-import unplugin-icons -D

4?? 其他依賴安裝，支持sass，jsx等等

yarn add sass sass-loader @types/node @vitejs/plugin-vue-jsx -D

5?? 項目根目錄下修改tsconfig.json

{
  "compilerOptions": {
    "target": "esnext", // 目標語言的版本
    "useDefineForClassFields": true,
    "module": "esnext", // 生成代碼的模板標準
    "moduleResolution": "node", // 模塊解析策略，ts默認用node的解析策略，即相對的方式導入
    "strict": true, // 開啟所有嚴格的類型檢查
    "jsx": "preserve", // 指定將 JSX 編譯成什么形式
    "jsxFactory": "h", // 當使用經(jīng)典的JSX運行時編譯JSX元素時，更改.js文件中調(diào)用的函數(shù)，默認：React.createElement 。
    "jsxFragmentFactory": "Fragment",
    "sourceMap": true, // 生成目標文件的sourceMap文件
    "resolveJsonModule": true, // 指定 JSX 片段工廠函數(shù)在指定了 jsxFactory 編譯器選項的情況下針對 react JSX 發(fā)出時使用。
    "esModuleInterop": true, // 允許export=導出，由import from 導入
    // TS需要引用的庫，即聲明文件，es5 默認引用dom、es5、scripthost,如需要使用es的高級版本特性，通常都需要配置，如es8的數(shù)組新特性需要引入"ES2019.Array"
    "lib": ["esnext", "dom"],
    "types": ["vite/client", "element-plus/global", "unplugin-icons/types/vue"], // 加載的聲明文件包
    "baseUrl": ".", // 解析非相對模塊的基地址，默認是當前目錄
    "skipLibCheck": true, // 忽略所有的聲明文件（ *.d.ts）的類型檢查。
    "paths": { // 路徑映射，相對于baseUrl
      "@/*": [
        "src/*"
      ]
    }
  },
  // 指定一個匹配列表（屬于自動指定該路徑下的所有ts相關文件）
  "include": ["src/**/*.ts", "**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/autoImport/*.d.ts"],
  "exclude": [
    "node_modules"
  ]
}

叁、配置ElementPlus、圖標庫，vueAPI等按需引入，支持jsx、tsx等?????????

為什么做按需引入，相對于全局引入來說很大程度上的減少了代碼體積。

1?? 在項目根目錄下修改vite.config.ts

注：按需引入這里需要在src文件夾下新建一個autoImport的文件夾存在按需引入生成的文件。這樣做的目的是，后期如果傳git，可以屏蔽這個文件夾。

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vueJsx from '@vitejs/plugin-vue-jsx';
const pathSrc = path.resolve(__dirname, 'src')

export default defineConfig({
  resolve: {
    alias: {
      '@': pathSrc, // 文件系統(tǒng)路徑別名
    }
  },
  plugins: [
    vue(),
    vueJsx(), // 支持jsx、tsx的寫法
    AutoImport({
      imports: ['vue'],
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'Icon'
        })
      ],
      dts: path.resolve(pathSrc + '/autoImport', 'auto-imports.d.ts')
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ['ep', 'carbon', 'noto']
        })
      ],
      dts: path.resolve(pathSrc + '/autoImport', 'components.d.ts')
    }),
    Icons({
      autoInstall: true,
      compiler: 'vue3'
    })
  ],
  server: {
    host: '0.0.0.0', // 指定服務器應該監(jiān)聽哪個 IP 地址
    port: 9527, // 指定開發(fā)服務器端口
    strictPort: true, // 若端口已被占用則會直接退出
    https: false, // 啟用 TLS + HTTP/2
    open: false, // 啟動時自動在瀏覽器中打開應用程序
  }
})

2?? 測試ElementPlus、圖標以及vue3API等按需引入情況。修改App.vue文件。

<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-button type="primary">Primary</el-button>
    </el-col>
    <el-col :span="6">
      <el-button type="success">Success</el-button>
    </el-col>
    <el-col :span="6">
      <el-button type="info">Info</el-button>
    </el-col>
    <el-col :span="6">
      <el-button type="warning"><i-ep-delete />Warning</el-button>
    </el-col>
  </el-row>
  <br/>
  <br/>
  <br/>
  <el-button type="primary" @click="changeCount">++++</el-button>
  <br/>
  <br/>
  <br/>
  <span style="color: red;font-size: 22px;">{{ count }}</span>
</template>

<script lang="ts">
export default defineComponent({
  setup() {

    let data = reactive({
      count: 1,
    })

    const changeCount = () => {
      data.count++
    }

    return {
      changeCount,
      ...toRefs(data)
    }
  }
})
</script>

3?? 成功運行至下列效果表示按需引入沒有任何問題?????????

肆、vue-router路由以及路由攔截器配置?????????

至于vue-router的話，在vue2大家應該已經(jīng)很熟悉了，vue全家桶必備知識。

1?? src文件夾下新建router文件夾。接著新建index.ts和permission.ts兩個文件。前者是路由，后面是路由攔截器，我喜歡放在一塊。你可以根據(jù)自己的情況放到其他位置也行。

2?? index.ts?路由配置

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

export const asyncRoutes: RouteRecordRaw[] = [
    {
        path: '/',
        name: 'home',
        meta: {
            title: 'home'
        },
        component: () => import('@/views/home.vue')
    },
    {
        path: '/home1',
        name: 'home1',
        meta: {
            title: 'home1'
        },
        component: () => import('@/views/home1.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes: asyncRoutes,
    scrollBehavior: () => ({ left: 0, top: 0 })
})

export default router

3?? permission.ts路由攔截器,這里面使用到了nprogress頂部加載效果

import router from '@/router'
// @ts-ignore
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({
    easing: 'ease', // 動畫方式
    showSpinner: true, // 是否顯示加載ico
    trickleSpeed: 200, // 自動遞增間隔
    minimum: 0.4, // 更改啟動時使用的最小百分比
})

const whiteList = ['/login', '/redirect']

router.beforeEach((to, form, next) => {
    // 這里處理自己的邏輯,比如需要登錄以后才能訪問其他頁面等等
    NProgress.start()
    next()
    NProgress.done()
})

4?? src下main.ts 文件修改

import { createApp } from 'vue'

import App from './App.vue'
import 'animate.css'
import router from '@/router';
import '@/router/permission'
import 'element-plus/theme-chalk/dark/css-vars.css'

const app = createApp(App);

app.use(router)

app.mount('#app')

5?? src下新建views文件夾,文件夾下新建home.vue和home1.vue兩個文件

home.vue

<template>
  <div style="background: rgb(217, 217, 217);height: 100vh;width: 100%;display: flex;align-items: center;justify-content: center;">
    <el-button type="primary" @click="goHome">去home</el-button>
    <el-button type="primary" @click="changeCount">++++</el-button>
    <div style="color: red;font-size: 22px;">{{ count }}</div>
  </div>
</template>

<script lang="ts">
import {useRouter} from "vue-router";

export default defineComponent({
  setup() {

    const router = useRouter();

    let data = reactive({
      count: 1,
    })

    const changeCount = () => {
      data.count++
    }

    const goHome = () => {
      router.push({
        path: '/home1'
      })
    }

    return {
      changeCount,
      goHome,
      ...toRefs(data)
    }
  }
})
</script>

hom1.vue

<template>
  <div style="background: #ffffff;height: 100vh;width: 100%;display: flex;align-items: center;justify-content: center;">
    <el-button type="primary" @click="goHome1">回home</el-button>
    <el-button type="primary" @click="changeCount">++++</el-button>
    <div style="color: red;font-size: 22px;">{{ count }}</div>
  </div>
</template>

<script lang="ts">
import {useRouter} from "vue-router";

export default defineComponent({
  setup() {

    const router = useRouter();

    let data = reactive({
      count: 1,
    })

    const changeCount = () => {
      data.count++
    }

    const goHome1 = () => {
      router.push({
        path: '/'
      })
    }

    return {
      changeCount,
      goHome1,
      ...toRefs(data)
    }
  }
})
</script>

6?? App.vue修改,這里就使用到了animate.css,給切換路由增加一些動畫

<template>
  <router-view #default="{route, Component}">
    <transition leave-from-class="ts-web-fade--leave-to" enter-active-class="animate__animated animate__bounceInRight">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>

7?? 項目目錄

8?? 最終的效果，可以看到切換路由的時候右上角有個圈圈在轉動，因為截屏的原因，看不到頂部的加載條。還可以看到切換路由時的動畫。

?注：這里只是一個簡單的搭建demo，所以攔截器沒有做過多的擴展。我的另一篇文章有詳細講解動態(tài)路由的實現(xiàn)，但是建議先把本篇文章走完以后再去看。Vite4 + Vue3 + vue-router4 動態(tài)路由如果有問題的話可以聯(lián)系我????SH--TS。

伍、pinia狀態(tài)管理?????????

為啥沒有使用vuex而選擇pinia來實現(xiàn)狀態(tài)管理。相對于vuex來說，它更好的支持TypeScript、非常輕巧(體積約 1KB)等等優(yōu)勢。而且尤雨溪大佬也推薦使用。至于它倆如何做選擇。可以根據(jù)自己的項目情況，如果是中小型項目的話推薦pinia。如果大規(guī)模、高復雜度的話就選vuex。

1?? src文件夾下新建pinia，以及文件夾下新建index.ts等等。如下圖

2?? /pinia/modules/views.ts

import { defineStore } from 'pinia'

export interface IViewsState {
    count?: number
    title?: string
}

// 創(chuàng)建一個pinia, defineStore接受兩個參數(shù)，第一個是id(唯一的)。參數(shù)二是配置項
export const viewsModule = defineStore('VIEWS',{
    state(): IViewsState {
        return {
            count: 1,
            title: 'Etc.End'
        }
    },
    //可以操作異步 和 同步提交state
    actions:{
        // 這里因為我的count定義的類型不是必有參數(shù),所有它會存在空的情況.
        // 后面只需要加個!讓編譯器知道它不會未定義或不會為null
        // 也可以把上面的count?: number更改為count: number,下面就不用加!了
        incremental() {
            this.count!++
        },
        getCount() {
            return this.count
        }
    },
    // 類似于computed 可以幫我們?nèi)バ揎椢覀兊闹?    getters:{
        newCount ():number | string {
            return this.count = 0
        },
        newTitle ():string {
            return `$-${this.title}`
        }
    },
})

3?? /pinia/index.ts

import { viewsModule } from './modules/views';

export interface IAppStore {
    viewsModule: ReturnType<typeof viewsModule>;
}

const appStore: IAppStore = {} as IAppStore;

export const registerStore = () => {
    appStore.viewsModule = viewsModule();
};

export default appStore;

4?? main.ts

import { createApp } from 'vue'

import App from './App.vue'
import 'animate.css'
import { createPinia } from 'pinia';
import { registerStore } from '@/pinia';
import router from '@/router';
import '@/router/permission'
import 'element-plus/theme-chalk/dark/css-vars.css'

const app = createApp(App);

app.use(router)
app.use(createPinia())
// 這里是進行一個注冊，不然的話頁面上是拿不到值的
registerStore()

app.mount('#app')

5?? 修改之前的home.vue頁面

<template>
  <div style="background: rgb(217, 217, 217);height: 100vh;width: 100%;padding-top: 100px;">
    <div style="text-align: center;margin-top: 50px;">
      <el-button type="primary" @click="goHome">去home1</el-button>
    </div>
    <div style="text-align: center;margin-top: 50px;">
      <el-button type="primary" @click="directChange">直接修改count的值</el-button>
      <el-button type="primary" @click="batchChange">批量修改pinia的值</el-button>
      <el-button type="primary" @click="callAction">actions修改pinia的值</el-button>
    </div>
    <div style="text-align: center;margin-top: 50px;color: red;font-size: 22px;">
      <div>{{ count }}</div>
      <div>{{ title }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import {useRouter} from "vue-router";
import { storeToRefs } from 'pinia';
import appStore from '@/pinia';

export default defineComponent({
  setup() {

    const router = useRouter();

    // 這里是個小知識點,因為pinia不允許直接解構,比如下面
    // const { count, title } = appStore.viewsModule
    // 這樣寫的話會失去響應式,所以得使用storeToRefs
    const { count, title } = storeToRefs(appStore.viewsModule)

    // 直接修改views里面的count值
    const directChange = () => {
      appStore.viewsModule.count!++
    }

    // 批量修改views的值
    const batchChange = () => {
      appStore.viewsModule.$patch({
        count: 100,
        title: 'Etc-End'
      })
      // 還可以這樣寫,和上面一樣的效果
      // appStore.viewsModule.$state = {
      //   count: 100,
      //   title: 'Etc-End'
      // }
    }

    const callAction = () => {
      appStore.viewsModule.incremental()
    }

    const goHome = () => {
      router.push({
        path: '/home1'
      })
    }

    return {
      directChange,
      batchChange,
      callAction,
      goHome,
      count,
      title
    }
  }
})
</script>

6?? 修改之前的home1.vue頁面

<template>
  <div style="background: rgb(217, 217, 217);height: 100vh;width: 100%;padding-top: 100px;">
    <div style="text-align: center;margin-top: 50px;">
      <el-button type="primary" @click="goHome">回home</el-button>
    </div>
    <div style="text-align: center;margin-top: 50px;">
      <el-button type="primary" @click="directChange">直接修改count的值</el-button>
      <el-button type="primary" @click="batchChange">批量修改pinia的值</el-button>
      <el-button type="primary" @click="callAction">actions修改pinia的值</el-button>
    </div>
    <div style="text-align: center;margin-top: 50px;color: red;font-size: 22px;">
      <div>{{ count }}</div>
      <div>{{ title }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import {useRouter} from "vue-router";
import { storeToRefs } from 'pinia';
import appStore from '@/pinia';

export default defineComponent({
  setup() {

    const router = useRouter();

    // 這里是個小知識點,因為pinia不允許直接解構,比如下面
    // const { count, title } = appStore.viewsModule
    // 這樣寫的話會失去響應式,所以得使用storeToRefs
    const { count, title } = storeToRefs(appStore.viewsModule)

    // 直接修改views里面的count值
    const directChange = () => {
      appStore.viewsModule.count!++
    }

    // 批量修改views的值
    const batchChange = () => {
      appStore.viewsModule.$patch({
        count: 100,
        title: 'Etc-End'
      })
      // 還可以這樣寫,和上面一樣的效果
      // appStore.viewsModule.$state = {
      //   count: 100,
      //   title: 'Etc-End'
      // }
    }

    const callAction = () => {
      appStore.viewsModule.incremental()
    }

    const goHome = () => {
      router.push({
        path: '/'
      })
    }

    return {
      directChange,
      batchChange,
      callAction,
      goHome,
      count,
      title
    }
  }
})
</script>

7?? 最終效果，下圖中可以看到，狀態(tài)管理已經(jīng)到達效果。切換路由后，拿到的count和title值都是更改后的。

?注：切換路由是沒有問題，但頁面刷新狀態(tài)就會丟失。解決這個問題的話也很簡單，搭配localStorage寫一個插件就可以達到持久化。這里就不做演示了，自行研究一下。

陸、國際化

Vite4 + Vue3 + ElementPlus 實現(xiàn)國際化包括表單校驗(超詳細)

我是Etc.End。如果文章對你有所幫助，能否幫我點個免費的贊和收藏??。

?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??文章來源地址http://www.zghlxwxcb.cn/news/detail-418790.html

到了這里，關于Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3項目(組件、圖標等按需引入)[保姆級]的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！