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}积分！`)
        }
      })
    }
  }
}

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

参考资料

vue

官方手册

ES6

阮一峰的ES6入门手册

nuxt

官方教程

API

iView

组件手册

axios

axios (英文)

axios for nuxt (英文)

less

中文文档

flex 布局教程

阮一峰的 flex 布局教程

ava (单元测试)

官方文档