# vue

**Repository Path**: liyan55/vue

## Basic Information

- **Project Name**: vue
- **Description**: vue3 初始化项目
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-04
- **Last Updated**: 2024-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite, vue3, TypeScript

## README

# vue-project
仿网易云音乐网站

# 技术栈
vite + vue3 + ts + eslint + prettiy

# 项目准备
1. node.js 版本  18.0 以上
2. 依赖管理工具 pnpm
3. 项目管理git
4. vscode 插件卸载vetur(适用vue2), 安装volar(适用vue3)


# 初始化项目
1. 初始化项目 pnpm create vue@latest
2. 项目配置 
1) package.json 
```
"scripts": {
  "dev": "vite",  // 启动开发服务器
  "build": "run-p type-check \"build-only {@}\" --",  // 同时执行类型检查和构建
  "preview": "vite preview",  // 启动服务器预览构建结果
  "test:unit": "vitest",  // 执行测试
  "build-only": "vite build", // 构建
  "type-check": "vue-tsc --build --force",  // 类型检查
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", // eslint检查修复
  "format": "prettier --write src/" // 格式化
},
```
2) vite.config.js
参考 https://vitejs.dev/config/
# 网易云主页
1. 顶部导航栏
  弹性布局，引入图片，css变量