Vite 官网：https://cn.vitejs.dev/
Vue 官网：https://vuejs.org/
Vue 官方文档：https://cn.vuejs.org/guide/introduction.html
Element Plus 官网：https://element-plus.org/
Tailwind CSS 官网：https://tailwindcss.com/
安装 Node 环境
首先，确保已经安装了 Node.js，可以在命令行中运行 node -v 和 npm -v 来检查它们是否已经正确安装：
安装 Node.js 通常会自动附带安装 npm，所以你不需要单独安装 npm。只需确保 Node.js 版本符合要求即可。
切换 NPM 镜像源
使用 nrm 来管理 npm 镜像源可以帮助加速 npm 包的下载速度。
-
执行命令通过 npm 全局安装
nrm：npm install -g nrm -
使用
nrm ls命令列出当前可用的镜像源，以及它们的地址和当前使用的镜像源：nrm ls -
使用
nrm use命令来切换想要使用的镜像源，例如，切换到淘宝镜像源：nrm use taobao -
使用以下命令来验证切换是否成功：
npm config get registry
安装 Pnpm 包管理工具
-
在命令行中执行以下命令全局安装 pnpm：
npm install -g pnpm -
安装完成后，可以使用 pnpm 来代替 npm 进行包管理。例如，使用以下命令来安装项目依赖：
pnpm install这将使用 pnpm 来安装项目所需的包，而不是使用默认的 npm。
使用 Vue 官方脚手架初始化项目
-
切换到打算创建项目的目录，输入
cmd打开命令行，之后在命令行中运行以下命令：pnpm create vue@latest -
运行命令后使用方向键和回车键选择【否/是】开启或关闭某个功能：
-
创建完项目之后，在命令行中继续输入以下命令运行项目：
cd <your-project-name> pnpm i pnpm run dev --open
认识 Vue 项目目录结构
Vue 3 项目的典型目录结构如下：
project-name/
├── public/ # 静态资源目录
│ └── favicon.ico # 网站图标
├── src/ # 源代码目录
│ ├── assets/ # 资源文件目录（图片、样式等）
│ ├── components/ # 组件目录
│ │ └── HelloWorld.vue # 示例组件
│ ├── router/ # 路由配置目录
│ │ └── index.ts # 路由配置文件
│ ├── store/ # 状态管理目录
│ │ └── index.ts # 状态管理配置文件（Pinia）
│ ├── views/ # 视图目录
│ │ └── Home.vue # 示例视图组件
│ ├── App.vue # 根组件
│ └── main.ts # 项目入口文件（使用 TypeScript）
├── .eslintrc.js # ESLint 配置文件
├── .gitignore # Git 忽略文件配置
├── .prettierrc.json # Prettier 配置文件
├── env.d.ts # 声明文件，用于声明全局环境变量的类型
├── index.html # 入口 HTML 文件
├── package.json # 项目配置文件
├── README.md # 项目说明文件
├── tsconfig.json # TypeScript 配置文件
└── vite.config.js # Vite 配置文件
安装 Element Plus
Element Plus 官网：https://element-plus.org/
-
使用包管理器 pnpm 安装 Element Plus：
pnpm install element-plus -
在
main.ts文件中引入 Element 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') -
在
tsconfig.json中通过compilerOptions.type指定全局组件类型：{ "compilerOptions": { // ... "types": ["element-plus/global"] } } -
在
App.vue中添加 Element Plus 按钮组件：<template> <div 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> </div> </template> -
执行命令启动项目：
pnpm run dev
安装 Tailwind CSS
-
打开 Tailwind CSS 官网【https://tailwindcss.com/】，点击【Docs】查看文档：
-
点击【Framework Guides】查看框架指南，我们的项目是使用 Vite 构建，所以点击【Vite】：
-
点击【Using Vue】查看安装步骤：
-
执行命令安装 Tailwind CSS：
pnpm i -D tailwindcss postcss autoprefixer
-
运行命令生成 Tailwind CSS 配置文件：
tailwind.config.js``postcss.config.jsnpx tailwindcss init -p
-
在
tailwind.config.js配置文件中添加模板文件路径：content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'] -
创建
src\assets\styles\tailwind.scss文件， 添加 Tailwind CSS 提供的用于导入基础样式、组件和实用工具的特殊指令：@tailwind base; @tailwind components; @tailwind utilities; -
在项目中使用 Tailwind.css 设置内容样式：
<template> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </template> -
执行命令启动项目：
pnpm run dev
