ThinkSNS+ Desktop Client

(prototype) VUE SSR version for ThinkSNS+ Desktop View.

Build Setup

# 安装依赖
$ yarn
# 启动开发环境
$ yarn dev
# 以生产环境构建并启动服务
$ yarn build
$ yarn start
# 构建 SPA 静态版本
$ yarn generate
# 启动测试
$ yarn test

开发文档

开发前准备

• nodejs > 10
• yarn 包管理器 (安装依赖提速)
• vscode (或其他支持 eslint、vue 高亮的插件)
• chorome 或 firefox 的 vue-devtools 插件

vscode 插件推荐

• * vetur vue 语法高亮
• * ESLint 代码风格检查与自动修正
• Path Intellisense 路径感知（文件跳转）
• Vue Peek vue 组件跳转
• Toggle Quotes 快速切换引号 按 ctrl+' 在['"`]中快速切换

其他编辑器必装插件

• vue 语法高亮, less 语法高亮，es6 语法支持
• eslint (最好开启保存时自动修复 auto-fix on save)

缓存策略

Vuex 数据管理

UI 组件

组件方面使用 iView 作为原型组件库，使用时请添加前缀 I。

�<IButtontype="primary">确定</IButton><IForm><IFormItem><IInputv-model="name" placeholder="默认有前缀 I" /><Select><Option>这两个组件没有前缀 `I`</Option></Select></IFormItem></IForm>

注意: SelectOption 这两个组件不能添加前缀 I，否则会不能选中选择项

按需加载

iView 使用按需加载，如果要使用某组件，在 plugins/iview 中加载即可

若导入后缺失样式，在 assets/less/iview/components/index.less 中将相应组件的注释打开即可

iView 样式表使用 less 重新导入在 assets/less/iview/ 下

API

全局组件

以下组件可以在任意地方使用 this.$root.$emit('xxx', payload) 来呼出 modal

• reward 打赏
• pinned 置顶
• report 举报
• password 密码验证

这些文件位于 ./components/common/ModalXXX.vue 中

例如要打赏id为12的动态

exportdefault{methods: {onReward(){this.$root.$emit('reward',{type: 'feed',article: 12,callback: amount=>{console.log(`成功打赏${amount}积分！`)}})}}}

payload 参数根据不同的需求有所不同，具体请参考组件中 created 钩子中注册事件（this.$root.$on('xxx')）的部分

参考资料

vue

官方手册

ES6

阮一峰的ES6入门手册

nuxt

官方教程

API

iView

组件手册

axios

axios (英文)

axios for nuxt (英文)

less

中文文档

flex 布局教程

阮一峰的 flex 布局教程

ava (单元测试)

官方文档