Vue Custom Element gagal membuat file JS mandiri di Dist

Saya mengikuti petunjuk untuk mendaftar dan menggunakan elemen khusus di sini:

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

Saya menggunakan template Webpack standar untuk Vue.

Saat aku berlari

npm run build

Saya berharap mendapatkan file komponen web paket bernama element.js di direktori dist. Tapi tidak ada yang terjadi. Adakah yang tahu jika ada langkah tambahan yang diperlukan? Dokumentasi tidak menjelaskan hal ini.

Ini menghasilkan file-file berikut di proyek saya:

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

komponen/contoh.vue

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

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

paket.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"
  ]
}

Setelah menyertakan file skrip untuk elemen khusus dan pustaka vue, index.html saya terlihat seperti ini:

<!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 sumber
comment
bisakah Anda lebih spesifik? 1) apa yang Anda maksud dengan tidak terjadi apa-apa? Apa yang Anda harapkan akan terjadi, apa yang sebenarnya terjadi? apakah konsol tidak melakukan apa pun? Apakah tidak ada yang tercipta di /dist? 2) Apa yang Anda harapkan pada akhir proses pembangunan? Cara Anda mengaturnya sekarang, Ini tidak akan menjadi komponen yang dibundel untuk dimasukkan ke dalam halaman - ini akan menjadi aplikasi Vue yang dibundel yang menyertakan satu elemen khusus, namun tidak menggunakannya. Templat webpack vue-cli dimaksudkan untuk menulis aplikasi, bukan komponen tunggal.   -  person Linus Borg    schedule 27.12.2017
comment
@LinusBorg Saya berharap npm run build menghasilkan example.js di /dist, selain dari apa yang biasanya dilakukannya. Dokumen di alligator.io dengan jelas menyatakan bahwa, mengingat file yang saya sertakan dalam pertanyaan saya, maka ... setelah membuat skrip mandiri, Anda harus dapat menambahkan skrip itu ke halaman web mana pun dan menjadikannya komponen contoh seperti yang diharapkan . Saya tidak bermaksud bahwa pembuatan webpack tidak berfungsi sama sekali.   -  person David J.    schedule 27.12.2017
comment
Ya, webpack tidak tahu bahwa Anda menginginkan file example.js terpisah. Konfigurasi webpack mengatakan ia harus mengkompilasi main.js menjadi /dist/app.js, tidak ada yang lain. Itulah yang saya maksud ketika saya mengatakan templat webpack disiapkan untuk membangun sebuah aplikasi, bukan komponen yang berdiri sendiri. Saya akan mencoba dan menulis jawaban kecil, tetapi ada banyak perubahan jika Anda ingin melakukan ini, tidak tahu apakah saya berhasil   -  person Linus Borg    schedule 27.12.2017
comment
@LinusBorg Saya tidak menyadari bahwa ada lebih banyak hal yang terlibat daripada yang disertakan dalam tutorial. Anehnya tidak ada petunjuk yang diberikan tentang bagaimana seseorang 'membangun skrip mandiri'. Akan sangat membantu jika Anda mengarahkan saya ke arah yang benar, terima kasih banyak.   -  person David J.    schedule 27.12.2017

Jawaban (1)


arrow_upward
1
arrow_downward

Dokumen dan artikel alligator.io tidak menjelaskannya, namun agar dapat berfungsi, elemen vue-custom masih memerlukan pustaka Vue.js dan vue-custom-element.

Jadi, Anda harus menggunakan <script> termasuk yang dihasilkan webpack di index.html.

Menemukan tutorial yang menyebutkan bahwa: http://vuetips.com/vue-web-components

Penerapan ini memerlukan file inti Vue.js dan pustaka elemen kustom vue untuk disertakan di halaman Anda.

Itu juga menyebutkan https://github.com/kartsims/vue-customelement-bundler yang merupakan templat yang menyusun semuanya menjadi satu file .js.

person yuriy636    schedule 27.12.2017
comment
Saya tidak yakin apakah saya memahami Anda dengan benar tetapi saya mencoba mengikuti saran Anda dan menambahkan jalur perpustakaan ke index.html di tag skrip. Itu masih tidak berhasil. Saya memperbarui pertanyaan saya dengan index.html saya saat ini. Silakan lihat. - person David J.; 27.12.2017
comment
@DavidJ. Maksud saya jalur yang dibuat oleh webpack di /dist/index.html di sana Anda dapat melihat <script>s untuk aplikasi, vendor, dan manifes. Itu (dan file-file itu sendiri di /dist/static/js) adalah apa yang harus Anda gunakan di index.html independen Anda. - person yuriy636; 27.12.2017
comment
Maaf tapi saya tidak mengerti. Saya menyalin aplikasi, vendor, dan skrip manifes yang dihasilkan termasuk dari index.html di /dist ke index.html di folder proyek (inilah yang saya pahami dari balasan Anda), tetapi itu tidak melakukan apa pun saat menjalankan build. Bisakah Anda memberi tahu saya file mana yang perlu diedit dan apa yang perlu dimasukkan? - person David J.; 27.12.2017
comment
@DavidJ. salahku, ketika Anda berbicara tentang index.html Anda, saya mengerti Anda memiliki folder lain tempat Anda menguji komponen tanpa semua lingkungan vue dan webpack. Anda tidak perlu mengedit file apa pun. | Saya berbicara tentang penggunaan kembali, jika Anda masih ingin membuat satu file .js coba periksa bundler yang saya tautkan. - person yuriy636; 27.12.2017
comment
@ yuri636 Saya mengikuti instruksi bundler dengan tepat dan itulah yang membuat saya mengajukan pertanyaan. Itu tidak lengkap. - person David J.; 29.12.2017