ecshoph5打包前需要准备什么工作？准备工具？H5怎么打包？
1.首先你要有ecshoph5未打包前的H5源码，因为ecshop3.6以上版本免费下载的h5目录里面文件是打包好的，那个文件是不能修改的也修改不了的。
ecshop\h5目录打包好文件：
看看打包好ECSHOP H5演示站：点击查看演示
2.只有花了米，才会给你H5源码包的，有了H5源码包才可以继续下面步骤，看看H5源码文件：
技术栈
vue2 + vuex + vue-router + webpack + es6 + axios + sass + flex`
3.ECSHOP H5目录结构图：
4.项目本地调试
项目使用npm管理包依赖；本地调试步骤如下：
* 运行`npm install`命令安装依赖库
* 如果需要修改API地址，在`/static/config.js`文件中修改`API_HOST`即可
* 运行`npm run dev`本地调试
5. 项目打包
项目使用webpack打包，打包配置已设置好；打包步骤如下：
* 运行`npm install`命令安装依赖库（如果已运行，请忽略该步骤）
* 如果需要修改API地址，在`/static/config.js`文件中修改`API_HOST`即可
* 运行`npm run build`完成打包；/dist即为打包生成目录
6. 服务端配置
前端抽离了接口配置的config文件；服务器端需要在/dist/static/路径下，配置config.js文件；文件内容同config.sample.js文件
a. 代码规范
1. 命名规范
文件夹命名
* 统一命名为小写
* 业务模块文件夹（page）代表着模块的名字
* 由名词组成（car、order、cart）
* 单词只能有一个 （good: car order cart）（bad: carInfo carpage）
####文件命名
* 组件文件命名 PascalCase (单词首字母大写命名)
* PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定（备注：参阅[组件命名约定](https://cn.vuejs.org/v2/guide/components.html#%E7%BB%84%E4%BB%B6%E5%91%BD%E5%90%8D%E7%BA%A6%E5%AE%9A)）
* 尽量是名词
* 大写开头，开头的单词就是所属模块名字（CarDetail、CarEdit、CarList）
* 常用结尾单词有（Detail、Edit、List、Info）
* 其它js文件命名小写
2. 代码格式
* 换行
* 换行为2个空格
```
<div id="app">
{{ message }}
</div>
```
```
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
```
3. vue文件结构
##### template
```
<template>
<div class="container">
<mt-header class="header" title="我的优惠券">
<header-item slot="left" v-bind:isBack=true v-on:onclick="goBack">
</header-item>
</mt-header>
<div class="tips-wrapper">
<label class="tips">可使用优惠券{{total}}张</label>
</div>
<div class="list">
<coupon-item
class="item"
v-for="item in items"
:key="item.id"
:item="item"
:isSelected="isSelected(item)"
v-on:onclick="onclick(item)">
</coupon-item>
</div>
<div class="submit" @click="unselect">
<label class="text">不使用优惠券</label>
</div>
</div>
</template>
```
1. 组件元素之间没有空行
2. 组件太长时，换行显示（换行缩进2个字符）
##### script
```
<script>
import CouponItem from './child/CouponItem'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
name: 'component-name',
components: {
CouponItem,
},
mixins: [ ],
directives: {
},
props: {
mode: {
type: String,
default: null
}
},
data () {
return {
items: [],
}
},
created () {
},
mounted () {
},
computed: {
...mapState({
}),
isEmpty () {
if (this.items && this.items.length === 0) {
return true
}
return false
}
},
watch: {
value (val) {
},
currentValue (val) {
}
},
methods: {
...mapMutations({
}),
...mapActions({
}),
goBack () {
this.$router.go(-1)
},
onLeftClick () {
this.goBack()
},
onRightClick () {
}
}
}
</script>
```
1. name、components、props、data、created、mounted、computed、methods尽量按照顺序写；并且各元素之间无换行
2. computed中多个计算属性之间无换行；类似的，methods中多个方法之间无换行，可适当添加注释
##### style
```
<style lang="scss" scoped>
.ui-concat-wrapper {
display: flex;
width: auto;
margin-top: 8px;
background-color: #ffffff;
padding: 15px;
justify-content: space-between;
align-content: center;
align-items: center;
p {
font-size: 16px;
font-family: PingFangSC-Regular;
color: rgba(78,84,93,1);
line-height: 20px;
}
img {
width: 12px;
height: 13px;
cursor: pointer;
}
}
</style>
```
1. 类选择器后有1个空格
2. 样式值前有1个空格
3. 使用Sass写法