一、搭建方式介绍
vue cli脚手架是vue2时代基于webpack封装的打包工具，现如今vue3一般使用官方推荐的vite构建工具（热更新速度更快）
1、使用基于webpack的类似以前vue2的脚手架vue cli（vue3推荐使用vite）
npm install -g @vue/cli
vue create hello-vue3
2、使用vite构建一个基础项目（不推荐，如果需要用到 Router 、 Vuex 、 ESLint 等程序，都需要再单独安装和配置）
npm create vite
3、使用vue官方默认的脚手架（vite），可以选择整合pinia等插件（默认整合sass了）
脚手架官方：github.com/vuejs/creat…
npm create vue@latest
> npm create vue@latest
> npx
> create-vue
Vue.js - The Progressive JavaScript Framework
√ 请输入项目名称： ... test-create-vue
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是
正在初始化项目 D:\coding\for-vue\test-create-vue...
项目初始化完成，可执行以下命令：
cd test-create-vue
npm install
npm run format
npm run dev
以上构建过程一般选择：Vue Router 4（页面跳转的路由管理）、Pinia（全局状态管理）、ESLint（代码格式检查）、Prettier（代码格式化，有些编辑器自带）
4、使用npm create preset搭建（根据之前的项目模板预设来搭建，可以是react等各种模板）
官方文档：preset.js.org/zh/guide/in…
预设的模板：preset.js.org/zh/docs/sta…
| 来源 | 说明 | 颜色 | 查看 |
|---|---|---|---|
| 官方维护 | 由 Awesome Starter 官方团队维护 | 黄色 | official.json |
| 开源社区 | 从 GitHub 等开源社区发现的优秀模板 | 白色 | community.json |
| 本地配置 | 您存储在计算机本地的一个配置文件 | 青蓝色 | 本地配置文件 |
比如使用预设的模板vue3-ts-vite来搭建：
> npm create preset
√ Get the latest config successfully.
√ Project name: ... ss
√ Select a tech stack: » vue
√ Select a variant: » vue3-ts-vite - A template for Vue 3.0 with TypeScript, base on Vite.
Scaffolding project in D:\coding\for-vue\ss...
| Downloading…
√ Download successfully.
Done. Now run:
cd ss
npm install
npm run dev
二、搭建项目 空框架
这里我使用上面提到的 3、使用vue官方默认的脚手架（vite）这种方式搭建
**前提：**已经通过nvm（node version mangement）安装好了高版本的node.js（自带npm）
npm create vue@latest
可以看到创建的项目已经有了基本的目录结构：
package.json的依赖如下：
{
"name": "bend-vue3",
"version": "0.0.1",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test:unit": "vitest",
"lint": "eslint . --fix",
"format": "prettier --write src/"
},
"dependencies": {
"pinia": "^2.2.4",
"vue": "^3.5.12",
"vue-router": "^4.4.5"
},
"devDependencies": {
"@eslint/js": "^9.12.0",
"@vitejs/plugin-vue": "^5.1.4",
"@vitest/eslint-plugin": "1.1.7",
"@vue/eslint-config-prettier": "^10.0.0",
"@vue/test-utils": "^2.4.6",
"eslint": "^9.12.0",
"eslint-plugin-vue": "^9.29.0",
"jsdom": "^25.0.1",
"prettier": "^3.3.3",
"vite": "^5.4.8",
"vitest": "^2.1.2"
}
}
由于npm下载速度较慢，所以我使用pnpm初始化项目的包依赖（yarn等等其他的也可以）：
pnpm install
三、添加element-plus
引入element-plus:element-plus.org/zh-CN/guide…
pnpm install element-plus
配置项目按需引入element UI 的组件：element-plus.org/zh-CN/guide…
pnpm install -D unplugin-vue-components unplugin-auto-import
在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()],
}),
],
})
引入element-plus的图标依赖：pnpm install @element-plus/icons-vue
