ホームページ > 記事 > ウェブフロントエンド > vue-cliで作成したプロジェクト、マルチページ実装方法を設定
vue-cliで作成したプロジェクト、マルチページ実装方法を設定
- 亚连オリジナル
- 2018-05-30 10:30:432037ブラウズ
今回は、vue-cli で作成したプロジェクトと、複数のページを設定する実装方法を共有します。参考になると思います。
vue が公式に提供しているコマンドラインツール vue-cli は、シングルページのアプリケーションを素早く構築できます。デフォルトのページエントリは、index.html です。したがって、複数のページが必要な場合、その設定方法は実際には複雑ではありません。例として、新しい HTML ページを作成してみましょう。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <title></title> </head> <body> <span style="color:#000000;"><p id="rule"></p></span> <!-- built files will be auto injected --> </body> </html>
App.vueとmain.jsをモデルにしたエントリーファイルRule.vueとrule.jsを作成します
<template>
<p id="rule">
<router-view></router-view>
</p>
</template>
<script>
export default {
name: 'lottery',
data() {
return {
}
},
mounted: function() {
this.$router.replace({
path:'/rule'
});
},
}
</script>
<style lang="less">
body{
margin:0;
padding:0;
}
</style>
rule.js
import Vue from 'vue'
import Rule from './Rule.vue'
import router from './router'
import $ from 'jquery'
//import vConsole from 'vconsole'
import fastclick from 'fastclick'
Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#rule',
router,
template: '<Rule/>',
components: { Rule },
}) 修正config/index .js
buildは、コンパイル後に生成されるrule.htmlのアドレスと名前であるルールアドレスを追加しますbuild: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.php'),
rule: path.resolve(__dirname, '../dist/rule.php'),
……
}rule: path.resolve(__dirname, '../dist/rule. php') はコンパイルを意味します。すると、dist ファイルの下で、rule.html のコンパイル済みファイル名は、rule.php
Modify build/webpack.base.conf.js
Configureentryentry: {
app: './src/main.js',
rule: './src/rule.js'
},Modify build /webpack.dev.conf .js
追加
new HtmlWebpackPlugin({
filename: 'rule.html',
template: 'rule.html',
inject: true,
chunks:['rule']
}),
build/webpack.prod.conf.js
追加
new HtmlWebpackPlugin({
filename: config.build.rule,
template: 'rule.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest','vendor','rule']
}),
上
バックグラウンドアドレスがジャンプする場合 新しく作成したページに移動すると、現在設定されているデフォルトルートが公開されているため、複数のルーティングファイルを自分で設定して個別に参照することができます。 Rule.vue で指定されたルートにルーティングして、ページ制御を実現できますmounted: function() {
this.$router.replace({
path:'/rule'
});
},
以上は、皆さんのためにまとめたものです。 関連記事:
vue1とvue2をベースにdom要素を取得するメソッド
nodejs+mongodb集約カスケードクエリ操作例リンクからQRコードを生成し画像に変換するJSメソッド以上がvue-cliで作成したプロジェクト、マルチページ実装方法を設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。