Vite 官方文檔：https://vitejs.dev/

element-plus 官方文檔：https://element-plus.org

本文將介紹以下內(nèi)容：

1.創(chuàng)建項(xiàng)目

2.項(xiàng)目配置

3.安裝和配置路由

4.介紹 Element Plus

創(chuàng)建項(xiàng)目

2. 要使用 Vite 創(chuàng)建一個新項(xiàng)目:

npm init vite@latest my-project --template [template-name]

請將 [template-name] 替換為您想要使用的模板名稱。Vite 提供了幾個預(yù)定義的模板可供選擇，例如：

• vanilla: 一個簡單的 JavaScript 項(xiàng)目模板。
• vue: 一個使用 Vue.js 的項(xiàng)目模板。
• react: 一個使用 React 的項(xiàng)目模板。
• preact: 一個使用 Preact 的項(xiàng)目模板。
• lit: 一個使用 Lit 框架的項(xiàng)目模板。
• 以下是使用 Vue 模板創(chuàng)建項(xiàng)目的示例：

npm init vite@latest my-project --template vue

3. 安裝項(xiàng)目依賴：

npm install

4. 運(yùn)行項(xiàng)目：

npm run dev

項(xiàng)目配置

Vite 官方文檔：https://vitejs.dev/config/

在 Vite 中，vite.config.ts 是用于配置項(xiàng)目的配置文件。您可以在該文件中配置服務(wù)器選項(xiàng)，包括主機(jī)、端口、代理等。以下是一個示例的 vite.config.ts 文件，展示了如何配置服務(wù)器：

