• 使用 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/

    Tailwind CSS 中文文档 (73zls.com)：https://tailwind.docs.73zls.com/docs/responsive-design
    NPM 官网：https://www.npmjs.com/
    Vite 官方中文文档：https://cn.vitejs.dev/

    安装 Node 环境

    首先，确保已经安装了 Node.js，可以在命令行中运行 node -v 和 npm -v 来检查它们是否已经正确安装：

    image-20231210121140490

    安装 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. 运行命令后使用方向键和回车键选择【否/是】开启或关闭某个功能：

      test

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

      cd <your-project-name>
pnpm i
pnpm run dev --open

      test-1

    认识 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 配置文件

    统一包管理器工具下载依赖

    1. 创建scripts\preinstall.js文件，添加：

      if (!/pnpm/.test(process.env.npm_execpath || '')) {
  console.warn(
    `\u001b[33mThis repository must using pnpm as the package manager` +
      `for scripts to work properly.\u001b[39m\n`
  )
  process.exit(1)
}

    2. 在 package.json 中配置命令：

      "scripts": {
    "preinstall":"node ./scripts/preinstall.js"
}

      preinstall是 npm 提供的生命周期钩子，当我们使用 yarn 或 npm 来安装依赖的时候就会触发 preinstall。

    项目环境变量配置

    没有基础的同学可以先去阅读下环境变量的文章：认识和使用 Vite 环境变量配置

    1. 在项目根目录（index.html 文件所在的位置）下创建对应环境的.env文件，然后在文件中定义对应环境下的变量，默认情况下只有以 VITE_ 为前缀的变量才会暴露给 Vite：

      • .env【默认配置】：

        # 项目标题
VITE_APP_TITLE = OCTOPUS

# 运行端口号
VITE_PORT = 8080

      • .env.development【开发环境】：

        # 开发环境
VITE_USER_NODE_ENV = development

# 项目基本 URL
VITE_BASE_URL = /dev/

# 启动时自动打开浏览器
VITE_OPEN = true

      • .env.production【生产环境】：

        # 生产环境
VITE_USER_NODE_ENV = production

# 项目基本 URL
VITE_BASE_URL = /

      • .env.test【测试环境】：

        # 测试环境
VITE_USER_NODE_ENV = test

# 项目基本 URL
VITE_BASE_URL = /test/

    2. 创建src\types\global.d.ts文件声明环境变量类型：

      // 定义泛型 Recordable，键类型为字符串、值类型为 T
declare type Recordable<T = any> = Record<string, T>

// 定义接口 ViteEnv，描述项目的环境变量结构
declare interface ViteEnv {
  VITE_USER_NODE_ENV: 'development' | 'production' | 'test' // 当前运行环境，可选值为 'development', 'production' 或 'test'
  VITE_GLOB_APP_TITLE: string // 应用标题
  VITE_PORT: number // Vite 端口号
  VITE_OPEN: boolean // 是否自动在浏览器打开应用
  VITE_REPORT: boolean // 是否开启 report 功能
  VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'gzip,brotli' | 'none' // 可选值为 'gzip', 'brotli', 'gzip,brotli' 或 'none'
  VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean // 是否删除原始文件
  VITE_DROP_CONSOLE: boolean // 是否删除控制台
  VITE_BASE_URL: string // 基本 URL
  VITE_API_URL: string // API 地址
  VITE_PROXY: [string, string][] // 表示代理配置
  VITE_USE_IMAGEMIN: boolean // 是否使用图像压缩
}

    3. 创建build\getEnv.ts文件用于完成环境变量类型转换：

      /**
 * 从 Vite 的环境变量对象中读取值并进行类型转换
 * @param envConf 原始环境变量配置对象
 * @returns ViteEnv 适用于 Vite 的环境变量对象
 */
export function wrapperEnv(envConf: Recordable): ViteEnv {
  // 创建一个空对象，用于存储处理后的环境变量
  const ret: any = {}

  // 遍历环境变量对象的键
  for (const envName of Object.keys(envConf)) {
    // 将环境变量值中的 '\n' 替换为换行符 '\n'
    let realName = envConf[envName].replace(/\\n/g, '\n')
    realName = realName === 'true' ? true : realName === 'false' ? false : realName
    if (envName === 'VITE_PORT') realName = Number(realName)
    if (envName === 'VITE_PROXY') {
      try {
        realName = JSON.parse(realName)
      } catch (error) {
        // ignore
      }
    }
    ret[envName] = realName
  }
  return ret
}

    4. 在tsconfig.json中添加 TypeScript 编译器配置：

      {
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "build/**/*.ts",
    "build/**/*.d.ts",
    "vite.config.ts"
  ],
  "exclude": ["node_modules", "dist", "**/*.js"]
}

    5. 在vite.config.ts中获取环境变量，并修改 Vite 启动配置：

      import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite'
import { wrapperEnv } from './build/getEnv'

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const root = process.cwd()
  // 获取.env文件中的内容
  const env = loadEnv(mode, root)
  const viteEnv = wrapperEnv(env)

  return {
    root, //项目根目录
    base: viteEnv.VITE_BASE_URL, //基础 URL
    server: {
      host: '0.0.0.0', //指定服务器主机地址
      port: viteEnv.VITE_PORT, //指定开发服务器端口
      strictPort: true, //若端口已被占用则会直接退出
      open: viteEnv.VITE_OPEN //服务器启动时，自动在浏览器中打开应用程序
    }
  }
})

    6. 在项目中使用 Vite 提供的import.meta.env对象获取这些环境变量：

      <script setup lang="ts">
const title = import.meta.env.VITE_APP_TITLE
script>

<template>
  <h1>{{ title }}h1>
template>

    安装 Element Plus

    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. 设置 Element Plus 默认语言为中文：

      import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

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

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

    5. 在 App.vue 中添加 Element Plus 按钮组件：

    6. 执行命令启动项目：

      pnpm run dev

      image-20240609193421586

    集成 sass 配置全局变量

    1. 通过以下命令安装 sass：

      pnpm add sass

    2. 创建src\assets\styles\variable.scss全局变量文件：

      //全局scss变量
$color:red

    3. 在vite.config.ts中使用 additionalData 引入全局的 Sass 变量文件：

      export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        javaScriptEnabled: true,
        // 向全局 scss 文件内容注入变量
        additionalData: `@import "@/assets/styles/variable.scss";`
      }
    }
  }
})

    4. 在 Vue 组件中使用变量：

      <script setup lang="ts">
// This starter template is using Vue 3