Vue可以創(chuàng)建多個入口頁面，以滿足不同的需求。下面將介紹如何使用Vue創(chuàng)建多個入口頁面。
首先，需在webpack配置文件中設(shè)置多個入口頁：
entry: {
index: './src/index.js',
detail: './src/detail.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}以上代碼中，設(shè)置了兩個入口頁：index和detail。它們分別對應(yīng)src目錄下的index.js和detail.js文件。
然后，需在HTML模板中動態(tài)加載入口頁的JS文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue多入口頁面</title>
</head>
<body>
<div id="app"></div>
<!-- index.js入口頁的JS文件 -->
<script src="./index.js"></script>
<!-- detail.js入口頁的JS文件 -->
<script src="./detail.js"></script>
</body>
</html>最后，需要在入口JS文件中定義Vue實例，以渲染頁面：
// index.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h =>h(App)
}).$mount('#app');
// detail.js
import Vue from 'vue';
import Detail from './Detail.vue';
new Vue({
render: h =>h(Detail)
}).$mount('#app');以上代碼中，分別定義了兩個Vue實例：index.js中的App實例和detail.js中的Detail實例。它們分別渲染src目錄下的App.vue和Detail.vue組件。
為了讓Vue能夠正常工作，需提前安裝Vue及其相關(guān)依賴：
npm install vue --save-dev
npm install vue-loader vue-template-compiler css-loader style-loader --save-dev至此，Vue多入口頁面的設(shè)置已經(jīng)完成。可以嘗試在src目錄下分別創(chuàng)建不同的Vue組件，并在入口JS文件中引入并渲染它們，實現(xiàn)更多豐富多彩的頁面效果。
上一篇vue 多個入口 路由
下一篇vue 多層v for