在HTML页面中插入VueJS组件模板不起作用

时间：2018-08-08 11:32:21

标签： vue.js vuejs2 vue-component

我有以下main.js：

import Test from './components/Test.vue'

Vue.component('test', Test);

var vm = new Vue({
    el: '.vue-wrap',
    components: { Test },
});
window.vm = vm;

我有下面的Test.vue：

<template>
    <li>
        Hello World
    </li>
</template>

<script>
    export default {
        name: 'Test',
    }
</script>

我构建应用程序，然后将“ dist”文件夹的内容复制到我网站的“ vue”文件夹中。我有以下HTML文件：

<!DOCTYPE html><html><head><meta charset=utf-8><link rel=apple-touch-icon sizes=76x76 href=static/img/apple-icon.png><link rel=icon type=image/png sizes=96x96 href=static/img/favicon.png><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>My App!</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link type=text/css href="https://fonts.googleapis.com/css?family=Muli:400,300" rel=stylesheet><link type=text/css href="https://fonts.googleapis.com/css?family=Montserrat" rel=stylesheet><link type=text/css href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel=stylesheet><link type=text/css href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet><link href=static/css/themify-icons.css rel=stylesheet><link href=/vue/static/css/app.d9b210b92ea60ad0856c8dc063cccfec.css rel=stylesheet></head><body><div class=wrapper id=app></div><script type=text/javascript src=/vue/static/js/manifest.bdf9878acc459aaa413c.js></script><script type=text/javascript src=/vue/static/js/vendor.0eae82ab4e0e2a32fd9c.js></script><script type=text/javascript src=/vue/static/js/app.aa1500d2bdd1b2f93122.js></script>

<div class="vue-wrap">
  <test></test>
</div>

</body>
</html>

我的package.json文件：

{
  "name": "vue-paper-dashboard-pro",
  "version": "1.1.0",
  "description": "A premium Vue.js admin dashboard for bootstrap. Coded by Cristi Jora, designed by Creative Tim.",
  "author": "cristian.jora <cristian.jora@corebuild.eu>",
  "private": true,
  "scripts": {
    "dev": "cross-env ENABLE_ESLINT=false node build/dev-server.js",
    "build": "cross-env ENABLE_ESLINT=false node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "unit:watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --watch",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "chartist": "^0.11.0",
    "easy-pie-chart": "^2.1.7",
    "element-ui": "^2.0.3",
    "fullcalendar": "^3.6.2",
    "google-maps": "^3.2.1",
    "jquery": "^3.2.1",
    "jvectormap-next": "^3.0.0",
    "jwt-decode": "^2.2.0",
    "perfect-scrollbar": "0.7.1",
    "postcss-import": "^11.1.0",
    "postcss-url": "^7.3.2",
    "router": "^1.3.2",
    "sweetalert2": "^6.11.4",
    "vee-validate": "^2.0.0-rc.21",
    "vue": "^2.5.2",
    "vue-axios": "^2.1.1",
    "vue-beautify": "^1.1.3",
    "vue-clickaway": "^2.1.0",
    "vue-form-wizard": "^0.7.0",
    "vue-google-autocomplete": "^1.1.0",
    "vue-nav-tabs": "^0.5.4",
    "vue-notifyjs": "^0.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-component": "^0.9.1",
    "babel-plugin-istanbul": "^4.1.5",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^4.1.2",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "compression-webpack-plugin": "^1.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.1.0",
    "cross-env": "^5.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-node": "^4.2.3",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.1.0",
    "eslint-plugin-vue": "^4.5.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^3.0.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.2",
    "lolex": "^1.5.2",
    "marked": "^0.3.6",
    "mocha": "^3.2.0",
    "nightwatch": "^0.9.12",
    "node-sass": "^4.5.3",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "raw-loader": "^0.5.1",
    "sass-loader": "^5.0.1",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.0.4",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "vue-test-utils": "^1.0.0-beta.3",
    "webpack": "^2.7.0",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

VueJ是否应该直接用HTML填充“ test”标签？因为在我的情况下，所有的css / js文件都可以正常加载，所以如果在控制台中输入“ vm”，我可以看到Vue对象，但是模板部分仍未插入HTML。我怎样才能做到这一点？我的页面是空的。我想加载多个组件，如果在HTML中找到了这些组件，则应将它们插入组件插槽中。

3 个答案:

答案 0 :(得分：1)

您能否尝试添加模板部分：

var vm = new Vue({
    el: '.vue-wrap',
    components: { Test },
    template: '<Test/>
});

答案 1 :(得分：1)

如果希望通过将Vue包装在“主” <div class="vue-wrap">中来指定Vue正在使用的组件，则可以使用slots。 

var vm = new Vue({
    el: '.vue-wrap',
    template: "<slot></slot>",
    components: { 
        /* all components injected by "slots" */ 
        Test, 
        SomeComponent
    },
});

...，那么您可以通过将其添加为主要div的子元素来注入<test></test>组件。

<div class="vue-wrap">
    <test></test>
    <some-component></some-component>
</div>

否则，如果您能够在Vue组件中编写模板，则应使用@latovic建议的template键/选项。

var vm = new Vue({
    el: '.vue-wrap',
    template: `
        <test></test>
        <some-component></some-component>
    `,
    components: { Test, SomeComponent }
});

如果您正在构建应用程序，换句话说，如果您可以使用.vue文件，则可以在single-file components内编写模板。

更新（由于问题更新）

在您的特定示例中，尝试删除Vue.component('test', Tree);，因为名称不区分大小写可能会引起一些问题（通过这种方式，您正在创建全局组件test，并且已经导入并注册了组件{ {1}}）。

此外，如前所述，如果要将Test传递给HTML而不是模板，则需要<test></test>。

<slot></slot>

但是，如果您的index.html完全为空，则说明您的构建过程存在问题，我们无能为力，因为我们没有相关信息。

答案 2 :(得分：1)

如果您将其用作根组件，则可以直接使用render()

使用该组件。 

import Test from './components/Test.vue'

var vm = new Vue({
  el: '.vue-wrap',
  render: h => h(Test)
});

相关问题
最新问题