Vite+Vue3+Element Plus环境搭建

发表于 2023-10-17 分类于前端开发

Vite

Vite简介

Vite 是一个现代化的构建工具，专为 Vue.js 3 和现代 JavaScript 打包准备的。以下是关于 Vite 的一些关键特点和介绍：

快速的开发服务器：Vite 提供了一个极其快速的本地开发服务器，能够在几毫秒内启动项目，因此它非常适合开发过程中的实时调试和快速迭代。
即时热更新：Vite 支持热模块替换（HMR），这意味着在开发时，当你编辑代码后，只有修改的部分会被重新加载，而不是整个页面刷新。这加速了开发过程。
基于 ES 模块：Vite 利用 ES 模块的特性，将代码拆分成多个小文件，只加载需要的部分，以减小加载时间。这有助于提高项目的性能。
原生支持 Vue 3：Vite 为 Vue.js 3 提供了本地支持，这意味着你可以直接导入 .vue 单文件组件，而无需预处理器或打包配置。
插件体系：Vite 支持各种插件，允许你根据项目需求来扩展和自定义构建流程。例如，你可以轻松地添加 PostCSS、TypeScript、CSS 预处理器等插件。
多模式支持：Vite 支持开发模式、生产模式以及自定义模式，允许你根据需求配置项目的行为。
自动生成 HTML：Vite 可以自动生成 index.html 文件，包括自动引入构建后的资源文件。这减少了手动配置的需求。
无需配置文件：Vite 鼓励零配置，意味着你可以立即开始项目开发，而不需要复杂的配置文件。当然，如果需要，你仍然可以添加配置文件进行更高级的自定义。

Vite安装

要安装 Vite，你需要使用 npm 或 yarn 这两个 Node.js 包管理工具之一。下面是使用 npm 安装 Vite 的步骤：

首先，确保你已经安装了 Node.js。如果你还没有安装，你可以在 Node.js 官网下载并安装它。
打开终端或命令提示符，并运行以下命令来安装 Vite：

1	npm create vite@latest

安装过程中会让你选择前端框架，和选择Javascript或TypeScript我们选择Vue和TypeScript即可。

sutune@sutunedeMac-mini ~ % npm create vite@latest
✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in /Users/sutune/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

这将创建一个名为 vite-project 的文件夹，其中包含了一个新的 Vite 项目的基本结构。

进入项目文件夹：

1	cd vite-project

最后，你可以使用 npm 安装项目依赖，最后运行项目在浏览器输入http://localhost:5173/即可打开项目首页

1 2	npm install npm run dev

vite

vite目录结构

在一个 Vite + Vue 3 项目中，通常的项目目录结构如下：

my-vite-project/
  ├── node_modules/         # 项目依赖
  ├── public/               # 静态资源目录
  │     ├── index.html     # 主 HTML 文件
  │     └── favicon.ico    # 网站图标
  ├── src/                  # 项目源码
  │     ├── assets/         # 静态资源，如图片
  │     ├── components/     # Vue 组件
  │     ├── views/          # 页面级组件
  │     ├── App.vue         # 主应用组件
  │     └── main.js         # 项目入口文件
  ├── package.json          # 项目依赖和配置
  ├── vite.config.ts        # Vite 配置文件
  ├── README.md             # 项目说明文档
  └── .gitignore            # Git 忽略文件配置

node_modules/：存放项目的依赖包。
public/：静态资源目录，包括 HTML 模板文件 index.html 和其他静态文件如网站图标 favicon.ico。
src/：项目源码目录，包括：
- assets/：静态资源文件夹，如图片等。
- components/：Vue 组件目录，可包含各种可重用的组件。
- views/：页面级组件目录，通常每个组件对应一个页面。
- App.vue：主应用组件，通常包含应用的布局和共享的组件。
- main.js：项目的入口文件，用于初始化 Vue 应用和加载其他依赖。
package.json：项目的依赖配置文件，包括项目依赖、脚本命令、和其他配置。
vite.config.js：Vite 的配置文件，用于配置构建选项、插件、开发服务器等。
README.md：项目的说明文档，通常包括项目的介绍和使用说明。
.gitignore：Git 忽略文件配置，用于指定不需要被版本控制的文件和目录。

Element Plus引入

简介

Element Plus 是一款用于 Vue.js 3 的开源 UI 组件库，它是 Element UI 的升级版。Element Plus 提供了一套丰富的现代化 UI 组件，用于构建 Web 应用程序的前端界面。

引入步骤

官网提供了三种用法完整引入、按需引入、手动导入，这里我们使用按需导入（可以使打包文件变小）官方也推荐使用按需引入。

首先你需要在你的项目目录下安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

2.在 Vite 的配置文件vite.config.ts中添加如下代码

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

添加完成之后的代码如下

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()],
    }),
  
  ],
  
})

打开 Element组件库，复制一段代码到App.vue中的template标签中即可看到效果。

element-code

<template>

  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  

</template>

vue-element