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。

�<IButton type="primary">确定</IButton>

<IForm>
  <IFormItem>
    <IInput v-model="name" placeholder="默认有前缀 I" />
    
    <Select>
      <Option>这两个组件没有前缀 `I`</Option>
    </Select>
  </IFormItem>
</IForm>

注意: Select Option 这两个组件不能添加前缀 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的动态

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