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

如何在带有Pug的express.js中使用vue.js

1 个答案: