vue 萌新求助！为啥 template 不能替换掉相应的 tag

index.html

<html> <head> <title>Vue Hello World</title> </head> <body>

</body> </html>

main.js

import Vue from 'vue';

new Vue({ el: '#app', template: "

test

" });

使用 webpack 打包后，在浏览器中运行，结果是这样的

<html> <head> <title>Vue Hello World</title> </head>

<body>
	<div id="app"></div>
    <script src="main.js"></script>
</body>

</html>

并没有替换到

，不明白啊，求大神指点！！！！

SilentDepth

2020-05-21 09:40:37 +08:00

楼上几位可能记错了。当组件选项同时包含 el 和 template 时，el 视为挂载点，template 视为模板内容，所以不存在 template 无效的问题。楼主的问题是，template 的值需要是一个 DOM 结构（以编译成 render 函数），而楼主的代码写的是 "test"，这没法编译。

duanzhihe

2020-05-21 09:40:56 +08:00

你的 template 用法没有问题，但看你的 main.js ，感觉像是你把 vue 利用脚手架写，和直接 script 标签引用 vue.js 文件的写法搞混了！你若是没有用 vue 脚手架，直接找一个 vue 的 cdn 利用 script 标签引入，main.js 文件删除“mport Vue from 'vue';”这一行应该就可以了。若是你用了脚手架，感觉和你沾出来的代码不太像～～～你需要好好看看文档怎么回事！

JayLin1011

2020-05-21 10:09:03 +08:00

@zhw2590582 事實上，template 和 render() 優先級比 el 高，但是這裡的 template 是無效的，因為它既不是一個字符串模板也不是一個字符串模板選擇符。

asanelder

2020-05-21 10:42:39 +08:00

@JayLin1011 不好意思啊，第一次发贴子，没注意 md 格式，代码格式搞错了，我又重新发了一个，忽略上面的吧。。。。

asanelder

2020-05-21 10:42:52 +08:00

@azh7138m 不好意思啊，第一次发贴子，没注意 md 格式，代码格式搞错了，我又重新发了一个，忽略上面的吧。。。。

asanelder

2020-05-21 10:44:14 +08:00

@SilentDepth 不好意思啊，第一次发贴子，没注意 md 格式，代码格式搞错了，我又重新发了一个，忽略上面的吧。。。。我写的 template 确实是一个 DOM，问题就是，最名没有挂载到 el 所指定的 element 上

asanelder

2020-05-21 10:46:00 +08:00

@duanzhihe 不好意思啊，第一次发贴子，没注意 md 格式，代码格式搞错了，我又重新发了一个，忽略上面的吧。。。。我写的 template 确实是一个 DOM，问题就是，最名没有挂载到 el 所指定的 element 上。

我自己想用 webpack 来打包一个简单的 vue single file components，目的就是想了解一下原理。。。

说实话，看官方文档没找到原因。

duanzhihe

2020-05-21 11:10:43 +08:00

@asanelder 你没用 vue 官方的 demo，直接自己写的 webpack 配置来跑的 vue 项目？是的话，可以把你的 webpack 配置文件发出来看看！
你若是初学者，不建议自己去搞这些，需要了解 webpack 和 node 的东西较多，感觉你先让项目跑起来再了解比较好！
我这种比较懒的，一般情况都会用 vue 的官方 demo 来修改后做项目，具体的可以看看 vue 脚手架的相关文档（ vue-cli ），或者直接上 github 找 vue 的官方 demo ！

asanelder

2020-05-21 11:33:27 +08:00

@duanzhihe 哈哈，感谢回复，我自己最近只是想了解前端的一些东西，之前把 node 和 webpack 之类的文档也大概看了一下，昨天看了 vue 的文档，想着不使用 vue-cli 来自己 build 一个简单的 demo 。。。可能是自己对一些细节的东西了解的不清楚，所以才有了以上的问题

jingcoco

2020-05-21 12:45:30 +08:00

我也一直是用的官方 demo，没怎么想过。。。。但是我个人感觉你的问题是：
1. 如果要改变 html 文件，我感觉是用的 webpack loader “html-webpack-plugin”，感觉相关转变都在 js 里面体现。
2. 我感觉你是混用了 browser 和 vue-cli 的两种 vue 开发的 demo 。

asanelder

2020-05-21 12:51:52 +08:00

我找到原因了。

主要是 webpack 最后打包成的 bundle.js 不包含 vue-compile, 所以 template: '<p> test </p>' 是不起作用的。

要想起作用，需要使用 SFC 或者 render 函数。

大家不用回复了哈

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/673818

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

vue 萌新求助！为啥 template 不能替换掉 相应的 tag

index.html

main.js

vue 萌新求助！为啥 template 不能替换掉相应的 tag