# vue2-vite

**Repository Path**: bluebird2/vue2-vite

## Basic Information

- **Project Name**: vue2-vite
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-10
- **Last Updated**: 2026-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[//]: # ("three": "0.150.1",)

# Vue 2 + Vite + Less 项目

这是一个使用 Vite 构建的 Vue 2 项目，集成了 Less 作为 CSS 预处理器。

## 项目特性

- ⚡️ Vue 2.7.16
- 🛠️ Vite 5.0.8 - 快速的前端构建工具
- 🎨 Less - CSS 预处理器
- 📦 现代化的开发环境

## 开始使用

### 安装依赖

```bash
npm install
```

或者使用其他包管理器：

```bash
pnpm install
yarn install
```

### 开发服务器

```bash
npm run dev
```

开发服务器将在 `http://localhost:3000` 启动。

### 构建生产版本

```bash
npm run build
```

构建文件将生成在 `dist` 目录中。

### 预览生产构建

```bash
npm run preview
```

## 项目结构

```
vue2-vite-less/
├── index.html          # HTML 入口文件
├── package.json        # 项目依赖配置
├── vite.config.js      # Vite 配置文件
├── src/
│   ├── main.js         # 应用入口文件
│   ├── App.vue         # 根组件
│   └── style.less      # 全局样式文件
└── README.md           # 项目说明文档
```

## Less 配置

项目已配置 Less 支持，可以在 Vue 组件中使用 `<style lang="less">` 标签。

### Less 特性示例

```vue
<style lang="less" scoped>
@primary-color: #42b883;
@border-radius: 8px;

.my-component {
  background-color: @primary-color;
  border-radius: @border-radius;
  
  &:hover {
    background-color: darken(@primary-color, 10%);
  }
}
</style>
```

## Vite 配置说明

`vite.config.js` 文件包含了以下配置：

- Vue 2 插件支持
- Less 预处理器配置（支持 JavaScript）
- 开发服务器端口 3000
- 自动打开浏览器

## 开发指南

1. 所有 Vue 组件都使用 Vue 2 的 Options API
2. 样式文件使用 Less 语法
3. 支持热模块替换 (HMR)
4. 代码按需加载，优化开发体验

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 许可证

MIT