Vue.js开源 - 豆瓣读书

   <h2><strong>模仿豆瓣前端</strong></h2>    <p>vue.js 2.0, vuex, vue-router, vue-server-renderer, express, cheerio, superagent, redis</p>    <h2><strong>live demo （部署在搬瓦工主机上，海外节点，应该需要1s）</strong></h2>    <h3><strong>1. Build</strong></h3>    <pre>  <code class="language-javascript">#redis-server    redis-server &    # install dependencies  npm install    # serve with hot reload at localhost:4000  npm run dev    # init data  curl http://host:port/api/spider // 更替换成真实地址和端口号    # build for production with minification  npm run build && npm start</code></pre>    <h3><strong>2. 注意</strong></h3>    <ol>     <li>请确认 redis 是 start 状态</li>     <li>在浏览器中访问 http://127.0.0.1:4000/api/spider 启动爬虫</li>     <li> <p>目前完成的界面: 首页, 读书首页, 标签页, 列表页, 详情页</p> <p><a href="/misc/goto?guid=4959727153397954365" rel="nofollow,noindex">http://127.0.0.1:4000/</a></p> <p><a href="/misc/goto?guid=4959727153480446162" rel="nofollow,noindex">http://127.0.0.1:4000/book</a></p> <p><a href="/misc/goto?guid=4959727153568742847" rel="nofollow,noindex">http://127.0.0.1:4000/tags</a></p> <p><a href="/misc/goto?guid=4959727153641164396" rel="nofollow,noindex">http://127.0.0.1:4000/tag:name</a></p> <p><a href="/misc/goto?guid=4959727153727916423" rel="nofollow,noindex">http://127.0.0.1:4000/subject:id</a></p> </li>     <li>增加了搜索功能，优化了排版， 但是豆瓣没有评论接口，所以只能等日后写爬虫解决</li>    </ol>    <h3><strong>3. Vue.js1.0 更新到 Vue.js2.0 记录</strong></h3>    <ol>     <li>在2.0中 Vue.set(store.item, item) 不会触发更新dom, store.item = item 才可以</li>     <li>由于 server side render 的原因, 不能使用 vue-resource 了, 改用 superagent 发请求了</li>     <li>store.item 为{}时, 在页面中引用 会直接error, 需要指定详细数据类型</li>     <li>v-html 替换了 {{{}}}</li>     <li>webpack 出现了 mdzz 的错误 Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. 解决办法为:</li>    </ol>    <pre>  <code class="language-javascript">$ npm uninstall webpack --save-dev    followed by    $ npm install webpack@2.1.0-beta.22 --save-dev    Then you should be able to gulp again. Fixed the issue for me.</code></pre>    <p> </p>    <pre>  <code class="language-javascript"><div>    <span v-for="n in 10">{{ n }}</span> // 需要指定n  </div>  <div>    <span v-for="(item, $index) in items">{{ $index }}</span> // 需要显示声明$index  </div></code></pre>    <p>上面的 bug 已经被 尤大 fixed</p>    <h3><strong>4. 更新记录</strong></h3>    <p>2016 11 19 根据 i5ting 前辈的建议, 更改了目录结构</p>    <h3><strong>5. 目录结构</strong></h3>    <pre>  <code class="language-javascript">. ├── README.md ├── build ├── index.html ├── server.js ├── frontend │ ├── App.vue │ ├── app.js │ ├── assets │ ├── client-entry.js │ ├── components │ ├── router │ ├── server-entry.js │ ├── store │ └── views ├── backend │ ├── spiders │ └── routers ├── node_modules ├── package.json ├── public └── test</code></pre>    <p> </p>    <p> </p>    <p> </p>