使用 Vue 官方脚手架初始化 Vue3 项目

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 包的下载速度。

1. 执行命令通过 npm 全局安装 nrm：

   npm install -g nrm
   

2. 使用 nrm ls 命令列出当前可用的镜像源，以及它们的地址和当前使用的镜像源：

   nrm ls
   

3. 使用 nrm use 命令来切换想要使用的镜像源，例如，切换到淘宝镜像源：

   nrm use taobao
   

4. 使用以下命令来验证切换是否成功：

   npm config get registry
   

安装 Pnpm 包管理工具

1. 在命令行中执行以下命令全局安装 pnpm：

   npm install -g pnpm
   

2. 安装完成后，可以使用 pnpm 来代替 npm 进行包管理。例如，使用以下命令来安装项目依赖：

   pnpm install
   

   这将使用 pnpm 来安装项目所需的包，而不是使用默认的 npm。

使用 Vue 官方脚手架初始化项目

1. 切换到打算创建项目的目录，输入 cmd 打开命令行，之后在命令行中运行以下命令：

   pnpm create vue@latest
   

2. 运行命令后使用方向键和回车键选择【否/是】开启或关闭某个功能：

   

3. 创建完项目之后，在命令行中继续输入以下命令运行项目：

   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/

1. 使用包管理器 pnpm 安装 Element Plus：

   pnpm install element-plus
   

2. 在 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')
   

3. 在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型：

   {
     "compilerOptions": {
       // ...
       "types": ["element-plus/global"]
     }
   }
   

4. 在 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>
   

5. 执行命令启动项目：

   pnpm run dev
   

   

安装 Tailwind CSS

1. 打开 Tailwind CSS 官网【https://tailwindcss.com/】，点击【Docs】查看文档：

   

2. 点击【Framework Guides】查看框架指南，我们的项目是使用 Vite 构建，所以点击【Vite】：

   

3. 点击【Using Vue】查看安装步骤：

   

4. 执行命令安装 Tailwind CSS：

   pnpm i -D tailwindcss postcss autoprefixer
   

   

5. 运行命令生成 Tailwind CSS 配置文件：tailwind.config.js``postcss.config.js

   npx tailwindcss init -p
   

   

6. 在tailwind.config.js配置文件中添加模板文件路径：

   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
   

7. 创建src\assets\styles\tailwind.scss文件， 添加 Tailwind CSS 提供的用于导入基础样式、组件和实用工具的特殊指令：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

8. 在项目中使用 Tailwind.css 设置内容样式：

   <template>
     <h1 class="text-3xl font-bold underline">
       Hello world!
     </h1>
   </template>
   

9. 执行命令启动项目：

   pnpm run dev