# project-architecture-vue2

**Repository Path**: vanwei/project-architecture-vue2

## Basic Information

- **Project Name**: project-architecture-vue2
- **Description**: 一个简单Vue2+axios+Vux3+JavaScript+Mock+Vue Router3+Sass+Vue CLI的基座
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-06-20
- **Last Updated**: 2025-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue2, Axios, Vuex, Mock, Sass

## README

# project-architecture-vue2

Node16.20.0 举荐使用cnpm

Vue2对应： **Vue-Router3+JavaScript+axios+sass(css预处理器)+vuex3.0**

sass参考：https://juejin.cn/post/7207410405855985725?searchId=202407031413586306413A1992EA09171A

Vue3对应：**Vue-Router4+Typescript+axios(可以考虑使用alova)+sass(css预处理器)+vuex4.0 （举荐使用：Pinia）**

**模式和环境变量**

https://cli.vuejs.org/zh/guide/mode-and-env.htmlproject-architecture-vue2

```
│  
├── config/         # 项目配置（通常包含路径、端口等）  
│   ├── index.js    # 项目主配置文件  
│   └── ...  
│  
├── src/            # 源代码目录  
│   ├── assets/     # 静态资源目录（图片、图标、字体等）  
│   │   ├── images/  
│   │   ├── icons/  
│   │   ├── fonts/  
│   │   └── ...  
│   │  
│   ├── components/ # 可复用的组件  
│   │   ├── Base/   # 基础组件  
│   │   │   ├── Button.vue  
│   │   │   ├── Input.vue  
│   │   │   └── ...  
│   │   ├── Advanced/ # 高级组件  
│   │   │   ├── Modal.vue  
│   │   │   ├── Carousel.vue  
│   │   │   └── ...  
│   │   ├── common/   # 复用组件  
│   │   └── ...  
│   │  
│   ├── api/      #发送请求的封装 
│   │   ├── login/   # 登陆相关的请求 
│   │   ├── user/   # 用户相关的请求  
│   │   ├── uploadHandler/   # 基础组件 
│   │   ├── index.js # 请求的配置 
│   │  
│   ├── views/      # 页面级别的组件（路由视图）  
│   │   ├── Index  #主页
│   │   ├── Login  #登陆
│   │   └── ...  
│   │  
│   ├── router/     # 路由配置  
│   │   └── index.js  
│   │  
│   ├── store/      # Vuex 状态管理  
│   │   ├── index.js # Vuex store 主文件  
│   │   ├── modules/ # Vuex 模块  
│   │   │   ├── user.js  
│   │   │   ├── cart.js  
│   │   │   └── ...  
│   │   └── ...  
│   ├── config/        # 配置一些项目常用的工具、登陆校验等  
│   │  
│   ├── directives/        # vue指令的封装 
│   │  
│   ├── filters/        # vue的过滤器的封装
│   │   
│   ├── i18n/        # 对国际化的封装
│   │   ├── lang/   # 翻译的库，包含中文、英文、法语等 
│   │   ├── index.js # 国际化的配置
│   │  
│   ├── api/        # API接口请求  
│   │   ├── axios.js # Axios 实例配置  
│   │   ├── user.js  # 用户相关API  
│   │   ├── product.js # 产品相关API  
│   │   └── ...  
│   │  
│   ├── utils/      # 工具函数  
│   │   ├── request.js # 封装请求函数  
│   │   ├── dateUtils.js # 日期处理工具  
│   │   └── ...  
│   │  
│   ├── mixins/     # 混入 (mixins)  
│   │   └── ...  
│   │  
│   ├── directives/ # 自定义指令  
│   │   └── ...  
│   │  
│   ├── filters/    # 自定义过滤器  
│   │   └── ...  
│   ├── layout/    # 对页面的封装  
│   │   └── ...  
│   ├── mixins/    # 抽离vue的js代码 
│   │   └── ... 
│   ├── mock/    # 伪造请求和数据 
│   │   └── ... 
│   ├── styles/    # 所有的页面的样式
│   │   └── ... 
│   ├── themes/    # 对主题文件进行颜色封装和配置、切换等
│   │   └── ... 
│   │  
│   ├── plugins/    # Vue 插件  
│   │   ├── global-components.js # 全局组件  
│   │   ├── globalMethods.js # 全局事件和方法 
│   │   └── ...  
│   │  
│   ├── layouts/    # 页面布局组件  
│   │   ├── DefaultLayout.vue  
│   │   └── ...  
│   │  
│   ├── App.vue     # 项目的根组件  
│   ├── main.js     # 项目的入口文件  
│   └── ...  
│   
│  
├── .env.development        # 开发环境  
├── .env.production        # 生产环境  
├── .env.staging        # 测试环境  
├── babel.config.js        # Babel 配置文件  
├── .gitignore      # Git 忽略文件  
├── vue.config.js     # vue-cli配置文件  
├── index.html      # 项目的入口HTML文件  
├── package.json    # 项目依赖和脚本配置文件  
└── README.md       # 项目说明文件
```

## 优秀的组件库：

我有一部分UI组件时参考：https://www.thosefree.com/web/ui

![1724122490881](image/README/1724122490881.png)

### ElementUI

![1724121920104](image/README/1724121920104.png)

地址：[element.cn](https://element.eleme.cn/#/zh-CN)


## Vant

![1724122378271](image/README/1724122378271.png)

地址：[Vant](https://vant-ui.github.io/vant/v2/)

## 图标

![1724122058086](image/README/1724122058086.png)

地址：[iconfont](https://www.iconfont.cn/)