Courage
Courage

Reputation: 543

Vue template not work while using es6 import vue

Below is my reproduce step:

  1. npm install [email protected]

  2. write below code in my main.js file

    import Vue from 'vue' new Vue({ el: '#app', data: { msg: 'hello,word' } })

  3. use webpack build it, then it will build a file in dist folder

  4. 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.enter image description here

enter image description here

And I alse found that vue delete my dom like above img.

Upvotes: 0

Views: 719

Answers (1)

CodeTheorist
CodeTheorist

Reputation: 1672

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.

Upvotes: 1

Related Questions