# vue-construct

**Repository Path**: mirrors_singod/vue-construct

## Basic Information

- **Project Name**: vue-construct
- **Description**: 基于vue和webpack v4的项目架构（webpack4 project demo，webpack4 项目 demo）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-25
- **Last Updated**: 2026-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Vue前端架构
---
想想也做过不少不同架构的项目，有Vue，有React，有ThinkPHP，有Laravel。
这是本王总结了很多项目下来的经验做的前端项目架构。

主要工具介绍
---
工具名                   | 作用
----------------------- | ------
vue v2.5                | data binding
vue-router v3           | vue路由
webpack v4              | 本地发开、打包发布
webpack-dev-server v3   | 本地启mock服务
webpack-bundle-analyzer | 打包后文件分析
koa v2                  | 本地模拟数据接口
axios                   | 处理get/post
mockjs                  | 制造模拟数据
nodemon                 | 修改node代码不需要重启监听，一直运行就好

功能介绍
---
### 开发
1. koa模拟数据接口，从而使前后端分离。
2. sourcemap，很好定位。
3. eslint，stylelint高大上的代码规则。
4. 热替换。
5. nodemon让改node代码变得更加顺滑。
6. 使用mockjs模拟接口返回数据。
7. scss支持识别2倍3倍图加载（除了接口获取的图，所有图都用背景图方案）
8. git hooks，防止不符合规范的提交

### 测试
1. 单元测试（含代码覆盖率）
2. e2e测试

### 发布
1. 将第三方js库打包成vendor.js，从而使项目业务代码修改也不会影响基本稳定的三方js代码，充分利用浏览器缓存。
2. 将css代码分为两份，一份为基础代码，即上线后几乎不变，另一份为迭代代码，从而充分利用浏览器缓存。
3. 发布以后的所有文件会加md5后缀，从而充分利用浏览器缓存。
4. tree shaking。
5. dynamic import，代码不会打包到一个js文件里，而会分成n个按需加载js。

使用方法
---
### 开发
#### 1.模拟数据
`npm run mock`

#### 2.页面开发
`npm run watch`

#### 3.一起启动
`npm run dev`
启动以后，可以在运行时，管理已配置的接口根据我们想要的状态，对统一地址、统一参数的接口返回不同数据。
管理接口地址：`{host:port}/mock-switch/`

#### 4.文档本地预览
components: `npm run build:components`

componentsBase: `npm run build:componentsBase`

### 测试
#### 1.单元测试
`npm run test:unit`

#### 2.e2e测试
`npm run dev`
`npm run test:e2e`

### 代码大小分析
`npm run analyze`

### 发布
`npm run prod`

![Vue前端架构](https://github.com/CodeLittlePrince/ImagesForGithub/blob/master/vue-construct-1.png?raw=true)