В настоящее время я развертываю свои vue усовершенствованные веб-страницы довольно неэффективным способом
<html>
<head>...</head>
<body>...
<!-- some markup -->
<div id="app">
<component-a />
<component-b />
</div>
<script src="vue.js"></script>
<script type="module">
import ComponentA from "component-a.js";
import ComponentB from "component-b.js";
const app = new Vue({
el: "#app",
components: {
'component-a': ComponentA,
'component-b': ComponentB
},
data: {}
...
});
</script>
</body>
</html>
То, чего я хочу достичь, это что-то вроде
<html>
<head>...</head>
<body>...
<!-- some markup -->
<div id="app">
<component-a />
<component-b />
</div>
<script src="app.js"></script>
</body>
</html>
с приложением. js упаковка vue. js и компоненты (возможно, с Вавилоном по пути). Прямо сейчас я рассмотрел много примеров, но все они, кажется, предполагают подход только для сценариев. Естественно, я мог вручную попытаться объединить все сценарии и развернуть результат. До сих пор я работал с gulp, но когда дело доходит до vue gulp не предлагает никаких решений.
Я собрал вместе webpack.config. js (частично понимая, что он делает)
const path = require( 'path' );
const webpack = require( 'webpack' );
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = function( env = {} ) {
if ( env.production ) {
process.env.NODE_ENV = 'production';
}
return {
entry: './src/main.js',
output: {
path: path.resolve( __dirname, '../../assets' ),
filename: env.production ? 'js/main.min.js' : 'js/main.js'
},
plugins: env.production ? [
new VueLoaderPlugin(),
new webpack.DefinePlugin( {
'process.env': {
NODE_ENV: '"production"'
}
} )
] : [
new VueLoaderPlugin()
],
optimization: {
minimize: true
},
devtool: env.production ? false : '#cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.js', '.vue', '.json' ],
alias: {
'@': path.resolve( __dirname, '..' )
}
}
};
};
с main. js
mport Vue from 'vue';
import MessageToast from './components/message-toast';
Vue.component("message-toast", MessageToast);
new Vue(
{
el: "#app",
mounted () {
console.log("mounted");
},
methods: {
buttonclick () {
this.$refs.toast.isActive = true;
}
}
}
);
и index. html
<!doctype html>
<html lang="de">
<head></head>
<body>
<main id="app">
<message-toast ref="toast">Hi!</message-toast>
<button type="button" @click.prevent="buttonclick">Click me!</button>
</main>
<script src="resources/assets/js/main.js"></script>
</body>
</html>
Приложение отвечает «смонтировано» в консоли , но разметка страницы полностью удалена.
Как - если вообще - может достичь моего предполагаемого решения?