Node.js环境搭建与前端项目初始化

本章介绍

本章聚焦LLMOps项目前端开发的基础准备工作，涵盖Node.js环境搭建、前端架构与技术选型、项目初始化与开发规范、UI框架集成、路由配置、状态管理、接口请求封装七大核心模块，帮助开发者从0到1搭建规范的前端开发环境，为后续功能开发奠定基础。

一、Node.js环境搭建及镜像加速

1.1 Node.js环境搭建

核心定位：Node.js是JavaScript的服务端运行时环境，可让JavaScript脱离浏览器独立运行（类似Python/Java），是前端工程化开发的基础。
官网：https://nodejs.org/en
安装验证：下载安装包后自动配置环境变量，通过以下命令验证安装成功：
bash
```
node -v
# 输出示例：v20.14.0
```
基础使用：
- 运行JS文件：node hello.js（hello.js中编写console.log("Hello World!")）；
- 进入交互界面：直接输入node命令，支持实时执行JavaScript代码。

1.2 npm镜像加速配置

npm简介：Node.js自带的包管理工具，用于下载JS/TS第三方依赖包，默认下载源为https://registry.npmmirror.com，国内访问速度慢。

镜像配置（腾讯云）：

bash

# 设置腾讯云镜像源
npm config set registry https://mirrors.cloud.tencent.com/npm/
# 校验配置是否成功
npm get registry

查看npm配置：npm config list，可查看缓存路径、全局安装路径等信息。

1.3 Yarn依赖管理工具

1.3.1 为什么选择Yarn

npm存在安装慢、不支持离线模式、输出冗长、版本管理混乱、依赖安装一致性差等缺陷，Yarn由Facebook、Google等企业联合推出，专门弥补npm的不足。

1.3.2 安装与配置

安装命令（全局安装）：npm install yarn -g

镜像配置（腾讯云）：

bash

yarn config set registry https://mirrors.cloud.tencent.com/npm/
# 校验镜像源
yarn config get registry

路径配置：若出现安装路径跨硬盘分区报错，需统一路径：

bash

# 设置全局安装路径
yarn config set global-folder "D:\Env\nodejs\yarn_global"
# 设置缓存路径
yarn config set cache-folder "D:\Env\nodejs\yarn_cache"

1.3.3 常用Yarn命令

功能	命令
查看版本	`yarn -v`
初始化新项目	`yarn init`
添加依赖包	`yarn add [package]`（生产依赖）、`yarn add [package] --dev`（开发依赖）
升级依赖包	`yarn upgrade [package]`、`yarn upgrade [package]@[version]`
移除依赖包	`yarn remove [package]`
安装项目所有依赖	`yarn` 或 `yarn install`

二、项目前端架构与基础框架选择

2.1 项目前端架构

LLMOps前端项目分为4层架构，各层职责清晰，实现模块化开发：

视图层：包含浏览器和业务模块（登录、应用、工具），负责解析并展示网页资源；
编译层：基于Node.js+Vite.js，将TypeScript、SCSS等浏览器不支持的语言编译为兼容格式；
代码层：以组件为核心，包含Vue组件、Vue Router（路由）、Pinia（状态管理）、UI组件库、工具类（util）；
数据层：包含Service（业务逻辑）、Network（网络请求）、Api（接口调用），通过Fetch获取后端数据，处理缓存、异常、重试。

2.2 技术选型

2.2.1 核心框架：Vue3

对比Angular、React，选择Vue3的核心原因：

React仅为视图层框架，需额外集成路由、状态管理等工具，学习成本高（需掌握JSX）；
Angular大而全，但上手难度高、国内使用率低，2022年已停止维护；
Vue3借鉴Angular和React的优势，易上手、中文文档丰富，生态完善，适合团队快速开发。

2.2.2 技术栈全貌

