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

这是我试过的代码

在我的.pug中

extends layout

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

自定义_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)

D:\xampp\htdocs\test\express\report\views\vue.pug:8:9 6 | script（src='/javascripts/custom|vue.js'）7 |>8 |{message}------------------^9 |意外文本“{{me”
错误：D:\xampp\htdocs\test\express\report\views\vue.pug:8:9
6 |脚本（src='/javascripts/custom_vue.js'）
7|     
>8 |{message}
---------------^
9|     
意外文本“{me”
在makeError（D:\xampp\htdocs\test\express\report\node\u modules\pug error\index.js:32:13）
在Lexer.error（D:\xampp\htdocs\test\express\report\node\u modules\pug Lexer\index.js:58:15）
at Lexer.fail（D:\xampp\htdocs\test\express\report\node\u modules\pug Lexer\index.js:1304:10）
在Lexer.advance（D:\xampp\htdocs\test\express\report\node\u modules\pug Lexer\index.js:1364:15）
位于Lexer.callLexerFunction（D:\xampp\htdocs\test\express\report\node\u modules\pug Lexer\index.js:1319:23）
在Lexer.getTokens（D:\xampp\htdocs\test\express\report\node\u modules\pug Lexer\index.js:1375:12）
在lex（D:\xampp\htdocs\test\express\report\node\u modules\pug lexer\index.js:12:42）
在Object.lex（D:\xampp\htdocs\test\express\report\node\u modules\pug\lib\index.js:99:27）
在Function.loadString[作为字符串]（D:\xampp\htdocs\test\express\report\node\u modules\pug load\index.js:44:24）
在compileBody（D:\xampp\htdocs\test\express\report\node\u modules\pug\lib\index.js:86:18）

我们将vue.js与帕格一起使用，并且非常喜欢它

帕格需要知道要将该消息呈现到哪种类型的元素中，只需在行的前面添加一个div或span，一切都将正常工作：

div {{message}}

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

div
  This is some text

您还可以使用纯文本命令（

|

）来完成所需的操作：

| {{message}}

或

仅供参考，我们还在单独的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>
  });

脚本（type=“text/x-template”id=“我的组件”） div （这里是html） 剧本 var MyComponent=Vue.component({ “模板”：“#我的组件”， });

---

它在我将脚本（src='/javascripts/custom_vue.js'）移动到{message}之后工作，如果您在window.onload事件中创建根vue.js组件，这实际上不会有什么区别，但我们也在页面底部插入了所有脚本。

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>
  });