vuejs / vue-hackernews Goto Github PK
View Code? Open in Web Editor NEWHackerNews clone with Vue.js
License: MIT License
HackerNews clone with Vue.js
License: MIT License
如题,pluralize 'comment' 是否等同于 pluralize (comment).
不是的话这是什么写法呢。我可以从哪里学习到类似的主题呢?
感谢。
Opening comments does not work anymore. Tried it in Chrome and FF. The page just reloads and in the console there is:
"[vue-router] Uncaught error during transition: "
Currently Vue tools in chrome don't work since it's set to production mode, but I think it's better to learn from this by being able to use the tools to see Vue working...
在执行npm run dev时报下面的错误,但这所有的依赖我都已经下载
Uncaught Error: Cannot find module "!!./../../node_modules/css-loader/index.js!./../../node_modules/vue-loader/lib/style-rewriter.js?id=_v-cee506ee&file=App.vue!./../../node_modules/stylus-loader/index.js!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./App.vue"
环境:
win7
node v5.1.1
npm v3.5.1
I am curiously why there is no tests at all for this good demo. It would be great to see the demonstration on how to test apps built on top of vue, just as any project being treated seriously.
When I install babel-runtime, the latest version is 6.3.19. Then I install vue-loader, there is an warning:
[email protected] requires a peer of babel-runtime@^5.8.0 but none was installed.
It seems that version 5.8.0 is needed here. So my question is, if I install 6.3.19, could that block my project?
Hi! I cloned the repo and i executed:
npm install && npm run dev
But in console the output is:
What is wrong?
[HMR] Waiting for update signal from WDS...
bootstrap 1312537441889a0b6098:543Uncaught Error: Cannot find module "./src/main.js"webpackMissingModule @ bootstrap 1312537441889a0b6098:543(anonymous function) @ bootstrap 1312537441889a0b6098:543__webpack_require__ @ bootstrap 1312537441889a0b6098:520(anonymous function) @ bootstrap 1312537441889a0b6098:543(anonymous function) @ bootstrap 1312537441889a0b6098:543
client?cd17:28 [WDS] Hot Module Replacement enabled.
client?cd17:57 [WDS] Errors while compiling.
client?cd17:59 ./src/main.js
Module parse failed: /home/krypton/Documents/vue/src/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import Vue from 'vue'
| import Router from 'vue-router'
| import { domain, fromNow } from './filters'
@ multi main
There's a bunch of work we can do here:
Two biggest changes after the perf improvements in #48 are landing Service Worker caching support and then web app manifest support. For SW, I'd suggest https://www.npmjs.com/package/sw-precache-webpack-plugin however if you're partial to offline-plugin that's also an option.
@yyx990803 Do you have Vue Hacker News iconography or graphics that could be used for the favicons that would get hooked up to the web app manifest?
项目中引入IScroll mint-ui等库显示 window is undefined,node环境中不能识别window对像
[email protected] build C:\Users\v_liubingxue\Downloads\vue-hackernews-gh-pages
cross-env NODE_ENV=production webpack --progress --hide-modules
Hash: 60e1b7e993d9b77d1124ts
Version: webpack 1.15.0
Time: 18201ms
Asset Size Chunks Chunk Names
build.js 104 kB 0 [emitted] main
ERROR in ./src/components/App.vue
Module build failed: TypeError: Object function Object() { [native code] } has no method 'assign'
at Object.module.exports (C:\Users\v_liubingxue\Downloads\vue-hackernews-gh-pages\node_modules\vue-loader\lib\loader.js:32:24)
@ ./src/main.js 13:11-42
ERROR in ./src/components/NewsView.vue
Module build failed: TypeError: Object function Object() { [native code] } has no method 'assign'
at Object.module.exports (C:\Users\v_liubingxue\Downloads\vue-hackernews-gh-pages\node_modules\vue-loader\lib\loader.js:32:24)
@ ./src/main.js 17:16-52
ERROR in ./src/components/ItemView.vue
Module build failed: TypeError: Object function Object() { [native code] } has no method 'assign'
at Object.module.exports (C:\Users\v_liubingxue\Downloads\vue-hackernews-gh-pages\node_modules\vue-loader\lib\loader.js:32:24)
@ ./src/main.js 21:16-52
ERROR in ./src/components/UserView.vue
Module build failed: TypeError: Object function Object() { [native code] } has no method 'assign'
at Object.module.exports (C:\Users\v_liubingxue\Downloads\vue-hackernews-gh-pages\node_modules\vue-loader\lib\loader.js:32:24)
@ ./src/main.js 25:16-52
running in dev fails like this
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3
trying to start in production fails so
cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules
ERROR in .//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!.//vue-loader/lib/selecto r.js?type=style&index=0!./src/components/NewsView.vue
Module build failed: TypeError: E:\test\vue\vue-hackernews\src\components\NewsView.vue:102:1
98| a
99| margin-right 10px
100| &:hover
101| text-decoration underline
102|
--------^
安装的时候报了好多css的错误,我是少了什么吗?可是你们也没说明
Since there is babel stuff, especially babel-preset-es2015, is es6-promise still necessary?
My platform win10/node v6.1,The errors was throw after executed npm run build/dev:
ERROR in .//css-loader!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!.//vue-loader/lib/selector.js?type=style&index=0!./src/components/NewsView.vue
Module build failed: TypeError: E:\hotel\vue-hackernews-gh-pages\src\components\NewsView.vue:102:1
98| a
99| margin-right 10px
100| &:hover
101| text-decoration underline
102|
--------^
Path must be a string. Received undefined
at assertPath (path.js:7:11)
at extname (path.js:887:5)
at new SourceMapper (E:\hotel\vue-hackernews-gh-pages\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
at Renderer.render (E:\hotel\vue-hackernews-gh-pages\node_modules\stylus\lib\renderer.js:94:9)
at E:\hotel\vue-hackernews-gh-pages\node_modules\stylus-loader\index.js:149:12
at tryCatchReject (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\Scheduler.js:62:19)
at Scheduler.drain (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\Scheduler.js:27:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ .//vue-style-loader!.//css-loader!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/NewsView.vue 4:14-247
ERROR in .//css-loader!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!.//vue-loader/lib/selector.js?type=style&index=0!./src/components/App.vue
Module build failed: TypeError: E:\hotel\vue-hackernews-gh-pages\src\components\App.vue:93:1
89| html, body
90| margin 0
91| #wrapper
92| width 100%
93|
-------^
Path must be a string. Received undefined
at assertPath (path.js:7:11)
at extname (path.js:887:5)
at new SourceMapper (E:\hotel\vue-hackernews-gh-pages\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
at Renderer.render (E:\hotel\vue-hackernews-gh-pages\node_modules\stylus\lib\renderer.js:94:9)
at E:\hotel\vue-hackernews-gh-pages\node_modules\stylus-loader\index.js:149:12
at tryCatchReject (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\Scheduler.js:62:19)
at Scheduler.drain (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\Scheduler.js:27:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ .//vue-style-loader!.//css-loader!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/App.vue 4:14-242
ERROR in .//css-loader!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!.//vue-loader/lib/selector.js?type=style&index=0!./src/components/ItemView.vue
Module build failed: TypeError: E:\hotel\vue-hackernews-gh-pages\src\components\ItemView.vue:96:1
92| margin-top 0
93| margin-bottom 30px
94| .itemtext p
95| margin 10px 0
96|
-------^
Path must be a string. Received undefined
at assertPath (path.js:7:11)
at extname (path.js:887:5)
at new SourceMapper (E:\hotel\vue-hackernews-gh-pages\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
at Renderer.render (E:\hotel\vue-hackernews-gh-pages\node_modules\stylus\lib\renderer.js:94:9)
at E:\hotel\vue-hackernews-gh-pages\node_modules\stylus-loader\index.js:149:12
at tryCatchReject (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\Scheduler.js:62:19)
at Scheduler.drain (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\Scheduler.js:27:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ .//vue-style-loader!.//css-loader!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/ItemView.vue 4:14-247
ERROR in .//css-loader!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!.//vue-loader/lib/selector.js?type=style&index=0!./src/components/UserView.vue
Module build failed: TypeError: E:\hotel\vue-hackernews-gh-pages\src\components\UserView.vue:61:1
57| .about
58| margin-top 1em
59| .links a
60| text-decoration underline
61|
-------^
Path must be a string. Received undefined
at assertPath (path.js:7:11)
at extname (path.js:887:5)
at new SourceMapper (E:\hotel\vue-hackernews-gh-pages\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
at Renderer.render (E:\hotel\vue-hackernews-gh-pages\node_modules\stylus\lib\renderer.js:94:9)
at E:\hotel\vue-hackernews-gh-pages\node_modules\stylus-loader\index.js:149:12
at tryCatchReject (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\Scheduler.js:62:19)
at Scheduler.drain (E:\hotel\vue-hackernews-gh-pages\node_modules\when\lib\Scheduler.js:27:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ .//vue-style-loader!.//css-loader!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/UserView.vue 4:14-247
I get the following terminal output:
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v5.10.1
npm ERR! npm v3.8.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `webpack-dev-server --inline --hot --no-info`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'webpack-dev-server --inline --hot --no-info'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-hackernews package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --inline --hot --no-info
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-hackernews
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-hackernews
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Volumes/Data/Work/Learning/2016-04 - Vue/build/hacker-news/npm-debug.log
I haven't checked but I have the suspect that requiring the same js module from multiple vue files will have the code copied multiple times in the build.
The Dedupe plugin should help.
把./static里的build.js删掉,不运行npm run build这个命令。http://localhost:8080也能运行正常。请问这是为什么,index.html里的<script src="static/build.js"></script>这个为什么没报错?
请大神解惑释疑,不甚感激。
Downloaded the zip, ran npm install
, ran npm run dev
. That's all I did.
Then, this error:
ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js!./~/stylus-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/NewsView.vue
Module build failed: TypeError: d:\Klanten\vue-loader-example\src\components\NewsView.vue:102:1
98| a
99| margin-right 10px
100| &:hover
101| text-decoration underline
102|
--------^
Path must be a string. Received undefined
at assertPath (path.js:7:11)
at extname (path.js:887:5)
at new SourceMapper (D:\Klanten\vue-loader-example\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
at Renderer.render (D:\Klanten\vue-loader-example\node_modules\stylus\lib\renderer.js:94:9)
at D:\Klanten\vue-loader-example\node_modules\stylus-loader\index.js:149:12
at tryCatchReject (D:\Klanten\vue-loader-example\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (D:\Klanten\vue-loader-example\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (D:\Klanten\vue-loader-example\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (D:\Klanten\vue-loader-example\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (D:\Klanten\vue-loader-example\node_modules\when\lib\Scheduler.js:62:19)
@ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js!./~/stylus-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/NewsView.vue 4:14-257 13:2-17:4 14:20-263
This error repeats for every block of stylus code.
If I convert it to css, it's fine. So it looks as if it's missing a module or something.
I'd be happy to help get this example updated to webpack 2! This will leverage some great tree shaking support native to webpack two.
When running the webpack-dev-server; it hits the exception "Unexpected token ILLEGAL"
...
[71] (webpack)-dev-server/~/sockjs-client/lib/facade.js 723 bytes {0} [built]
[72] (webpack)-dev-server/~/strip-ansi/index.js 161 bytes {0} [built]
[73] (webpack)-dev-server/~/strip-ansi/~/ansi-regex/index.js 135 bytes {0} [built]
[74] (webpack)/hot/dev-server.js 1.85 kB {0} [built]
[75] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]
ERROR in /Users/leow/OTTO/WORKSPACE/vue-hackernews/node_modules/babel-core/node_modules/lodash/object/keysIn.js:55
for (var key in object
Unexpected token ILLEGAL
@ multi main
webpack: bundle is now VALID.
Any clue why?
Firebase 的api资料有推荐的吗?这个demo里面有关firebae部分的代码没看懂,如:api.child().on(),api.child().once(),找了很久没找到firebase的api资料。
不知道这里面的items 数据怎么从firebase上下载下来的。
api.child('topstories').on('value', snapshot => {
topStoryIds = snapshot.val()
debugger;
store.emit('topstories-updated')
})
api.child('item/' + id).once('value', snapshot => {
const story = itemsCache[id] = snapshot.val()
resolve(story)
}, reject)
I am new to VueJS, and I cloned this repo. Just want to repeat the process, but I meet this WARN:
$ npm install
npm WARN EPEERINVALID [email protected] requires a peer of babel-runtime@^5.8.0 but none was installed.
ERROR in ./src/main.js
Module build failed: SyntaxError: /Users/petter/Documents/.babelrc: Error while parsing JSON - Unexpected ''
at JSON5.parse.error (/Users/petter/Documents/workspace/vue-action/vue-hackernews/node_modules/babel-core/node_modules/json5/lib/json5.js:50:25)
请问是什么原因呢?是node 和插件版本不兼容吗
The live demo is dead
There are three errors when I try npm run dev
:
template syntax error - invalid expression:
{{{user.about}}}
template syntax error - invalid expression:
{{{item.title}}}
template syntax error - invalid expression:
{{{comment.text}}}
I have installed vue-html-loader, but still doesn't work.
In package.json, I think dependencies should contain run time dependencies, and devDependencies should contain compile time dependencies. Literally, babel-runtime and babel-plugin-transform-runtime mean plugins supporting run time things. So shouldn't they be in dependencies?
I've tried numerous solutions to remove the hashbang (#!
) or hash (#
) from the URL, but the app always breaks when it comes to links. Set history: true
- all links are prefixed with#
as in Item.vue
however we can't match that route and if we remove the hash, the app will break. I also set <base href="/">
in the <head>
of index.html
. Please advise.
not work when npm run dev?
This may be a stupid question.
function fetch (child) {
logRequests && console.log(`fetching ${child}...`)
const cache = api.cachedItems
if (cache && cache.has(child)) {
logRequests && console.log(`cache hit for ${child}.`)
return Promise.resolve(cache.get(child))
} else {
return new Promise((resolve, reject) => {
api.child(child).once('value', snapshot => {
const val = snapshot.val()
// mark the timestamp when this item is cached
if (val) val.__lastUpdated = Date.now()
cache && cache.set(child, val)
logRequests && console.log(`fetched ${child}.`)
resolve(val)
}, reject)
})
}
}
when I load more data, the api.child(child).once
is called, but I can not see any network request in chrome debug console. why?
var vue = require('vue-loader') // <-- vue is not used.
win7_64: npm run dev
ERROR in .//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!.//vue-loader/lib/selector.js?type=style&index=0!./src/components/NewsView.vue
Module build failed: TypeError: F:\hacknews\src\components\NewsView.vue:102:1
......
ERROR in .//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js!.//stylus-loader!.//vue-loader/lib/selector.js?type=style&index=0!./src/components/App.vue
Module build failed: TypeError: F:\hacknews\src\components\App.vue:93:1
......
ERROR in .//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js!.//stys-loader!.//vue-loader/lib/selector.js?type=style&index=0!./src/components/Coent.vue
Module build failed: TypeError: F:\hacknews\src\components\Comment.vue:67:1
In build.js, When searching process.chdir
, a process module is found in the bundle but may never used. Maybe a fix of webpack.config.js
is required?
I've found that one can access the code on your sample:
http://vuejs.github.io/vue-hackernews/src/main.js
I know it's opensource :) Nevertheless it should not be possible to get any sourcefile from the server, right?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.