类别	技术选型	核心作用
核心框架	Vue3	前端页面开发核心框架
路由	Vue Router	单页应用路由管理、页面跳转
状态管理	Pinia	跨组件/页面数据共享
UI组件库	ArcoDesign	字节跳动开源组件库，快速搭建界面
CSS框架	TailwindCSS	原子化CSS，简化样式开发
编译构建	Vite	快速编译、热更新，提升开发效率
类型检查	TypeScript	静态类型校验，减少代码错误
包管理	Yarn	依赖包安装、升级、管理
网络请求	Fetch	前端与后端接口通信
辅助工具	Vue Markdown（Markdown渲染）、ECharts（数据可视化）	扩展功能支持

三、前端项目搭建与开发规范

3.1 Vue项目创建与配置

3.1.1 脚手架创建项目

Vue官方提供create-vue脚手架，快速生成完整项目结构：

bash

# Yarn创建（推荐）
yarn create vue
# npm创建
npm create vue@latest

创建过程中可选择是否开启TypeScript、Vue Router、Pinia、ESLint、Prettier等功能，不确定时可选择No，后续可手动配置。

3.1.2 项目启动与构建

bash

# 进入项目目录
cd <your-project-name>
# 安装依赖
yarn
# 启动开发服务器（热更新）
yarn dev
# 构建生产环境版本（输出到dist文件夹）
yarn build

3.2 项目目录约定

基于Vue官方推荐结构优化，形成LLMOps项目标准目录：

|---public/          # 公共资源文件夹（无需编译）
|---src/             # 核心代码文件夹
|   ├── assets/      # 资源文件夹（图片、样式、图标）
|   │   ├── images/  # 图片资源
|   │   └── styles/  # 全局样式
|   ├── components/  # 公共组件文件夹
|   ├── __tests__/   # 测试文件夹
|   ├── config/      # 项目配置文件夹（index.ts）
|   ├── hooks/       # 自定义Hooks文件夹
|   ├── router/      # 路由配置文件夹（index.ts）
|   ├── services/    # 服务文件夹（接口请求、业务逻辑）
|   ├── stores/      # 状态管理文件夹（Pinia）
|   ├── utils/       # 工具文件夹（auth.ts、request.ts等）
|   ├── views/       # 页面文件夹
|   │   ├── layouts/ # 布局组件（DefaultLayout.vue、BlankLayout.vue）
|   │   └── pages/   # 具体页面（HomeView.vue、LoginView.vue）
|   ├── App.vue      # 应用主组件
|   └── main.ts      # 应用入口文件
|---.eslintrc.cjs    # ESLint代码格式化配置
|---.gitignore       # Git忽略文件配置
|---.prettierrc.json # Prettier代码美化配置
|---env.d.ts         # TypeScript类型声明文件
|---index.html       # HTML入口文件
|---package.json     # 依赖包管理文件
|---tsconfig.json     # TypeScript核心配置
|---vite.config.ts   # Vite编译配置
|---yarn.lock        # Yarn依赖锁定文件

3.3 代码开发规范

3.3.1 变量命名规范

变量类型	命名规则	示例
普通变量	驼峰命名法，见名知意	`const mySchool = "我的学校"`、`const names = []`（复数加s）
常量	全大写，下划线分隔单词	`const MAX_COUNT = 10`、`const BASE_URL = "https://xxx.com"`

3.3.2 组件命名规范

声明：采用PascalCase（首字母大写），多单词组合，根组件除外（App）；
使用：采用kebab-case（短横线分隔），前后闭合标签；
示例：声明StaffBenchToChargeItem.vue，使用<staff-bench-to-charge-item></staff-bench-to-charge-item>。

3.3.3 方法命名规范

驼峰命名法，采用“动词+名词”结构，见名知意；
示例：jumpPage()（跳转页面）、openCarInfoDialog()（打开车辆信息弹窗）。

3.3.4 其他规范

元素特性顺序：原生属性（class、id）→ 指令（v-for、v-if）→ 绑定属性（:src、@click）；
注释规范：公共组件、核心函数、复杂逻辑需加注释，多行注释用/** **/，单行注释用//；
编码规范：遵循ESLint和Prettier配置，统一代码格式，添加完整类型推断（TypeScript）。

