0
208
ViewsVue template not work while using es6 import vue
Below is my reproduce step:
npm install vue@2.x.x
write below code in my main.js file
import Vue from 'vue' new Vue({ el: '#app', data: { msg: 'hello,word' } })
use webpack build it, then it will build a file in dist folder
then I write index.html file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div><span id="app">{{ msg }}</span></div> </div> <script src="./dist/main.js"></script> </body> </html>
then I open the index.html file in chrome, but it not display 'hello, word', I am a new beginner vue, I can not figure out what it wrong. thanks in advance.
And I alse found that vue delete my dom like above img.
1 answers
Answer question0
At first, I thought it was because you weren't running the project properly but then I realized that the comment you've pointed to with the red arrow shows that the Webpack server is in fact running.
The problem you're having here it seems, is that you're using the runtime-only build of Vue when you need the runtime + compiler build to compile Vue components that have template blocks or swap the template blocks for render functions.
If you don't use the version with the compiler but your components have template blocks, then they won't compile properly (although normally an error is shown to advise of this).
For instructions on using the full build rather than the runtime-only version, see here.