express - 如何在expressjs中使用vue.js和pug

Question

这是我尝试过的代码

在我的.pug 中

extends layout

block content
  h1= title
  p Welcome to #{title}
  script(src='/javascripts/custom_vue.js')
  div(id="app")
    {{ message }}

custom_vue.js

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

错误:

D:\xampp\htdocs\test\express\report\views\vue.pug:8:9 6| script(src='/javascripts/custom_vue.js') 7| <div id="app"> > 8| {{ message }} ---------------^ 9| </div> unexpected text "{{ me"
Error: D:\xampp\htdocs\test\express\report\views\vue.pug:8:9
    6|   script(src='/javascripts/custom_vue.js')
    7|     <div id="app">
  > 8|         {{ message }}
---------------^
    9|     </div>

unexpected text "{{ me"
    at makeError (D:\xampp\htdocs\test\express\report\node_modules\pug-error\index.js:32:13)
    at Lexer.error (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:58:15)
    at Lexer.fail (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1304:10)
    at Lexer.advance (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1364:15)
    at Lexer.callLexerFunction (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1319:23)
    at Lexer.getTokens (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:1375:12)
    at lex (D:\xampp\htdocs\test\express\report\node_modules\pug-lexer\index.js:12:42)
    at Object.lex (D:\xampp\htdocs\test\express\report\node_modules\pug\lib\index.js:99:27)
    at Function.loadString [as string] (D:\xampp\htdocs\test\express\report\node_modules\pug-load\index.js:44:24)
    at compileBody (D:\xampp\htdocs\test\express\report\node_modules\pug\lib\index.js:86:18)

Answer 1

我们正在将 vue.js 与 pug 结合使用，并且非常喜欢它。

Pug 需要知道您想要将该消息渲染到什么类型的元素中，只需在该行的前面添加一个 div 或一个 span，一切都会正常工作:

div {{message}}

如果没有 vue.js，您只是尝试将文本渲染到页面中，也会发生同样的事情。这会导致错误:

div
  This is some text

您还可以使用纯文本命令 (|) 来完成您想要的操作:

| {{message}}

或

div
  | This is some text

仅供引用，我们还在单独的 pug 文件中使用带有脚本标记的内联组件，而不是使用 CLI:

script(type="text/x-template" id="my-component")
  div
    (html goes here)

script.
  var MyComponent= Vue.component({
    "template": '#my-component',
    <rest of the code goes here>
  });