vue2多頁面開發(fā)咋弄？新手教程一看就會(huì)！
今兒咱來聊聊咋用Vue2整多頁面應(yīng)用。我以為這玩意兒挺復(fù)雜的，結(jié)果一上手，發(fā)現(xiàn)也就那么回事兒。跟著我一步步來，保準(zhǔn)你能搞定！
第一步：搭架子
你得有個(gè)Vue項(xiàng)目？沒有的話，咱就先搭一個(gè)。我，平時(shí)就喜歡用命令行，打開電腦的命令行工具，敲入下面這行：
vue init webpack my-project
這里頭的“my-project”是你項(xiàng)目的名字，你可以隨便起，比如“haha-project”、“gogo-project”，看你心情?；剀囍螅鼤?huì)問你一堆問題，你就一路回車就行，不用管它。等它跑完，你就擁有一個(gè)嶄新的Vue項(xiàng)目！
然后，咱得進(jìn)到項(xiàng)目目錄里頭，繼續(xù)敲命令：
cd my-project
npm install
這個(gè)“npm install”是干啥的？就是把項(xiàng)目需要的那些個(gè)依賴都給下載下來。這就像你要做飯，得先把菜、米、油、鹽啥的都準(zhǔn)備這個(gè)過程可能要等一會(huì)兒，你可以去倒杯水，刷刷手機(jī)啥的，看你網(wǎng)速。
第二步：改配置
等依賴都下好，咱就可以開始折騰。多頁面應(yīng)用，顧名思義，就是要有多個(gè)頁面。那咱就得告訴Vue，咱有幾個(gè)頁面，每個(gè)頁面在哪兒。這就需要改一下配置文件。
找到項(xiàng)目目錄下的“build”文件夾，里頭有個(gè)叫“*.js”的文件，用你喜歡的編輯器打開它。
找到“entry”這一項(xiàng)，它原本長(zhǎng)這樣：
entry: { app: './src/*'
這是啥意思？就是說，咱這個(gè)項(xiàng)目只有一個(gè)入口，叫“app”，它的文件在“./src/*”。
咱要把它改成多個(gè)入口。比如，咱有兩個(gè)頁面，一個(gè)叫“one”，一個(gè)叫“two”，那咱就這么改：
entry: { one: './src/pages/one/*',
two: './src/pages/two/*'
注意，這里我把頁面文件放到“src/pages”目錄下，每個(gè)頁面一個(gè)文件夾，里頭放一個(gè)“*”文件。你也可以根據(jù)自己的喜好來組織文件。
第三步：建頁面
配置文件改好，咱就來創(chuàng)建頁面。在“src/pages”目錄下，新建兩個(gè)文件夾，分別叫“one”和“two”。然后在每個(gè)文件夾里頭，新建一個(gè)“*”文件，一個(gè)“*”文件，還有一個(gè)“*”文件。
“*”文件里頭，寫上這么幾行：
import Vue from 'vue' import App from './*'
new Vue({ el: '#app',
render: h => h(App)
“*”文件里頭，寫上你的頁面內(nèi)容。比如：
<template> <div>
<h1>這是第一個(gè)頁面</h1>
</div>
</template>
“*”文件里頭，寫上一個(gè)基本的HTML結(jié)構(gòu)：
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title>第一個(gè)頁面</title>
</head>
<body>
<div id="app"></div>
<!--webpack生成的js會(huì)自動(dòng)插入到這里-->
</body>
</html>
“two”文件夾下的文件也類似，我就不啰嗦。
第四步：跑起來
頁面建好，咱就可以跑起來看看效果。在命令行里敲入：
npm run dev
等它跑完，會(huì)自動(dòng)打開一個(gè)瀏覽器窗口。你可以在地址欄里輸入“l(fā)ocalhost:8080/*”和“l(fā)ocalhost:8080/*”來訪問不同的頁面。如果端口被占用打不開網(wǎng)頁的話，就去/config/*目錄下改個(gè)端口就行。
看看，是不是很簡(jiǎn)單？多頁面應(yīng)用，就是這么回事兒。這只是一個(gè)最基本的例子，實(shí)際開發(fā)中可能還會(huì)遇到各種各樣的問題，但只要掌握基本原理，兵來將擋，水來土掩，啥都不怕！