四、UI框架与样式配置（ArcoDesign+TailwindCSS）

4.1 ArcoDesign UI组件库

核心优势：字节跳动开源，支持Vue/React，提供系统的设计规范、原子组件、定制化工具（风格配置、物料平台）。
安装命令：
bash
```
yarn add @arco-design/web-vue --dev
```

全局引入（main.ts）：

typescript

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue'
import App from './App.vue'
import '@arco-design/web-vue/dist/arco.css' // 引入样式

const app = createApp(App)
app.use(ArcoVue)
app.mount('#app')

组件使用示例：

vue

<template>
  <a-space>
    <a-button type="primary">Primary</a-button>
    <a-button>Secondary</a-button>
    <a-button type="dashed">Dashed</a-button>
  </a-space>
</template>

4.2 TailwindCSS样式框架

4.2.1 核心特性

原子化CSS框架，1个class对应1个CSS属性，无需编写自定义CSS，灵活度高、开发效率快。

Class	CSS属性	样式说明
`inline-block`	`display: inline-block`	行内块元素
`p-2`	`padding: 0.5rem`（8px）	内边距8px
`w-3`	`width: 0.75rem`（12px）	宽度12px
`text-sky-400`	`color: rgb(56 189 248)`	字体颜色为天蓝色

4.2.2 安装与配置

安装依赖：

bash

yarn add tailwindcss postcss autoprefixer --dev

生成配置文件：
bash
```
npx tailwindcss init -p
```

修改tailwind.config.js（添加编译路径）：

typescript

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}' // 监听所有src下的相关文件
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

引入Tailwind指令（src/styles/index.css）：

css

@tailwind base; /* 基础样式 */
@tailwind components; /* 组件样式 */
@tailwind utilities; /* 工具类样式 */

使用示例：

vue

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

五、路由配置与路由守卫（Vue Router）

5.1 Vue Router简介

Vue官方路由解决方案，用于单页应用（SPA）的URL与页面组件绑定，实现无刷新页面跳转，核心组件：

RouterLink：替代<a>标签，实现路由跳转，to属性指定目标路径；
RouterView：路由组件渲染容器，指定页面组件显示位置。

5.2 基础路由配置

安装依赖（创建项目时已选择则无需重复安装）：yarn add vue-router

路由配置（src/router/index.ts）：

typescript

import { createRouter, createMemoryHistory } from 'vue-router'
import HomeView from '@/views/pages/HomeView.vue'
import AboutView from '@/views/pages/AboutView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]

const router = createRouter({
  history: createMemoryHistory(),
  routes
})

export default router

应用注册（main.ts）：

typescript

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

5.3 页面嵌套布局

通过children属性实现路由嵌套，减少重复UI开发：

typescript

const routes = [
  {
    path: '/apps',
    component: AppLayout, // 父布局组件
    children: [
      { path: 'list', component: AppListView }, // 子组件1
      { path: 'detail/:id', component: AppDetailView } // 子组件2
    ]
  }
]

父布局组件（AppLayout.vue）中需包含<RouterView>，用于渲染子组件。

5.4 路由守卫功能

路由守卫用于校验路由访问权限，实现页面访问控制，核心示例（全局守卫）：

typescript

// src/router/index.ts
import auth from '@/utils/auth'

router.beforeEach(async (to, from) => {
  // 未登录且访问非登录/授权页面，跳转到登录页
  if (
    !auth.isLogin() &&
    !['auth-login', 'auth-authorize'].includes(to.name as string)
  ) {
    return { path: '/auth/login' }
  }
})

运行流程：用户访问页面 → 触发beforeEach守卫 → 校验条件（如登录状态）→ 校验通过则放行，否则跳转至指定页面。

六、状态管理（Pinia）

6.1 状态管理的必要性

