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