# h5-start

**Repository Path**: hhhsir/h5-start

## Basic Information

- **Project Name**: h5-start
- **Description**: h5-start
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-21
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 必备文档

- [vue@3英文文档](https://v3.vuejs.org/guide/introduction.html)
- [vue@3中文文档](https://v3.cn.vuejs.org/api/)
- [vue-router@4英文文档](https://next.router.vuejs.org/)
- [vue-router@4中文文档](https://next.router.vuejs.org/zh/index.html)
- [vuex@4英文文档](https://next.vuex.vuejs.org/)
- [tailwindcss英文文档](https://tailwindcss.com/)
- [better-scroll](https://better-scroll.github.io/docs/zh-CN/guide/)
- [vite-plugin-vue-i18n](https://www.npmjs.com/package/@intlify/vite-plugin-vue-i18n)
- [less](https://lesscss.org/#escaping)
- [superagent](https://github.com/visionmedia/superagent)

https://api-test.hotfil.filestations.com/v1

## 静态资源

方式1: 

```vue
  <img alt="Vue logo" src="./assets/logo.png" />
```

方式2: 

> import的时候解析为绝对地址

```vue
<template>
  <img alt="Vue logo" :src="logo" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import logo from './assets/logo.png'

export default defineComponent({
  setup(){
    return {
      logo
    }
  }
})
</script>
```

## 设置别名

```
yarn add @types/node -D
```

## 样式

- 全局样式
> main.ts 引入

- css modules

```vue
<template>
  <div :class="$style.box"></div>
</template>


<style module>
.box {
  background: #42b983;
  width: 100px;
  height: 100px;
  border: 2px solid #000;
}
</style>
```

- 加载模块css

> 文件命名为xx.module.css

```vue
<template>
  <div :class="styles.logo"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import styles from  './App.module.css'

export default defineComponent({

  setup(){
    return {
      styles
    }
  }
})
</script>
```

- 支持sass/less,vben是用less

```
yarn add sass -D
yarn add less -D
```

- 支持windicss

> https://windicss.org/guide/vite.html

```
yarn add  vite-plugin-windicss --save-dev
```


- postcss

```
yarn add  autoprefixer -D
```

postcss.config.js

```
 module.exports = {
     plugins:[
         require('autoprefixer')
     ]
 }
```

这样就可以了


## mock

> https://www.npmjs.com/package/vite-plugin-mock

```
yarn add vite-plugin-mock -D
yarn add mockjs
```


```
  plugins: [
    vue(),
    viteMockServe({
      mockPath: 'mock',
      prodEnabled: true
    })
  ]
```

## 代码规范

> 整合eslint+prettier

```
yarn add @typescript-eslint/eslint-plugin@^4.20.0  @typescript-eslint/parser@^4.20.0  @vue/eslint-config-prettier@^6.0.0 @vue/eslint-config-typescript@^7.0.0 @vuedx/typescript-plugin-vue@^0.6.3 eslint@^7.23.0 eslint-plugin-prettier@^3.3.1 eslint-plugin-vue@^7.8.0 prettier@^2.2.1 -D

```

配置命令

```
    "lint":"eslint --ext .ts,vue src/** --no-error-on-unmatched-pattern --quiet",
    "lint:fix":"eslint --ext .ts,vue src/** --no-error-on-unmatched-pattern --quiet --fix"
```

vscode自动修复

> .vscode/settings.json

```json
{
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

```

提交的时候跑lint

```
yarn add lint-staged yorkie -D
```




## jest测试

> 在`<script setup>`写法下用不了

```
yarn add jest @types/jest vue-jest@next babel-jest @babel/preset-env @vue/test-utils@next ts-jest @babel/preset-typescript -D
```

## vite 插件

load
transform

## svg 

> https://github.com/JetBrains/svg-sprite-loader/issues/434

## vscode 的setup插件

Volar


## rem 和 rm

`font-size: 1em` : 继承的字体大小



## git规范和changelog

> validate-commit-msg可以来检查我们的commit规范

```sh
npm install -g commitizen
```
```sh
yarn add  validate-commit-msg conventional-changelog-cli -D
```

```sh
# 初始化 
$ commitizen init cz-conventional-changelog --save --save-exact
```

```shell
# 测试提交
git add -A
git cz
```

## husky

`husky`可以把`validate-commit-msg`作为一个githook来验证提交消息

```shell
yarn add husky -D 
# "prepare": "husky install",
npm run prepare
```

执行完会有一个.husky文件夹


#### Add a hook:

```shell
npx husky add .husky/pre-commit "npm run lint:fix"
```

#### Make a commit:

```shell
$ git add -A
$ git cz
# `npm run lint:fix` will run
```