VueCLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁(yè)應(yīng)用-創(chuàng)新互聯(lián)

前言

創(chuàng)新互聯(lián)"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營(yíng)銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營(yíng)銷需求！創(chuàng)新互聯(lián)具備承接各種類型的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)項(xiàng)目的能力。經(jīng)過十余年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。

首先我們可以把多頁(yè)應(yīng)用理解為由多個(gè)單頁(yè)構(gòu)成的應(yīng)用，而何謂多個(gè)單頁(yè)呢？其實(shí)你可以把一個(gè)單頁(yè)看成是一個(gè) html 文件，那么多個(gè)單頁(yè)便是多個(gè) html 文件，多頁(yè)應(yīng)用便是由多個(gè) html 組成的應(yīng)用，如下圖所示

既然多頁(yè)應(yīng)用擁有多個(gè) html ，那么同樣其應(yīng)該擁有多個(gè)獨(dú)立的入口文件、組件、路由、 vuex 等。沒錯(cuò)，說簡(jiǎn)單一點(diǎn)就是多頁(yè)應(yīng)用的每個(gè)單頁(yè)都可以擁有單頁(yè)應(yīng)用 src 目錄下的文件及功能，我們來看一下一個(gè)基礎(chǔ)多頁(yè)應(yīng)用的目錄結(jié)構(gòu)

├── node_modules               # 項(xiàng)目依賴包目錄
├── build                      # 項(xiàng)目 webpack 功能目錄
├── config                     # 項(xiàng)目配置項(xiàng)文件夾
├── src                        # 前端資源目錄
│   ├── images                 # 圖片目錄
│   ├── components             # 公共組件目錄
│   ├── pages                  # 頁(yè)面目錄
│   │   ├── page1              # page1 目錄
│   │   │   ├── components     # page1 組件目錄
│   │   │   ├── router         # page1 路由目錄
│   │   │   ├── views          # page1 頁(yè)面目錄
│   │   │   ├── page1.html     # page1 html 模板
│   │   │   ├── page1.vue      # page1 vue 配置文件
│   │   │   └── page1.js       # page1 入口文件
│   │   ├── page2              # page2 目錄
│   │   └── index              # index 目錄
│   ├── common                 # 公共方法目錄
│   └── store                  # 狀態(tài)管理 store 目錄
├── .gitignore                 # git 忽略文件
├── .env                       # 全局環(huán)境配置文件
├── .env.dev                   # 開發(fā)環(huán)境配置文件
├── .postcssrc.js              # postcss 配置文件
├── babel.config.js            # babel 配置文件
├── package.json               # 包管理文件
├── vue.config.js              # CLI 配置文件
└── yarn.lock                  # yarn 依賴信息文件

二、多入口

在單頁(yè)應(yīng)用中，我們的入口文件只有一個(gè)， CLI 默認(rèn)配置的是 main.js ，但是到了多頁(yè)應(yīng)用，我們的入口文件便包含了 page1.js 、 page2.js 、 index.js 等，數(shù)量取決于 pages 文件夾下目錄的個(gè)數(shù)，這時(shí)候?yàn)榱隧?xiàng)目的可拓展性，我們需要自動(dòng)計(jì)算入口文件的數(shù)量并解析路徑配置到 webpack 中的 entry 屬性上，如：

module.exports = {
 ...
 
 entry: {
  page1: '/xxx/pages/page1/page1.js',
  page2: '/xxx/pages/page2/page2.js',
  index: '/xxx/pages/index/index.js',
 },
 
 ...
}

當(dāng)前題目：VueCLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁(yè)應(yīng)用-創(chuàng)新互聯(lián)
鏈接地址：http://muchs.cn/article0/djhiio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、虛擬主機(jī)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)