10
Tôi làm theo các hướng dẫn đăng ký và sử dụng các yếu tố tùy chỉnh ở đây:Vue Tuỳ chỉnh phần tử thất bại trong việc xây dựng các file JS độc lập trong quận
https://alligator.io/vuejs/custom-elements/
Tôi đang sử dụng mẫu Webpack tiêu chuẩn cho Vue.
Khi tôi chạy
npm run build
Tôi hy vọng sẽ nhận được một tập tin thành phần web đóng gói gọi element.js trong thư mục dist. Không có gì xảy ra. Có ai biết nếu có bất kỳ bước bổ sung cần thiết? Tài liệu không làm rõ điều này.
này tạo ra các tập tin sau đây trong dự án của tôi:
<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 }
})
components/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"
]
}
Sau bao gồm cả các tập tin kịch bản cho các phần tử tùy chỉnh và các thư viện vue, index.html của tôi trông như thế này:
<!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>
bạn có thể cụ thể hơn một chút không? 1) những gì bạn có nghĩa là "không có gì xảy ra"? Bạn đã mong đợi điều gì xảy ra, điều gì đã xảy ra? giao diện điều khiển có làm gì không? Không có gì được tạo trong '/ dist'? 2) Bạn mong đợi điều gì khi kết thúc quá trình xây dựng? Cách bạn đã thiết lập nó ngay bây giờ, Nó sẽ không phải là một thành phần đi kèm để inlcude trong một trang - nó sẽ là một ứng dụng Vue đi kèm * bao gồm * một phần tử tùy chỉnh, nhưng không sử dụng nó. Mẫu webpack vue-cli có nghĩa là viết các ứng dụng chứ không phải các thành phần đơn lẻ. –
@LinusBorg Tôi hy vọng 'npm run build' để xuất' example.js' trong '/ dist', ngoài những gì nó thường làm. Tài liệu tại alligator.io nêu rõ rằng, với các tệp tôi đưa vào câu hỏi của tôi, sau đó "... sau khi tạo thành một tập lệnh độc lập, bạn có thể thêm tập lệnh đó vào bất kỳ trang web nào và hiển thị thành phần ví dụ như kỳ vọng." Tôi không có nghĩa là xây dựng webpack không hoạt động chút nào. –
Vâng, webpack không biết rằng bạn muốn có một tệp 'example.js' riêng biệt. Cấu hình webpack cho biết nó sẽ biên dịch 'main.js' thành'/dist/app.js', không có gì khác. Đó là những gì tôi có ý nghĩa khi tôi nói mẫu webpack được thiết lập để xây dựng một ứng dụng, không phải là một thành phần độc lập. Tôi sẽ cố gắng và viết một câu trả lời nhỏ, nhưng có rất nhiều thay đổi nếu bạn muốn làm điều này, không có ý tưởng nếu tôi thành công –