Vue.js 在HTML页面中插入VueJS组件模板无效_Vue.js_Vuejs2_Vue Component

Vue.js 在HTML页面中插入VueJS组件模板无效

vue.js vuejs2

Vue.js 在HTML页面中插入VueJS组件模板无效,vue.js,vuejs2,vue-component,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; 我有以下测试。vue： <template> <li> Hello World </li>

我有以下main.js：

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

Vue.component('test', Test);

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

我有以下测试。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>

我的应用程序！

My 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"
  }
}

{
“名称”：“vue paper dashboard pro”，
“版本”：“1.1.0”，
“描述”：“用于引导的高级Vue.js管理仪表板。由Cristi Jora编写，由Creative Tim设计。”，
“作者”：“克里斯蒂安·乔拉”，
“私人”：没错，
“脚本”：{
“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——单次运行”，
“单位：观察”：“cross env BABEL_env=test karma start test/unit/karma.conf.js——观察”，
“e2e”：“节点测试/e2e/runner.js”，
“测试”：“npm运行单元和npm运行e2e”
},
“依赖项”：{
“axios”：“^0.18.0”，
“图表列表”：“^0.11.0”，
“简易饼图”：“^2.1.7”，
“元素ui”：“^2.0.3”，
“完整日历”：“^3.6.2”，
“谷歌地图”：“^3.2.1”，
“jquery”：“^3.2.1”，
“jvectormap next”：“^3.0.0”，
“jwt解码”：“^2.2.0”，
“完美滚动条”：“0.7.1”，
“postcss导入”：“^11.1.0”，
“邮政编码url”：“^7.3.2”，
“路由器”：“^1.3.2”，
“sweetalert2”：“^6.11.4”，
“vee验证”：“^2.0.0-rc.21”，
“vue”：“^2.5.2”，
“vue axios”：“^2.1.1”，
“vue美化”：“^1.1.3”，
“vue clickaway”：“^2.1.0”，
“vue表单向导”：“^0.7.0”，
“vue google自动完成”：“^1.1.0”，
“vue导航选项卡”：“^0.5.4”，
“vue notifyjs”：“^0.2.0”，
“vue路由器”：“^3.0.1”，
“vuex”：“^3.0.1”
},
“依赖性”：{
“自动刷新器”：“^7.1.2”，
“巴别塔核心”：“^6.22.1”，
“babel eslint”：“^7.1.1”，
“babel helper vue jsx合并道具”：“^2.0.3”，
“巴别塔加载器”：“^7.1.1”，
“巴别塔插件组件”：“^0.9.1”，
“巴别塔插件”：“^4.1.5”，
“巴别塔插件语法jsx”：“^6.18.0”，
“巴别塔插件转换运行时”：“^6.22.0”，
“babel插件转换vue jsx”：“^3.7.0”，
“巴别塔预设环境”：“^1.7.0”，
“babel-preset-stage-2”：“^6.22.0”，
“巴别塔寄存器”：“^6.22.0”，
“柴”：“^4.1.2”，
“粉笔”：“^2.0.1”，
“chromedriver”：“^2.27.2”，
“压缩网页包插件”：“^1.0.1”，
“连接历史api回退”：“^1.3.0”，
“复制网页包插件”：“^4.1.0”，
“交叉环境”：“^5.0.1”，
“交叉繁殖”：“^5.0.1”，
“css加载器”：“^0.28.0”，
“eslint”：“^3.19.0”，
“eslint配置标准”：“^10.2.1”，
“eslint友好格式设置程序”：“^3.0.0”，
“eslint加载程序”：“^1.7.1”，
“eslint插件html”：“^3.0.0”，
“eslint插件导入”：“^2.11.0”，
“eslint插件节点”：“^4.2.3”，
“eslint插件承诺”：“^3.7.0”，
“eslint插件标准”：“^3.1.0”，
“eslint插件vue”：“^4.5.0”，
“eventsource polyfill”：“^0.9.6”，
“快车”：“^4.14.1”，
“提取文本网页包插件”：“^2.0.0”，
“文件加载器”：“^0.11.1”，
“友好错误网页包插件”：“^1.1.3”，
“函数绑定”：“^1.1.0”，
“html网页包插件”：“^2.28.0”，
“http代理中间件”：“^0.17.3”，
“注入加载器”：“^3.0.0”，
“因果报应”：“^1.4.1”，
“业力覆盖范围”：“^1.1.1”，
“卡玛摩卡”：“^1.3.0”，
“karma phantomjs启动器”：“^1.0.2”，
“因果报应”：“^1.4.0”，
“噶玛信农斋”：“^1.3.1”，
“karma sourcemap loader”：“^0.3.7”，
“业力规范报告者”：“0.0.31”，
“因果报应网页”：“^2.0.2”，
“lolex”：“^1.5.2”，
“已标记”：“^0.3.6”，
“摩卡”：“^3.2.0”，
“夜视”：“^0.9.12”，
“节点sass”：“^4.5.3”，
“opn”：“^5.1.0”，
“优化css资产网页包插件”：“^3.2.0”，
“ora”：“^1.2.0”，
“phantomjs预构建”：“^2.1.14”，
“原始加载程序”：“^0.5.1”，
“sass加载程序”：“^5.0.1”，
“selenium服务器”：“^3.0.1”，
“semver”：“^5.3.0”，
“shelljs”：“^0.7.6”，
“sinon”：“^2.1.0”，
“柴信农”：“^2.8.0”，
“url加载器”：“^0.5.8”，
“vue加载程序”：“^13.0.4”，
“vue样式加载程序”：“^3.0.1”，
“vue模板编译器”：“^2.5.2”，
“vue测试用例”：“^1.0.0-beta.3”，
“网页包”：“^2.7.0”，
“网页包包分析器”：“^2.2.1”，
“网页包开发中间件”：“^1.10.0”，
“网页包热中间件”：“^2.18.0”，
“网页包合并”：“^4.1.0”
},
“发动机”：{
“节点”：“>=4.0.0”，
“npm”：“>=3.0.0”
}
}

VueJs不应该直接用HTML填充“test”标记吗？因为在我的例子中，所有css/js文件都加载正常，如果我在控制台中输入“vm”，我可以看到Vue对象，但模板部分仍然没有插入HTML中。我该怎么做？我的页面是空的。我想加载多个组件，如果这些组件是在HTML中找到的，那么它们应该被插入到组件插槽中

能否尝试添加模板零件：

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

var vm=new Vue({ el:“.vue包裹”，组件：{Test}，模板：' });
您能否尝试添加模板部分：

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

var vm=new Vue({ el:“.vue包裹”，组件：{Test}，模板：' });
如果希望通过将Vue包装在“main”中来指定Vue正在使用的组件，则可以使用

var vm=new Vue({ el:“.vue包裹”，模板：“”，组件：{ /*通过“插槽”注入的所有组件*/ 测试，某些成分 }, });
。。。然后，您可以通过将
组件添加为主div的子组件来注入它

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

var vm=new Vue({ el:“.vue包裹”，模板：` `, 组件：{Test，SomeComponent} });
如果您正在构建应用程序，换句话说