Пользовательский элемент Vue не может создать автономные файлы JS в Dist

Я следовал инструкциям по регистрации и использованию пользовательских элементов здесь:

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

Я использую стандартный шаблон Webpack для Vue.

Когда я бегу

npm run build

Я ожидаю получить упакованный файл веб-компонента с именем element.js в каталоге dist. Однако ничего не происходит. Кто-нибудь знает, нужны ли какие-то дополнительные действия? В документации это не проясняется.

Это произвело следующие файлы в моем проекте:

<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>

пакет.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>

webpack javascript vue.js
person David J.    schedule 27.12.2017    source источник
comment
не могли бы вы быть немного более конкретным? 1) что значит ничего не происходит? Что вы ожидали, что случилось? консоль ничего не делала? В /dist ничего не создавалось? 2) Что вы ожидаете получить в конце процесса сборки? То, как вы настроили его сейчас, не будет связанным компонентом для включения на страницу — это будет связанное приложение Vue, которое включает один настраиваемый элемент, но не использует его. Шаблон веб-пакета vue-cli предназначен для написания приложений, а не отдельных компонентов.   -  person Linus Borg    schedule 27.12.2017
comment
@LinusBorg Я ожидаю, что npm run build выведет example.js в /dist в дополнение к тому, что он обычно делает. В документе на alligator.io четко указано, что, учитывая файлы, которые я включил в свой вопрос, затем ... после создания автономного скрипта вы сможете добавить этот скрипт на любую веб-страницу и заставить его отображать примерный компонент, как и ожидалось. . Я не имею в виду, что сборка веб-пакета вообще не работает.   -  person David J.    schedule 27.12.2017
comment
Ну, Webpack не знает, что вам нужен отдельный example.js файл. Конфигурация веб-пакета говорит, что он должен скомпилировать main.js в /dist/app.js, больше ничего. Вот что я имею в виду, когда говорю, что шаблон веб-пакета настроен для создания приложения, а не отдельного компонента. Я попытаюсь написать небольшой ответ, но если вы хотите это сделать, многое нужно изменить, не знаю, получится ли у меня   -  person Linus Borg    schedule 27.12.2017
comment
@LinusBorg Я не осознавал, что было задействовано гораздо больше, чем было включено в учебник. Странно, что не было никаких указаний о том, как «собирать автономный скрипт». Было бы очень полезно, если бы вы просто указали мне правильное направление, большое спасибо.   -  person David J.    schedule 27.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

В документации и статье alligator.io это не объясняется, но для работы vue-custom-element по-прежнему требуются библиотеки Vue.js и vue-custom-element.

Таким образом, вы должны использовать <script>, которые генерируются веб-пакетом в файле index.html.

Нашел учебник, в котором упоминается, что: http://vuetips.com/vue-web-components

Для этой реализации требуется, чтобы на вашей странице были включены основные файлы Vue.js и библиотека vue-custom-element.

В нем также упоминается https://github.com/kartsims/vue-customelement-bundler. который представляет собой шаблон, который собирает все в один файл .js.

person yuriy636    schedule 27.12.2017
comment
Я не уверен, правильно ли я вас понял, но я попытался последовать вашему совету и добавил пути к библиотекам в index.html в тегах script. Это все еще не работает. Я обновил свой вопрос своим текущим index.html. Взгляни, пожалуйста. - person David J.; 27.12.2017
comment
@ДэвидДж. Я имел в виду пути, созданные веб-пакетом в /dist/index.html, там вы можете увидеть <script> для приложения, поставщика и манифеста. Они (и сами файлы в /dist/static/js) - это то, что вы должны использовать в своем независимом index.html. - person yuriy636; 27.12.2017
comment
Извините, но я не понимаю. Я скопировал сгенерированное приложение, поставщика и сценарий манифеста из index.html в /dist в index.html в папке проекта (это то, что я понял из вашего ответа), но это ничего не сделало при запуске сборки. Не могли бы вы просто сказать мне, какой файл нужно отредактировать и что нужно вставить? - person David J.; 27.12.2017
comment
@ДэвидДж. мой плохой, когда вы говорили о своем index.html, я понял, что у вас есть еще одна папка, в которой вы тестировали компонент без всей среды vue и webpack. Вам не нужно редактировать никакие файлы. | Я говорю о повторном использовании, если вы все еще хотите создать один файл .js, попробуйте проверить связку, которую я связал. - person yuriy636; 27.12.2017
comment
@ yuri636 Я точно следовал инструкциям сборщика, и именно поэтому я задал свой вопрос. Это неполное. - person David J.; 29.12.2017