vue-cli3.0如何實(shí)現(xiàn)一個(gè)多頁面應(yīng)用-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)vue-cli3.0如何實(shí)現(xiàn)一個(gè)多頁面應(yīng)用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對待客戶，用專業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

具體如下：

故事背景

這是在剛請完假回來，一切都在計(jì)劃之中，早上一來，就接到項(xiàng)目經(jīng)歷的新的需求（這個(gè)是爛攤子，已經(jīng)好幾個(gè)人接手，離職），我內(nèi)心是拒絕的，可最后辦法，沒有其他人去做，最后就落在了我頭上。

接到需求，先看了需求，跟以前的比起來，改動挺大，數(shù)據(jù)結(jié)構(gòu)全改了，如果在原來的基礎(chǔ)上改，成本有點(diǎn)大，所以，就想著重啟項(xiàng)目來實(shí)現(xiàn)。于是就使用vue的最新腳手架工具vue-cli3.0來初始化項(xiàng)目，但突然，一個(gè)會議又來了，項(xiàng)目經(jīng)理，評估了工作，覺得另一個(gè)同事的工作量太大，于是又把后臺的一部分功能甩給我來實(shí)現(xiàn)，當(dāng)時(shí)內(nèi)心是mmp的。

本來項(xiàng)目是做的是單頁應(yīng)用，而新分配給我的功能，頁面也不多，功能也不算太復(fù)雜，就不想再單獨(dú)啟一個(gè)工程，就想著把這個(gè)功能，做在現(xiàn)有的工程里，但是呢，這是兩個(gè)完全沒有關(guān)聯(lián)的功能，于是乎，多頁面應(yīng)用在腦子中呼之欲出。

于是開始了從單頁面應(yīng)用改造成多頁面應(yīng)用的過程。

一、初始化項(xiàng)目

使用vue3.0創(chuàng)建一個(gè)項(xiàng)目，項(xiàng)目默認(rèn)是單頁應(yīng)用，目錄如下：

|-node_modules
|-public
	|-favicon.ico
	|-index.html
|-src
	|-assets
	|-components
	|-store
	|-views
	|-App.vue
	|-main.js
|-.browserslistrc
|-.env.development
|-.env.production
|-.eslintrc.js
|-.gitignore
|-.prettierrc.js
|-babel.config.js
|-package.json

二、將單頁應(yīng)用修改成多面應(yīng)用

1.（必選）在src文件下新增文件夾，每個(gè)文件夾代表一個(gè)獨(dú)立的頁面，文件夾里都含有App.vue,main.js,router.js文件

2.（必選）在src文件下新增配置文件vue.config.js

3.（可選）在src文件下新增文件store.js，可存儲數(shù)據(jù)，被每個(gè)獨(dú)立頁面都可取到

4.（可選）刪除原先src文件下的App.vue，main.js文件
————————————————
最終文件目錄如下：

|-node_modules
|-public
	|-favicon.ico
	|-index.html
|-src
	|-api
	|-assets
	|-components
	|-store
	|-styles
	|-utils
	|-views
		|-admin
			 |-App.vue
			 |-main.js
			 |-index.vue
			 |-router.js
		|-front
			 |-App.vue
			 |-main.js
			 |-index.vue
			 |-router.js
|-.browserslistrc
|-.env.development
|-.env.production
|-.eslintrc.js
|-.gitignore
|-.prettierrc.js
|-babel.config.js
|-package.json
|-vue.config.js