[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":16,"_32":33},"loginname","ChenJiaH","page",1,"limit",20,"total","id","25969","avatar_url","https://avatars.githubusercontent.com/u/8033333?v=3","githubUsername","create_at","2016-11-25 09:31:44.802","score",15,"topic_count",2,"reply_count","is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_31":30,"_47":48,"_25":49,"_50":51},"22308","author_id","tab","share","content","最近开始尝试使用vue搭建项目，看见cnode提供API，便迫不及待上手来一发。\r\n\r\n## 项目介绍\r\n\r\n[线上实例Demo](http://mcchen.club/project/vue-cnode/index.html)\r\n\r\n涉及到的技术包括但不限于：`vue`、`vue-router`、`webpack`、`zepto`、`fastclick`、`scss`\r\n\r\n> Tips:vue&vue-router这里使用的是2.0版\r\n\r\n## 文档\r\n\r\n[文档](http://mcchen.club/2016/12/23/vue入门实例-基于vue&vue-router重写Cnode社区/)\r\n\r\n## Github\r\n\r\nGithub地址：[vue-cnode](https://github.com/ChenJiaH/vue-cnode)\r\n\r\n线上地址:[Demo实例地址](http://mcchen.club/project/vue-cnode/index.html)\r\n\r\n## 项目开始之前的乱七八糟\r\n\r\n最初的设想是完完全全由自己构建，这样能够熟悉全部的过程。\r\n\r\n* 创建项目目录层级(按照脚手架)\r\n\r\n* 创建package.json，然后安装什么babel,各种loader等等一大堆乱七八糟\r\n\r\n* 创建webpack.config.js，配置入口js，生成文件路径，预加载和加载资源等等\r\n\r\n* 引入webpack plugins，通过这个webpack-hot-middleware实现重载\r\n\r\n配置了一大堆之后，发现还有问题，然后还需要考虑build的配置，遂，猝，享年1小时。然后果断选择vue官网脚手架入手。\r\n\r\n> 好了，下面进入正题。\r\n\r\n## 开发步骤\r\n\r\n### 通过vue官网提供的命令行工具快速搭建一个应用\r\n\r\n[Github文档](https://github.com/vuejs/vue-cli)\r\n\r\n```Bash\r\n# 全局安装 vue-cli\r\n$ npm install --global vue-cli\r\n# 创建一个基于 webpack 模板的新项目\r\n$ vue init webpack my-project\r\n# 安装依赖，走你\r\n$ cd my-project\r\n$ npm install\r\n$ npm run dev\r\n```\r\n\r\n这个时候你会发现`my-project`项目已经自动创建，文件路径大致如下\r\n![Alt text](http://mcchen.club/images/2016-12-23_000001.png)\r\n\r\n### 取Cnode社区最常用的主题页相关入手\r\n\r\n大概可以分为主题页，主题详情页，评论点赞等设计到登录的这里暂时跳过，至于为什么？别问我，就是任性。\r\n\r\n我这里全部采用单文件组件方式开发，即`*.vue`。\r\n\r\n[什么是单文件组件？](https://cn.vuejs.org/v2/guide/single-file-components.html)\r\n\r\n与vue相关的资源全部放在src文件夹下，无需vue渲染的资源放到static文件夹下，附上开发文件目录\r\n\r\n![Alt text](http://mcchen.club/images/2016-12-23_000002.png)\r\n\r\n* 我们先来看看main.js\r\n\r\n```javascript\r\n// 引入vue\r\nimport Vue from 'vue';\r\n// 引入zepto\r\nimport $ from 'webpack-zepto';\r\n// 引入vue-router\r\nimport VueRouter from 'vue-router';\r\n// 引入路由配置文件\r\nimport routes from './routes.js';\r\n// 引入fastclick\r\nimport FastClick from 'fastclick';\r\n// 引入页面入口文件，其实这个可以不要，我这里引入的唯一目的就是在App.vue下加载全局通用css\r\nimport App from './App.vue'\r\n\r\n// ajax设置跨域\r\n$.ajaxSettings.crossDomain = true;\r\n\r\n/* eslint-disable no-new */\r\n\r\n// 安装VueRouter插件\r\nVue.use(VueRouter);\r\n\r\n// 创建一个router的实例对象\r\nvar router = new VueRouter({\r\n routes\r\n});\r\n// 移动端修复点透和延时\r\nFastClick.attach(document.body);\r\n\r\n// 创建一个Vue实例对象\r\nvar vm = new Vue({\r\n el: \"#app\", // 挂载元素，这里挂载到index.html中id为app的元素上\r\n router, // 引入路由，等于router: router\r\n template: '', // 注意:这里如果使用了template，那么将会替换你整个id为app的元素，除非里面含有slot标签，你想用render也是一个道理\r\n components: { // 组件引入，App对应的就是\r\n App\r\n }\r\n});\r\n```\r\n\r\n* 接下来看看路由配置routes.js\r\n\r\n```javascript\r\n// 引入路由对应的组件\r\nimport preLoader from './assets/view/preLoader.vue';\r\nimport all from './assets/view/all.vue';\r\nimport topic from './assets/view/topic.vue';\r\nimport about from './assets/view/about.vue';\r\n\r\nexport default [\r\n {\r\n path: \"/\", // 路由路径，当页面路径为.../#/的时候使用组件preLoader去渲染页面\r\n name: \"home\", // 可以理解为key\r\n component: preLoader // 组件\r\n },\r\n {\r\n path: \"/all\",\r\n name: \"all\",\r\n component: all\r\n },\r\n {\r\n path: \"/topic/:id\",\r\n name: \"topic\",\r\n component: topic\r\n },\r\n {\r\n path: \"/about\",\r\n name: \"about\",\r\n component: about\r\n }\r\n];\r\n```\r\n\r\n* 如何实现页面跳转，我们来看看根页面的组件preLoader.vue\r\n\r\n```javascript\r\n// template里面就是等待渲染html结构\r\n\r\n\r\n// 这里如果要使用scss的话必须加上lang=\"scss\"，为了让ide不报错，给style加上rel跟type如下就可以了\r\n// 注意：vue-cli默认最后是编译处理css的，这里想使用scss必须安装style-loader和vue-style-loader，不需要改webpack配置\r\n\r\n\r\n```\r\n\r\n* 页面跳转之后进入到主题的列表页all.vue，template跟style没什么好说的，正常写吧，来看看script部分\r\n\r\n```javascript\r\n // 引入组件\r\n import $ from 'webpack-zepto';\r\n import backTop from '../components/backtop.vue';\r\n export default {\r\n name: \"all\",\r\n components: {\r\n backTop,\r\n },\r\n filters: {\r\n getFreeTime: function (time) { // 这里是自定义过滤器，由于vue2.0干掉了默认提供的filters，所以要使用的话需要自行编写\r\n // Code\r\n return time\r\n }\r\n },\r\n data (){\r\n return {\r\n SCROLL_LOCK: false, // 滚动锁，在ajax触发之后完成之前保证不会再次发出请求\r\n menuShow: false, // menu菜单控制器\r\n topics: [], // 数据\r\n params: { // 请求参数\r\n page: 1,\r\n limit: 20,\r\n tab: 'all',\r\n mdrender: true\r\n }\r\n }\r\n },\r\n mounted: function () { // 当结构挂载之后\r\n // 这里就是我们要做的事情了...\r\n\r\n // 先判断是否存在tab\r\n if (this.$route.query && this.$route.query.tab) {\r\n this.params.tab = this.$route.query.tab; // 当前所在类别\r\n $(\".menu-list a\").eq(this.getTitle(this.$route.query.tab).idx).addClass(\"active\").siblings(\"a\").removeClass(\"active\");\r\n } else {\r\n $(\".menu-list a\").eq(0).addClass(\"active\").siblings(\"a\").removeClass(\"active\");\r\n }\r\n // 请求数据，这里提为一个methods了，因为存在多次调用\r\n this.getTopics();\r\n $(\"body\").removeClass(\"os-mode\");\r\n\r\n // 滚动\r\n var self = this;\r\n $(window).on(\"scroll\", function () {\r\n self.getScrollData()\r\n })\r\n },\r\n methods: {\r\n getTitle: function (val) {\r\n // 获取动态的标题\r\n return obj;\r\n },\r\n getTopics: function (type) { // 请求数据\r\n var self = this;\r\n $.get(\"https://cnodejs.org/api/v1/topics\", self.params, function (res) {\r\n if (res && res.data) { // 如果查到数据\r\n self.SCROLL_LOCK = true;\r\n self.topics = res.data;\r\n }\r\n })\r\n },\r\n // 滚动加载数据\r\n getScrollData() {\r\n if (this.SCROLL_LOCK) {\r\n var totalheight = $(window).height() + $(window).scrollTop();\r\n if ($(document).height() <= totalheight + 200) {\r\n this.SCROLL_LOCK = false;\r\n this.params.limit += 20;\r\n this.getTopics();\r\n }\r\n }\r\n },\r\n // 显示sidebar\r\n openMenu: function () {\r\n this.menuShow = true;\r\n $(\"body\").addClass(\"os-mode\");\r\n },\r\n // 收起sidebar\r\n closeMenu: function () {\r\n this.menuShow = false;\r\n $(\"body\").removeClass(\"os-mode\");\r\n },\r\n },\r\n computed: { // 计算属性，适用于频繁变动\r\n title: function () {\r\n return this.getTitle(this.params.tab).title;\r\n },\r\n getOpenClass: function () {\r\n if (this.menuShow) {\r\n return \"open\";\r\n } else {\r\n return \"\";\r\n }\r\n }\r\n },\r\n watch: { // 监听器\r\n $route: function (to, from) { // 这里是核心，监听$route(路由的配置对象),一旦这玩意变了，就肯定有情况\r\n // 如果是当前页面切换分类的情况\r\n if (to.query && to.query.tab) {\r\n this.params.tab = to.query.tab;\r\n $(\".menu-list a\").eq(this.getTitle(to.query.tab).idx).addClass(\"active\").siblings(\"a\").removeClass(\"active\");\r\n } else {\r\n $(\".menu-list a\").eq(0).addClass(\"active\").siblings(\"a\").removeClass(\"active\");\r\n }\r\n this.getTopics();\r\n // 隐藏导航栏\r\n this.menuShow = false;\r\n $(\"body\").removeClass(\"os-mode\");\r\n }\r\n }\r\n }\r\n```\r\n\r\n* 一个完整的组件就大概是上述几个步骤了，按照[源码](https://github.com/ChenJiaH/vue-cnode)安装编写试试吧\r\n\r\n## 版本\r\n\r\n1.0.0\r\n\r\n## 缺点与小尾巴\r\n\r\n### 缺点\r\n\r\n* 其实里面组件分的并不细，比如header、sidebar都可以单独抽出来作为组件存在，可以减少代码量\r\n\r\n* 还可以拓展评论，登录，用户信息等一些列[CNode API](https://cnodejs.org/api)提供的功能页面\r\n\r\n* 如果没有脚手架，直接上手开发复杂度不低\r\n\r\n* 这里还没有引入vuex做状态管理，如果涉及到非父子组件通信建议使用\r\n\r\n### 写在结尾的话\r\n\r\nCNode项目还是比较建议作为一个vue&vue-router的入门级练手项目，因为里面实际上涉及到了单页路由的切换管理，同时也实现了日常开发的一些基本功能：包括tab页签切换，ajax请求数据，能够满足日常项目的基本要求。\r\n\r\n> 特别简单的页面不建议使用，正常html+css+js的效率远高于使用vue.\r\n\r\n----------\r\n\r\n如果能给您带去些许帮助，鄙人不甚欢心。如有错误，恳请交流指出，谢谢！\r\n转载请注明出处：[http://mcchen.club/](http://mcchen.club/)\r\n\r\n----------","title","vue入门实例-基于vue&vue-router重写Cnode社区","last_reply_at","2016-12-28 02:39:14.484","good","top","visit_count",7927,"2016-12-23 10:28:05.802","author",{"_13":14,"_22":23}]