天天看點
傳回

Vue3項目實踐-第四篇（項目配置與安裝）

作者：繪芽研究社1号

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

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

Vue3項目實踐-第四篇（項目配置與安裝）

本文将介紹以下内容：

1.建立項目

2.項目配置

3.安裝和配置路由

4.介紹 Element Plus

建立項目

  1. 要使用 Vite 建立一個新項目:
Vue3項目實踐-第四篇（項目配置與安裝）
npm init vite@latest my-project --template [template-name]

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

  • vanilla: 一個簡單的 JavaScript 項目模闆。
  • vue: 一個使用 Vue.js 的項目模闆。
  • react: 一個使用 React 的項目模闆。
  • preact: 一個使用 Preact 的項目模闆。
  • lit: 一個使用 Lit 架構的項目模闆。
  • 以下是使用 Vue 模闆建立項目的示例： 
npm init vite@latest my-project --template vue
  1. 安裝項目依賴： 
npm install
  1. 運作項目： 
npm run dev

項目配置

Vite 官方文檔：https://vitejs.dev/config/
Vue3項目實踐-第四篇（項目配置與安裝）

在 Vite 中，vite.config.ts 是用于配置項目的配置檔案。您可以在該檔案中配置伺服器選項，包括主機、端口、代理等。以下是一個示例的 vite.config.ts 檔案，展示了如何配置伺服器：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    host: '127.0.0.1', // 設定伺服器主機，預設為 127.0.0.1\localhost
    port: 3000, // 設定伺服器端口，預設為 3000
    open: true, // 自動打開浏覽器，預設為 false
    proxy: {
      '/api': {
        target: 'https://api.example.com', // 設定代理目标位址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''), // 重寫請求路徑，去掉 '/api' 字首
      },
    },
  },
});

在這個示例中，我們使用 defineConfig 函數來定義配置對象。其中 server 是一個子對象，用于配置伺服器選項。

  • host：指定伺服器主機，預設為 '127.0.0.1 或 localhost'。
  • port：指定伺服器端口，預設為 3000。
  • open：設定為 true 時，啟動伺服器後會自動在浏覽器中打開項目，預設為 false。
  • proxy：用于配置代理選項，可以将某些請求轉發到其他伺服器。在這個示例中，我們将以 /api 開頭的請求轉發到 https://api.example.com。changeOrigin 選項設定為 true 以確定請求頭中的 Host 字段被設定為代理目标位址。rewrite 函數用于重寫請求路徑，将 /api 字首去掉，以便正确比對代理請求。

您可以根據需要修改 vite.config.ts 檔案中的伺服器配置，以滿足您的項目需求。更多關于 Vite 的配置選項，請參考 Vite 官方文檔。

安裝和配置路由

官方文檔：https://router.vuejs.org/
Vue3項目實踐-第四篇（項目配置與安裝）

Vue Router 是 Vue.js 官方的路由管理器，它允許您在單頁應用程式中實作導航和路由功能。

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

  • 安裝 Vue Router。運作以下指令進行安裝： 
npm install vue-router
  • 在您的項目中建立一個新的檔案夾，用于存放路由相關的代碼。例如，您可以在項目根目錄下建立一個名為 router 的檔案夾。
  • 在 router 檔案夾中建立一個新的 JavaScript 檔案，例如 index.js，用于配置和建立路由執行個體。在該檔案中，您需要導入 Vue 和 Vue Router，并建立一個新的路由執行個體。 
// router/index.js
import { 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;

在上面的示例中，我們建立了兩個路由：/ 對應的元件是 Home，/about 對應的元件是 About。

  • 在您的主入口檔案（通常是 main.js）中，導入路由執行個體并将其挂載到 Vue 應用中。 
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 應用中。

  • 最後，在您的元件中可以使用 <router-link> 和 <router-view> 來實作路由導航和顯示元件的功能。 
<!-- 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>

現在，您已經成功安裝并配置了 Vue Router。您可以根據需要在 router/index.js 檔案中定義更多的路由規則，并在元件中使用 <router-link> 和 <router-view> 實作導航和路由功能。

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

介紹 Element Plus

官方文檔：https://element-plus.org
Vue3項目實踐-第四篇（項目配置與安裝）

Element Plus 是一套基于 Vue.js 的開源 UI 元件庫，用于建構 Web 應用程式的使用者界面。它是對原始 Element UI 元件庫的更新和改進，提供了一系列功能強大、易于使用的 UI 元件，幫助開發者快速建構美觀、響應式的界面。

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

  • 安裝 Element Plus：使用 npm 或 yarn 進行安裝。 
# 使用 npm
npm install element-plus

# 使用 yarn
yarn add element-plus
  • 引入 Element Plus：在您的項目入口檔案（通常是 main.js）中，導入 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");

在上面的示例中，我們首先導入 Element Plus 的樣式檔案 element-plus/dist/index.css，然後通過 app.use(ElementPlus) 将 Element Plus 注冊到 Vue 應用中。

  • 首先你需要安裝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()],
    })
  ], 

  // 開發伺服器選項
  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 元件。您可以根據需要使用 Element Plus 的其他元件，比如表單、表格、彈框、導航等。

請注意，Element Plus 提供了豐富的元件和功能，您可以根據項目需要選擇合适的元件進行使用。

項目配置 項目實踐 配置
上一篇: 關于删除流氓bpsvc程序
下一篇: FSCapture錄屏軟體

繼續閱讀