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写法