跨组件/页面共享数据（如登录信息、主题模式）时，传统组件传参难以维护，Pinia作为Vue的状态管理库，统一存储和管理共享数据，实现数据同步更新。

6.2 Pinia快速上手

6.2.1 安装与配置

安装依赖：yarn add pinia

应用注册（main.ts）：

typescript

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

6.2.2 定义状态存储

Pinia核心三要素：数据（state）、计算属性（getter）、函数（action），示例（src/stores/counter.ts）：

typescript

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  // 1. 状态数据
  const count = ref(0)

  // 2. 计算属性（只读）
  const doubleCount = computed(() => count.value * 2)

  // 3. 动作函数（修改数据）
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

6.2.3 使用状态存储

在组件中导入并使用状态：

vue

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'

// 获取状态实例
const counterStore = useCounterStore()
</script>

<template>
  <p>当前值：{{ counterStore.count }}</p>
  <p>两倍值：{{ counterStore.doubleCount }}</p>
  <button @click="counterStore.increment">数值+1</button>
</template>

七、前端接口请求封装（Fetch）

7.1 Fetch基础说明

Fetch是浏览器原生的网络请求API，替代传统的XMLHttpRequest，用于前端与后端接口通信，MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch。

7.2 Fetch封装实现

封装目标：统一请求配置、处理参数、超时控制、异常捕获、响应格式化，示例（src/utils/request.ts）：

typescript

import { apiPrefix } from '@/config'

// 超时时间（100秒）
const TIME_OUT = 100000

// 请求参数类型定义
type FetchOptionType = Omit<RequestInit, 'body'> & {
  params?: Record<string, any>
  body?: Record<string, any> | BodyInit | null
}

// 基础请求配置
const baseFetchOptions: FetchOptionType = {
  method: 'GET',
  mode: 'cors',
  credentials: 'include', // 携带Cookie和HTTP基础验证信息
  headers: new Headers({
    'Content-Type': 'application/json'
  }),
  redirect: 'follow'
}

// 基础请求封装
const baseFetch = async <T>(
  url: string,
  fetchOptions: FetchOptionType
): Promise<T> => {
  // 合并配置
  const options = Object.assign({}, baseFetchOptions, fetchOptions)
  const { method, params, body } = options

  // 拼接请求URL
  let urlWithPrefix = `${apiPrefix}${url.startsWith('/') ? url : `/${url}`}`

  // 处理GET请求参数
  if (method === 'GET' && params) {
    const paramsArray = Object.keys(params).map(
      (key) => `${key}=${encodeURIComponent(params[key])}`
    )
    urlWithPrefix += urlWithPrefix.includes('?')
      ? `&${paramsArray.join('&')}`
      : `?${paramsArray.join('&')}`
    delete options.params
  }

  // 处理POST请求body
  if (body) {
    options.body = JSON.stringify(body)
  }

  // 超时处理
  return Promise.race([
    new Promise((reject) => {
      setTimeout(() => reject('请求超时'), TIME_OUT)
    }),
    new Promise((resolve, reject) => {
      fetch(urlWithPrefix, options as RequestInit)
        .then((res) => res.json())
        .then((data) => resolve(data))
        .catch((err) => reject(err))
    })
  ]) as Promise<T>
}

// 封装GET请求
export const get = <T>(url: string, options: FetchOptionType = {}) => {
  return baseFetch<T>(url, Object.assign({}, options, { method: 'GET' }))
}

// 封装POST请求
export const post = <T>(url: string, options: FetchOptionType = {}) => {
  return baseFetch<T>(url, Object.assign({}, options, { method: 'POST' }))
}

7.3 封装优势

统一基础配置（请求头、超时时间、跨域设置）；
自动处理GET参数拼接、POST数据JSON序列化；
支持超时重试、异常捕获，简化组件中请求逻辑；
类型化定义，配合TypeScript提升代码健壮性。

八、本章核心总结

