# vue-app-base

**Repository Path**: micksun/vue-app-base

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTML 和静态资源
## HTML
### Index 文件
`public/index.html` 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。

### 插值
`public/index.html` 文件中的变量会被客户端环境变量（.env）文件中的变量翻译

## 处理静态资源
静态资源可以通过两种方式进行处理：
- 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
- 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
小于10kb的图片文件将通过`url-loader`进行处理，大于10kb的文件通过`file-loader`进行处理

# CSS 相关

## 引用静态资源
所有编译后的 CSS 都会通过 `css-loader` 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。

## 预处理器
支持LESS预处理器，通过`less-loader`进行翻译

## CSS 文件提取和压缩
在production模式下，css文件将被提取到单独的文件，并进行压缩处理

## 文件名hash
基于`contenthash`进行静态资源文件名管理

# Vue相关
通过`vue-loader`打包.vue文件

# JS相关
通过`babel-loader`处理js文件

# 本地开发服务器
开发模式下可以开启一个本地开发服务器，并支持热更新


# 环境变量和模式
自动找到项目根目录下面的 `.env.[mode]`文件，并通过`dotenv`进行读取，最后通过`webpack.DefinePlugin`将这些变量注入成为全局成员

# 代码检查
通过eslint对代码格式进行校验