vue-cnode
欢迎star
git clone /hbbaly/vue-cnode.git
使用vue写cnode网站, 我尽量用工作中规范去要求我改写这个项目，包括使用BEM来管理class类名,使用eslint来管理代码规范,只构建了三个页面,却使用了 vuex并且分了模块，对一些命名也进行了一定的规范，页面的组件划分，代码的重构等等一些自己的思想。
Build Setup
cd vue-cnode# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# lintnpm run lint# fixnpm run fix
master分支
技术栈
Vue2+Vue-Router+Vuex+webpack+ES6/7+axios+stylus+better-scroll
接口说明
接口全部来自于 cnode网站中的 API
项目目录
├── build // webpack配置文件├── config // 项目打包路径├── dist// 项目编译后文件├── README // README中用到的项目截图├── src // 源码目录│ ├── components// 组件│ │ ├── common// 公共组件│ │ │ ├── c-loading // 公用加载组件│ │ ├── list│ │ │ └── IndexView.vue // 公用话题列表组件，不带better-scroll│ │ └── navbar│ | │ └── IndexView.vue // 头部公共组件│ │ └── scroll│ │ | └── Scroll.vue // 公共better-scroll组件│ | └── tablist│ │ │ └── IndexView.vue // 公用横向滚动组件│ │ └── topiclist│ │ └── IndexView.vue // 公用话题列表组件，better-scroll│ ├── config // 基本配置│ │ ├── common.config.js// 公共设置│ │ ├── development.config.js// 测试环境│ │ ├── index.js // 环境切换│ │ └── production.config.js// 生产环境│ ├── images // 公共图片│ ├── views│ │ ├── index│ │ │ ├── IndexView.vue // 首页│ │ │ └── components│ │ │ └── topicListVIew.vue // 首页话题组件│ │ ├── user│ │ │ ├── index │ │ │ │ └── IndexView.vue// 个人信息页面│ │ │ │ └── components│ │ │ │ └── TopicVIew.vue// 话题模块组件 │ │ │ │ └── UserInfoVIew.vue // 个人信息组件│ │ │ ├── topicdetail│ │ │ │ ├── components│ │ │ │ │ ├── ContentView.vue // 话题详情内容组件│ │ │ │ │ └── ReplayView.vue// 回复组件│ │ │ │ │ └── ReplayView.vue │ │ │ │ ├── IndexView.vue// 话题详情页面│ │ │ │ │ ├── router│ │ └── router.js // 路由配置│ ├── utils// 公用函数│ │ ├── base.js // 基本公用函数│ │ └── http.js // axios的封装│ ├── store// vuex的状态管理│ │ ├── modules│ │ │ │──index.js// store模块集合 │ │ │ │──modules.js // 首页store的配置│ │ │ │──user.js// 用户模块store集合 │ │ ├── index.js // 引用vuex，创建store│ │ |── types // 常量│ └── stylus│ ├── reset.styl// 公共样式文件│ ├── App.vue // 页面入口文件│ ├── main.js // 程序入口文件，加载各种公共组件├── favicon.ico // 图标├── index.html
项目示例
目前只做了这三个页面
nuxt分支
使用nuxt技术改造master分支
解决了单页面对seo的缺陷
玩成功能：
使用第三方插件：axios，vue-lazyload并判断添加插件在服务端还是客户端运行过滤器的使用嵌套路由，动态路由使用meta及title定制分别在服务端和 客户端请求数据
创作不易，欢迎star
