时间戳

首页 > 解决方案 > vue with parcel 无法正确渲染

vue.js - vue with parcel 无法正确渲染

问题描述

下面的简单过程不起作用，虽然我不明白为什么......使用：npm vue parcel

mkdir samat
cd samat
npm init -y
npm install vue --save

包.json

{
  "name": "samat",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.12"
  }
}

然后我创建index.html和index.js：

<!DOCTYPE html>
<html>

<head>
    <script src="./index.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
</body>

</html>

import Vue from 'vue'

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

最后，我运行parcel index.html，然后localhost:1234在浏览器中查看但只看到这个：

{{message}}

标签： vue.jsparcel

解决方案

要使用 in-DOM 模板（即<div id="app>{{ message }}</div>），请导入包含运行时模板编译器的 Vue 的完整构建：

// import Vue from 'vue'
import Vue from 'vue/dist/vue.esm.browser' // full build

推荐阅读