vite+vue3项目构建

Vite 是一个现代化的前端构建工具，特别适合构建 Vue.js 应用程序。通过预构建和懒加载等优化方式实现快速开发和热更新，同时内置了一些优化策略，可以提高应用程序的性能和用户体验。Vue Cli如何使用Vite 构建Vue应用程序，可参考官网https://cn.vitejs.dev/，该网站提供包括安装Vite，创建Vue项目，配置Vite选项，以及Vite开发服务器的使用方法等。此外，还提供丰富的文档和示例代码，帮助我们更好地理解和使用Vite。

一、npm

1.创建Vue项目

在命令行中进入希望创建项目的目录，执行以下命令：

npm create vite@latest my-vue-app -- --template vue

上述命令用来创建一个基于 Vue.js 模板的 Vite 项目的，具体解释如下：

• npm create：使用 npm 包管理器的 create 命令创建一个新项目。
• vite@latest：指定项目使用最新版本的 Vite 构建工具。
• my-vue-app：指定项目名称，名称可自定义。
• --： 表示将后面的参数传递给 Vite 脚手架，而不是 npm create 命令。
• --template vue：指定项目使用Vue.js 模板。这意味着 Vite 将使用 Vue.js 的相关配置和依赖项来构建项目。

命令执行后将在当前目录下创建一个名为 my-vue-app 的新项目，Vite 将会安装到项目的 node_modules 目录下，并会初始化一个 Vue 项目的基本结构，包括一个最小化的 Vue 应用程序示例。使用IDEA新建或打开一个项目，接着在IDEA内置命令行terminal中输入上述创建Vue项目命令，如图4-9所示。

图4-9 IDEA创建Vue项目

2. 安装项目所需的依赖项

使用npm create命令创建Vue项目，会生成一个基本的项目结构和文件，但还需要安装一些依赖项，首先在terminal中执行如下命令：

cd my-vue-app

进入创建的 Vue项目所在目录，my-vue-app 是项目名称。

接着执行如下命令：

npm install

安装项目所需依赖项。命令执行后，NPM 将读取项目根目录下的package.json 文件，并下载和安装所有在 dependencies 和 devDependencies 中列出的依赖项。

3.运行开发服务器

在项目目录下，运行以下命令启动项目开发服务器。

npm run dev

命令执行结果如图4-10所示。

图4-10 启动Vue项目开发服务器

点击图4-10自动生成的服务器地址，会在默认浏览器中打开项目主页，主页效果如图4-11所示。

图4-11 Vue项目默认主页效果

在terminal命令行窗口中按下 Ctrl + C 组合键，可停止Vue项目服务器。

二、pnpm

通过pnpm包管理器安装，首先安装pnpm包管理器，通过 npm 安装：

npm install -g pnpm

pnpm的命令与npm大部分相同。

使用vite构建Vue项目，在IDEA中新建或打开一个项目，在终端命令行输入如下命令：

pnpm create vite pnpm-vue-app --template vue

根据屏幕提示依次执行下列命令

cd pnpm-vue-app

pnpm install

pnpm run dev //此命令运行Vue项目，可稍后执行

使用包管理器在当前项目安装Emelemt plus，命令如下：

# 选择下列一个包管理器进行安装

npm install element-plus

pnpm install element-plus

在修改新建Vue项目的main.js，引入Emelemt plus支持：

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

进入Emelemt plus官方网址组件栏目，粘贴任一组件的代码到App.vue组件文件，启动Vue项目：pnpm run dev