Vue3項目實踐-第四篇（項目配置與安裝）（vue項目搭建配置）
Vite 官方文檔：https://vitejs.dev/
element-plus 官方文檔：https://element-plus.org
本文將介紹以下內(nèi)容：
1.創(chuàng)建項目
2.項目配置
3.安裝和配置路由
4.介紹 Element Plus
創(chuàng)建項目
- 要使用 Vite 創(chuàng)建一個新項目:
npm init vite@latest my-project --template [template-name]
請將 [template-name] 替換為您想要使用的模板名稱。Vite 提供了幾個預(yù)定義的模板可供選擇，例如：
- vanilla: 一個簡單的 JavaScript 項目模板。
- vue: 一個使用 Vue.js 的項目模板。
- react: 一個使用 React 的項目模板。
- preact: 一個使用 Preact 的項目模板。
- lit: 一個使用 Lit 框架的項目模板。
- 以下是使用 Vue 模板創(chuàng)建項目的示例：
npm init vite@latest my-project --template vue
- 安裝項目依賴：
npm install
- 運行項目：
npm run dev
項目配置
Vite 官方文檔：https://vitejs.dev/config/
在 Vite 中，vite.config.ts 是用于配置項目的配置文件。您可以在該文件中配置服務(wù)器選項，包括主機、端口、代理等。以下是一個示例的 vite.config.ts 文件，展示了如何配置服務(wù)器：
import { defineConfig } from 'vite';export default defineConfig({ server: { host: '127.0.0.1', // 設(shè)置服務(wù)器主機，默認為 127.0.0.1localhost port: 3000, // 設(shè)置服務(wù)器端口，默認為 3000 open: true, // 自動打開瀏覽器，默認為 false proxy: { '/api': { target: 'https://api.example.com', // 設(shè)置代理目標地址 changeOrigin: true, rewrite: (path) => path.replace(/^/api/, ''), // 重寫請求路徑，去掉 '/api' 前綴 }, }, },});
在這個示例中，我們使用 defineConfig 函數(shù)來定義配置對象。其中 server 是一個子對象，用于配置服務(wù)器選項。
- host：指定服務(wù)器主機，默認為 '127.0.0.1 或 localhost'。
- port：指定服務(wù)器端口，默認為 3000。
- open：設(shè)置為 true 時，啟動服務(wù)器后會自動在瀏覽器中打開項目，默認為 false。
- proxy：用于配置代理選項，可以將某些請求轉(zhuǎn)發(fā)到其他服務(wù)器。在這個示例中，我們將以 /api 開頭的請求轉(zhuǎn)發(fā)到 https://api.example.com。changeOrigin 選項設(shè)置為 true 以確保請求頭中的 Host 字段被設(shè)置為代理目標地址。rewrite 函數(shù)用于重寫請求路徑，將 /api 前綴去掉，以便正確匹配代理請求。
您可以根據(jù)需要修改 vite.config.ts 文件中的服務(wù)器配置，以滿足您的項目需求。更多關(guān)于 Vite 的配置選項，請參考 Vite 官方文檔。
安裝和配置路由
官方文檔：https://router.vuejs.org/
Vue Router 是 Vue.js 官方的路由管理器，它允許您在單頁應(yīng)用程序中實現(xiàn)導(dǎo)航和路由功能。
以下是在 Vite 中安裝和配置 Vue router 的步驟：
- 安裝 Vue Router。運行以下命令進行安裝：
npm install vue-Router
- 在您的項目中創(chuàng)建一個新的文件夾，用于存放路由相關(guān)的代碼。例如，您可以在項目根目錄下創(chuàng)建一個名為 router 的文件夾。
- 在 router 文件夾中創(chuàng)建一個新的 JavaScript 文件，例如 index.js，用于配置和創(chuàng)建路由實例。在該文件中，您需要導(dǎo)入 Vue 和 Vue Router，并創(chuàng)建一個新的路由實例。
// 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)入路由實例并將其掛載到 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')
在上面的示例中，我們將路由實例通過 .use(router) 方法掛載到 Vue 應(yīng)用中。
- 最后，在您的組件中可以使用 <router-link> 和 <router-view> 來實現(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> 實現(xiàn)導(dǎo)航和路由功能。
請注意，以上是一個基本的 Vue Router 配置示例。在實際應(yīng)用中，您可能需要處理更復(fù)雜的路由情況，例如路由參數(shù)、嵌套路由等。
介紹 Element Plus
官方文檔：https://element-plus.org
Element Plus 是一套基于 Vue.js 的開源 UI 組件庫，用于構(gòu)建 Web 應(yīng)用程序的用戶界面。它是對原始 Element UI 組件庫的升級和改進，提供了一系列功能強大、易于使用的 UI 組件，幫助開發(fā)者快速構(gòu)建美觀、響應(yīng)式的界面。
以下是使用 Element Plus 的基本步驟：
- 安裝 Element Plus：使用 npm 或 yarn 進行安裝。
# 使用 npmnpm install element-plus# 使用 yarnyarn add element-plus
- 引入 Element Plus：在您的項目入口文件（通常是 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ù)器選項 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ù)項目需要選擇合適的組件進行使用。
