开发流程
# 项目入口
1. 项目启动时，优先进入`nuxt.config.js`配置文件，加载配置和插件
2. 启动后进入`store/index.js`内的`nuxtServerInit`方法，执行主数据的初始化。此过程，第一步（必须）通过域名获取站点配置信息并保存信息（接口通用参数、站点id、当前国家信息等）；第二步获取一些主数据，例如插件配置、分类列表数据等...
3. `nuxtServerInit`方法执行完后，进到`layout/default.vue`页，这是全局的布局组件，一些全部的配置/数据获取可以放到该页
4. 最后到页面，`pages/xxx.vue`页，这里注意，在服务端渲染时，页面内的head方法必须配置，并且设置meta标题、关键字和描述信息。
# 项目调试
1. 服务端获取的数据刷新调试的时候是不会输出在浏览器的，而是在vscode的终端里面，所以在服务端获取数据的时候最好不要用`console.log`，不然部署的时候会有大量的日志信息。如果需要输出，可以在mounted方法内输出保存下来的值
2. 一些方法调试完后，请把调试信息注释掉或者删掉
# 项目开发
## eslint
遵循项目下的.eslintrc.js内的规则，可以配置vscode实现保存自动格式化
```js
// VsCode配置eslint自动格式化
// 1. vscode先安装`eslint插件`
// 2. vscode 设置（`setting.json`）加入以下代码
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
},
"vue",
"html"
],
"eslint.run": "onSave",
"editor.codeActionsOnSave": { // 保存自动格式化
"source.fixAll.eslint": true
}
// 3. 项目目录安装插件，已安装可以跳过
`
npm install eslint babel-eslint eslint-plugin-vue eslint-plugin-html eslint-plugin-vue -D
`
// 4. 项目目录放置`.eslintrc.js`文件，已有可以跳过
```
## 注释
关于注释，尽量加上必要的注释，特别是比较关键的逻辑，一定要加逻辑说明
1. 方法注释，例如
```js
/**
* @date 2020/09/11 10:08
* @author 潜
* @description 函数作用说明
* @param { String } param1
* @param { Object } param2
* @return { String } （有返回值时写）
*/
function test (param1, param2) {
// 关键说明，以下为演示
// 必须对a执行以下操作，否则会引起...
a = Object.create({}, null)
// ...do something
// 逻辑说明，以下为演示
// ① 先执行...
// do something
// ② 保存...
// do something
// ③ 格式化...
// do something
// ④ 完成
// do something
return 'aaa'
}
```
2. html注释
```html
<!-- 专题内容 -->
<div>
<h1>xxxx</h1>
<div>
<span>{{ xxx }}</span>
</div>
</div>
```
3. 组件注释
```html
<template>
<div></div>
</template>
```
```js
<script>
/**
* @date 2020/09/11 10:13
* @author 潜
* @description 组件说明
*/
export default {
props: {
data: { // 主数据
type: Obejct,
default () {
return {}
}
},
str: { // xxx
type: String,
default: ''
}
}
}
</script>
```
```css
// 主要的css说明，不需要全部都加说明
.test {
display: none;
}
```
## 命名、使用和管理规范
1. 组件命名：`ProductList.vue`，使用时`<ProductList></ProductList>`
2. 变量命名：常量全大写 `const STATE = 12`，变量使用驼峰 let testCom = ''
3. 页面命名：`category-list.vue`
4. 接口统一在`api`目录内管理，可以分模块，使用时采用`import`形式导入
5. 全局数据统一在`store`目录下管理，可以分模块
6. `store`内的`commit`方法定义时，采用全大写的形式`SET_CATEGORY_LIST`
7. 页面/组件内引入store的变量，最好采用以下方法
```js
// 如果你已经定义了mapGetters，可以引入mapGetters
import { mapState, mapGetters } from 'vuex'
export default {
computed: {
...mapState({
list: state => state.category.list
}),
...mapGetters([
'uid'
])
}
}
```
8. 静态资源管理，小图标统一加到iconfont，小图标（小于4KB）统一放到`assets`目录下的`images`目录，其它大文件放到`static`目录下去管理
9.
## 组件开发
1. 新版的nuxt框架，只要在`components`目录下建立的组件，可以在页
2. 对于页面内的倒计时之类的组件，一定要注意，一定要在外层套上`<client-only></client-only>`组件，否则服务会有内存溢出的情况，访问量一多服务器直接崩溃。特别注意定时器的使用！面中直接调用，无须再使用`import`引入
## 注意事项
1. 基于服务端渲染的项目开发和spa会有区别，beforeCreate和created钩子都不能使用`window`变量，这两个钩子是在服务端实例化的，所以数据获取不要放到这两个钩子，服务端数据可以在`asyncData`或者`fetch`这两个方法内获取
2. 待补充
# 其它内容待补充