环境搭建：完成Node.js+Yarn环境配置，通过国内镜像加速依赖安装，解决路径跨分区等常见问题；
架构与选型：确定Vue3+Vite+Pinia+Vue Router技术栈，基于4层架构设计前端项目，明确各模块职责；
项目规范：制定目录结构、命名规范、编码规范，确保团队开发一致性；
核心工具集成：集成ArcoDesign（UI组件）、TailwindCSS（样式）、Vue Router（路由）、Pinia（状态管理），提升开发效率；
基础功能封装：封装Fetch请求，实现统一接口调用，为后续业务开发提供稳定的基础支撑。

Node.js环境搭建与前端项目初始化 ​

本章介绍 ​

一、Node.js环境搭建及镜像加速 ​

1.1 Node.js环境搭建 ​

1.2 npm镜像加速配置 ​

1.3 Yarn依赖管理工具 ​

1.3.1 为什么选择Yarn ​

1.3.2 安装与配置 ​

1.3.3 常用Yarn命令 ​

二、项目前端架构与基础框架选择 ​

2.1 项目前端架构 ​

2.2 技术选型 ​

2.2.1 核心框架：Vue3 ​

2.2.2 技术栈全貌 ​

三、前端项目搭建与开发规范 ​

3.1 Vue项目创建与配置 ​

3.1.1 脚手架创建项目 ​

3.1.2 项目启动与构建 ​

3.2 项目目录约定 ​

3.3 代码开发规范 ​

3.3.1 变量命名规范 ​

3.3.2 组件命名规范 ​

3.3.3 方法命名规范 ​

3.3.4 其他规范 ​

四、UI框架与样式配置（ArcoDesign+TailwindCSS） ​

4.1 ArcoDesign UI组件库 ​

4.2 TailwindCSS样式框架 ​

4.2.1 核心特性 ​

4.2.2 安装与配置 ​

五、路由配置与路由守卫（Vue Router） ​

5.1 Vue Router简介 ​

5.2 基础路由配置 ​

5.3 页面嵌套布局 ​

5.4 路由守卫功能 ​

六、状态管理（Pinia） ​

6.1 状态管理的必要性 ​

6.2 Pinia快速上手 ​

6.2.1 安装与配置 ​

6.2.2 定义状态存储 ​

6.2.3 使用状态存储 ​

七、前端接口请求封装（Fetch） ​

7.1 Fetch基础说明 ​

7.2 Fetch封装实现 ​

7.3 封装优势 ​

八、本章核心总结 ​

Node.js环境搭建与前端项目初始化

本章介绍

一、Node.js环境搭建及镜像加速

1.1 Node.js环境搭建

1.2 npm镜像加速配置

1.3 Yarn依赖管理工具

1.3.1 为什么选择Yarn

1.3.2 安装与配置

1.3.3 常用Yarn命令

二、项目前端架构与基础框架选择

2.1 项目前端架构

2.2 技术选型

2.2.1 核心框架：Vue3

2.2.2 技术栈全貌

三、前端项目搭建与开发规范

3.1 Vue项目创建与配置

3.1.1 脚手架创建项目

3.1.2 项目启动与构建

3.2 项目目录约定

3.3 代码开发规范

3.3.1 变量命名规范

3.3.2 组件命名规范

3.3.3 方法命名规范

3.3.4 其他规范

四、UI框架与样式配置（ArcoDesign+TailwindCSS）

4.1 ArcoDesign UI组件库

4.2 TailwindCSS样式框架

4.2.1 核心特性

4.2.2 安装与配置

五、路由配置与路由守卫（Vue Router）

5.1 Vue Router简介

5.2 基础路由配置

5.3 页面嵌套布局

5.4 路由守卫功能

六、状态管理（Pinia）

6.1 状态管理的必要性

6.2 Pinia快速上手

6.2.1 安装与配置

6.2.2 定义状态存储

6.2.3 使用状态存储

七、前端接口请求封装（Fetch）

7.1 Fetch基础说明

7.2 Fetch封装实现

7.3 封装优势

八、本章核心总结