2017-12-27 292 views
10

建立独立的JS文件我也跟着来注册和使用这里自定义元素的方向:Vue的自定义元素未能在DIST

https://alligator.io/vuejs/custom-elements/

我使用Vue的标准的WebPack模板。

当我运行

npm run build 

我希望得到所谓的dist目录element.js打包的Web组件文件。虽然没有任何反应。有谁知道是否有任何额外的步骤需要?文件没有说清楚。

这产生在我的项目下列文件:

<template> 
    <div id="app"> 
    <example myProp="I can pass props!"></example> 

    </div> 
</template> 

<script> 
import Example from './components/example.Vue' 

export default { 
    name: 'app', 
    components: { 
    Example 
    } 
} 
</script> 

<style> 
</style> 

main.js

// The Vue build version to load with the `import` command 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 
import Vue from 'vue' 
import App from './App' 
import vueCustomElement from 'vue-custom-element' 

Vue.config.productionTip = false 

Vue.use(vueCustomElement); 
/* eslint-disable no-new */ 

import Example from './components/Example.vue'; 

// Configure Vue to ignore the element name when defined outside of Vue. 
Vue.config.ignoredElements = [ 
    'example-component' 
]; 

// Enable the plugin 
Vue.use(vueCustomElement); 

// Register your component 
Vue.customElement('example-component', Example, { 
    // Additional Options: https://github.com/karol-f/vue-custom-element#options 
}); 


new Vue({ 
    el: '#app', 
    template: '<App/>', 
    components: { App } 
}) 

组件/ example.vue

<template> 
    <p>Dynamic prop value: {{myProp}}</p> 
</template> 

<script> 
export default { 
    props: ['myProp'] 
} 
</script> 

的package.json

{ 
    "name": "example", 
    "version": "1.0.0", 
    "description": "A Vue.js project", 
    "author": "", 
    "private": true, 
    "scripts": { 
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 
    "start": "npm run dev", 
    "build": "node build/build.js" 
    }, 
    "dependencies": { 
    "vue": "^2.5.2", 
    "vue-custom-element": "^2.0.0" 
    }, 
    "devDependencies": { 
    "autoprefixer": "^7.1.2", 
    "babel-core": "^6.22.1", 
    "babel-helper-vue-jsx-merge-props": "^2.0.3", 
    "babel-loader": "^7.1.1", 
    "babel-plugin-syntax-jsx": "^6.18.0", 
    "babel-plugin-transform-runtime": "^6.22.0", 
    "babel-plugin-transform-vue-jsx": "^3.5.0", 
    "babel-preset-env": "^1.3.2", 
    "babel-preset-stage-2": "^6.22.0", 
    "chalk": "^2.0.1", 
    "copy-webpack-plugin": "^4.0.1", 
    "css-loader": "^0.28.0", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "file-loader": "^1.1.4", 
    "friendly-errors-webpack-plugin": "^1.6.1", 
    "html-webpack-plugin": "^2.30.1", 
    "node-notifier": "^5.1.2", 
    "optimize-css-assets-webpack-plugin": "^3.2.0", 
    "ora": "^1.2.0", 
    "portfinder": "^1.0.13", 
    "postcss-import": "^11.0.0", 
    "postcss-loader": "^2.0.8", 
    "rimraf": "^2.6.0", 
    "semver": "^5.3.0", 
    "shelljs": "^0.7.6", 
    "uglifyjs-webpack-plugin": "^1.1.1", 
    "url-loader": "^0.5.8", 
    "vue-loader": "^13.3.0", 
    "vue-style-loader": "^3.0.1", 
    "vue-template-compiler": "^2.5.2", 
    "webpack": "^3.6.0", 
    "webpack-bundle-analyzer": "^2.9.0", 
    "webpack-dev-server": "^2.9.1", 
    "webpack-merge": "^4.1.0" 
    }, 
    "engines": { 
    "node": ">= 4.0.0", 
    "npm": ">= 3.0.0" 
    }, 
    "browserslist": [ 
    "> 1%", 
    "last 2 versions", 
    "not ie <= 8" 
    ] 
} 

包括自定义元素和VUE库脚本文件后,我的index.html是这样的:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
    <title>example</title> 
    <script src="vue/dist/vue.min.js"></script> 
    <script src="vue-custom-element/dist/vue-custom-element.js"></script> 

    </head> 

    <body> 
    <div id="app"></div> 
    <!-- built files will be auto injected --> 
    </body> 

</html> 
+0

你能更具体一点吗? 1)你的意思是“什么都没有发生”?你希望发生什么,发生了什么?控制台没有做什么? '/ dist'中没有创建? 2)你在构建过程结束时期望得到什么?现在你已经设置了它的方式,它不会成为一个捆绑在一个页面中的组件 - 它将是一个绑定的Vue应用程序,它包括一个自定义元素,但不使用它。 vue-cli webpack模板旨在编写应用程序,而不是单个组件。 –

+0

@LinusBorg我希望'npm run build'能够输出'/ dist'中的'example.js',除了它通常的功能之外。在alligator.io上的文档明确指出,鉴于我在我的问题中包含的文件,“......在构建到独立脚本之后,您应该能够将该脚本添加到任何网页,并使其呈现示例组件预期。”我不是说webpack构建根本不起作用。 –

+0

那么,webpack不知道你想要一个单独的'example.js'文件。 webpack配置说它应该将'main.js'编译成'/ dist/app.js',没有别的。当我说webpack模板设置为构建应用程序而不是独立组件时,这就是我的意思。我会尽量写出一个小答案,但是如果你想这样做还有很多需要改变的地方,不知道我是否成功了 –

回答

1

的文档和alligator.io文章没有解释,但为了工作,vue-custom-element仍然需要Vue.js和vue-custom-element库。

所以你必须使用<script>包括那个webpack生成的index.html


发现了一个教程,提到: http://vuetips.com/vue-web-components

实现需要Vue.js核心文件和 VUE定制元素库包含在您的网页。

它还提到https://github.com/kartsims/vue-customelement-bundler这是建立一切成一个单一的.js文件的模板。

+0

我不确定我是否正确理解了你,但我试图按照你的意见,并在脚本标记中将库路径添加到index.html中。它仍然不起作用。我用我目前的index.html更新了我的问题。请看一下。 –

+0

@DavidJ。我的意思是由'/ dist/index.html'中的webpack创建的路径,您可以看到'