import { defineConfig } from 'vite';export default defineConfig({ server: { host: '127.0.0.1', // 設(shè)置服務(wù)器主機(jī)，默認(rèn)為 127.0.0.1localhost port: 3000, // 設(shè)置服務(wù)器端口，默認(rèn)為 3000 open: true, // 自動打開瀏覽器，默認(rèn)為 false proxy: { '/api': { target: 'https://api.example.com', // 設(shè)置代理目標(biāo)地址 changeOrigin: true, rewrite: (path) => path.replace(/^/api/, ''), // 重寫請求路徑，去掉 '/api' 前綴 }, }, },});

在這個示例中，我們使用 defineConfig 函數(shù)來定義配置對象。其中 server 是一個子對象，用于配置服務(wù)器選項(xiàng)。

• host：指定服務(wù)器主機(jī)，默認(rèn)為 '127.0.0.1 或 localhost'。
• port：指定服務(wù)器端口，默認(rèn)為 3000。
• open：設(shè)置為 true 時，啟動服務(wù)器后會自動在瀏覽器中打開項(xiàng)目，默認(rèn)為 false。
• proxy：用于配置代理選項(xiàng)，可以將某些請求轉(zhuǎn)發(fā)到其他服務(wù)器。在這個示例中，我們將以 /api 開頭的請求轉(zhuǎn)發(fā)到 https://api.example.com。changeOrigin 選項(xiàng)設(shè)置為 true 以確保請求頭中的 Host 字段被設(shè)置為代理目標(biāo)地址。rewrite 函數(shù)用于重寫請求路徑，將 /api 前綴去掉，以便正確匹配代理請求。

您可以根據(jù)需要修改 vite.config.ts 文件中的服務(wù)器配置，以滿足您的項(xiàng)目需求。更多關(guān)于 Vite 的配置選項(xiàng)，請參考 Vite 官方文檔。

安裝和配置路由

官方文檔：https://router.vuejs.org/

Vue Router 是 Vue.js 官方的路由管理器，它允許您在單頁應(yīng)用程序中實(shí)現(xiàn)導(dǎo)航和路由功能。

以下是在 Vite 中安裝和配置 Vue router 的步驟：

• 安裝 Vue Router。運(yùn)行以下命令進(jìn)行安裝：

npm install vue-Router

• 在您的項(xiàng)目中創(chuàng)建一個新的文件夾，用于存放路由相關(guān)的代碼。例如，您可以在項(xiàng)目根目錄下創(chuàng)建一個名為 router 的文件夾。
• 在 router 文件夾中創(chuàng)建一個新的 JavaScript 文件，例如 index.js，用于配置和創(chuàng)建路由實(shí)例。在該文件中，您需要導(dǎo)入 Vue 和 Vue Router，并創(chuàng)建一個新的路由實(shí)例。

// router/index.jsimport { createRouter, createWebHistory } from "vue-router";const routes = [ { path: "/", component: () => import("../src/views/Home.vue"), }, { path: "/about", component: () => import("../src/views/About.vue"), },];const router = createRouter({ history: createWebHistory(), routes: routes,});export default router;

在上面的示例中，我們創(chuàng)建了兩個路由：/ 對應(yīng)的組件是 Home，/about 對應(yīng)的組件是 About。

• 在您的主入口文件（通常是 main.js）中，導(dǎo)入路由實(shí)例并將其掛載到 Vue 應(yīng)用中。

import { createApp } from 'vue'import './style.css'import App from './App.vue'import router from '../router';createApp(App).use(router).mount('#app')

在上面的示例中，我們將路由實(shí)例通過 .use(router) 方法掛載到 Vue 應(yīng)用中。

• 最后，在您的組件中可以使用 <router-link> 和 <router-view> 來實(shí)現(xiàn)路由導(dǎo)航和顯示組件的功能。

<!-- App.vue--><template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> </div></template><script setup lang="ts"></script>

現(xiàn)在，您已經(jīng)成功安裝并配置了 Vue Router。您可以根據(jù)需要在 router/index.js 文件中定義更多的路由規(guī)則，并在組件中使用 <router-link> 和 <router-view> 實(shí)現(xiàn)導(dǎo)航和路由功能。

請注意，以上是一個基本的 Vue Router 配置示例。在實(shí)際應(yīng)用中，您可能需要處理更復(fù)雜的路由情況，例如路由參數(shù)、嵌套路由等。

介紹 Element Plus

官方文檔：https://element-plus.org

Element Plus 是一套基于 Vue.js 的開源 UI 組件庫，用于構(gòu)建 Web 應(yīng)用程序的用戶界面。它是對原始 Element UI 組件庫的升級和改進(jìn)，提供了一系列功能強(qiáng)大、易于使用的 UI 組件，幫助開發(fā)者快速構(gòu)建美觀、響應(yīng)式的界面。

以下是使用 Element Plus 的基本步驟：

• 安裝 Element Plus：使用 npm 或 yarn 進(jìn)行安裝。

# 使用 npmnpm install element-plus# 使用 yarnyarn add element-plus

• 引入 Element Plus：在您的項(xiàng)目入口文件（通常是 main.js）中，導(dǎo)入 Element Plus 的樣式和組件。

import { createApp } from "vue";// import './style.css'import ElementPlus from "element-plus";import "element-plus/dist/index.css";import App from "./App.vue";import router from "../router";createApp(App).use(ElementPlus).use(router).mount("#app");

在上面的示例中，我們首先導(dǎo)入 Element Plus 的樣式文件 element-plus/dist/index.css，然后通過 app.use(ElementPlus) 將 Element Plus 注冊到 Vue 應(yīng)用中。

• 首先你需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代碼插入到你的 Vite 的配置文件中

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }) ], // 開發(fā)服務(wù)器選項(xiàng) server:{ host:"127.0.0.1", port:5000, open:false }})

請參考 : unplugin-vue-components 和 unplugin-auto-import。

• 使用 Element Plus 組件：在您的 Vue 組件中，您可以直接使用 Element Plus 的各種組件。

<template> <h1>Home</h1> <div> <el-button type="primary">Primary Button</el-button> <!-- 其他 Element Plus 組件 --> </div></template><script lang="ts" setup></script>

在上面的示例中，我們使用了 Element Plus 的 el-button 組件。您可以根據(jù)需要使用 Element Plus 的其他組件，比如表單、表格、彈框、導(dǎo)航等。

請注意，Element Plus 提供了豐富的組件和功能，您可以根據(jù)項(xiàng)目需要選擇合適的組件進(jìn)行使用。