Vite+Vue3+Element Plus环境搭建
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
即可。
1 | sutune@sutunedeMac-mini ~ % npm create vite@latest |
这将创建一个名为 vite-project
的文件夹,其中包含了一个新的 Vite 项目的基本结构。
- 进入项目文件夹:
1 | cd vite-project |
- 最后,你可以使用 npm 安装项目依赖,最后运行项目在浏览器输入
http://localhost:5173/
即可打开项目首页
1 | npm install |
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中 添加如下代码
1 | // vite.config.ts |
添加完成之后的代码如下
1 | import { defineConfig } from 'vite' |
- 打开 Element组件库 ,复制一段代码到
App.vue
中的template
标签中即可看到效果。
1 | <template> |