學習筆記一：使用Vite腳手架搭建Vue3.x+Element Plus項目Demo

前言

學習 Vite 和 Vue3 并搭建項目 Demo，主要目的是搭項目，對于新手直接跟着操作就可以把項目搭起來，借這個機會自己嘗試寫寫部落格，希望對大家有幫助。

• 項目碼雲（Gitee）倉庫位址
• 個人首頁

參考連結

• 如何在 Vite 中使用 Element UI + Vue 3 - 知乎
• Vite 官網
• Element Plus 官網
• 如何在 Vite 中使用 Element UI + Vue 3

（一）Vite 介紹

随着 Vue 3 一起推出的還有一個強大的新一代打包工具 Vite, 一個面向現代浏覽器，基于原生子產品系統 ESModule 實作了按需編譯的 Web 開發建構工具，恰恰就解決了上述 Webpack 的痛點。

Vite 主要的優勢有三點：

• 快速冷啟動伺服器
• 即時熱子產品更換（HMR）
• 真正的按需編譯

（二）初始化項目

1.建立新目錄

mkdir vite-vue
cd vite-vue
           

2.安裝

npm create [email protected] vite-vue -- --template vue
           

// package.json
{
  "name": "vite-vue",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}
           

3.運作項目

cd vite-vue
npm install
npm run dev
           

4.目錄結構

5.配置項目伺服器監聽 IP 位址

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: "0.0.0.0", // 監聽所有位址（區域網路和公網）
    port: "5000", // 自定義端口号
  },
});
           

（三）引入 UI 架構 Element Plus

Element UI 不負衆望已經完成支援了。Element Plus 是餓了麼 Element UI 團隊推出的适配了 Vue 3 的全新版本，新增了很多實用元件，體驗非常好。

1.安裝

// package.json
{
  "name": "vite-vue",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.2.16",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}
           

2.在項目中引入

根據官方文檔，推薦使用自動導入：快速開始 | Element Plus

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

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 自動導入Element Plus
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(),
    // 自動導入Element Plus
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    host: "0.0.0.0", // 監聽所有位址（區域網路和公網）
    port: "5000", // 自定義端口号
  },
});
           

修改項目入口檔案，完整引入 Element Plus 庫和相關樣式檔案。

// src/main.js
import { createApp } from "vue";
import "./style.css";
import ElementPlus from "element-plus";
import App from "./App.vue";

const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");
           

3.頁面使用

修改 src/components/HelloWorld.vue 檔案的 Button：

<template>
  <el-button type="button" @click="count++">count is {{ count }}</el-button>
  .....
</template>