国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue+webpack多頁(yè)面應(yīng)用

PascalXie / 2391人閱讀

摘要：多頁(yè)面應(yīng)用就是幾個(gè)單頁(yè)面應(yīng)用在一起。這篇文章使用的是總共有步我們從安裝好一個(gè)單頁(yè)面應(yīng)用說(shuō)起。在多頁(yè)面應(yīng)用中，因?yàn)橛卸鄠€(gè)應(yīng)用模板，所以建議把應(yīng)用模板放在一個(gè)文件夾里。例如創(chuàng)建每個(gè)單頁(yè)面應(yīng)用的入口文件。如能用單頁(yè)面應(yīng)用的，不使用多頁(yè)面應(yīng)用。

vue+webpack多頁(yè)面應(yīng)用

從git上初始化的vue項(xiàng)目框架是單頁(yè)面的。單頁(yè)面應(yīng)用可以實(shí)現(xiàn)大部分頁(yè)面web應(yīng)用開(kāi)發(fā)。若要用到多頁(yè)面需要需要配置。這篇文章就說(shuō)說(shuō)怎么應(yīng)用多頁(yè)面應(yīng)用。
多頁(yè)面應(yīng)用就是幾個(gè)單頁(yè)面應(yīng)用在一起。
這篇文章使用的是vue2.+,webpack3.+
總共有5步
我們從安裝好一個(gè)單頁(yè)面應(yīng)用說(shuō)起。

1、 創(chuàng)建一個(gè)vue項(xiàng)目。 2、 創(chuàng)建模板html文件，入口文件，vue文件。

一般在根據(jù)目錄下面有一個(gè)index.html文件。它是頁(yè)面的html模板文件。一個(gè)模板文件就是一個(gè)單頁(yè)面應(yīng)用，按需創(chuàng)建模板。
在多頁(yè)面應(yīng)用中，因?yàn)橛卸鄠€(gè)應(yīng)用模板，所以建議把應(yīng)用模板html放在一個(gè)文件夾里。不放也沒(méi)關(guān)系。例如：

創(chuàng)建每個(gè)單頁(yè)面應(yīng)用的入口文件。（*.js）

每一個(gè)單頁(yè)面的三個(gè)文件（.js, .vue, *.html）都得對(duì)應(yīng)上。

3、 定義入口文件。

因?yàn)閣ebpack有2個(gè)環(huán)境（1.開(kāi)發(fā)環(huán)境。2.生產(chǎn)環(huán)境。）所以這2個(gè)環(huán)境都需要配置。這步是作用于開(kāi)發(fā)環(huán)境的。

打開(kāi)webpack.base.conf.js文件。在入口選項(xiàng)中輸入入口文件的路徑及變量名。如：

4、 配置開(kāi)發(fā)環(huán)境。

打開(kāi)webpack.dev.conf.js文件。在plugins選項(xiàng)中設(shè)置各單頁(yè)面應(yīng)用的htmlwebpackplugin配置。記得修改首頁(yè)的配置。如：

5、 配置生產(chǎn)環(huán)境。

在index.js文件中的build選項(xiàng)中設(shè)置模板路徑。如：

在webpack.prod.conf.js文件。在plugins選項(xiàng)中設(shè)置各單頁(yè)面應(yīng)用的htmlwebpackplugin配置。在首頁(yè)的配置中添加了chunksSortMode,chunks選項(xiàng)。添加各頁(yè)面的htmlwebpackplugin插件配置。如：

tip

能用單頁(yè)面應(yīng)用的，不使用多頁(yè)面應(yīng)用。基本上單頁(yè)面都能解決問(wèn)題。頁(yè)面跳轉(zhuǎn)可以使用this.$router.push(....)搞定。

2018/05/22 by stone

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/95184.html

相關(guān)文章

  • Vue+thinkJs博客網(wǎng)站（一）之vue多頁(yè)面應(yīng)用的webpack3配置

    摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態(tài)資源首先需要改的是入口文件，因?yàn)槭嵌囗?yè)面應(yīng)用，需要多個(gè)入口文件來(lái)保證打包成不同的。 一.項(xiàng)目簡(jiǎn)介 ? ? 本項(xiàng)目使用vue作為前端框架，thinkJs作為后端框架，構(gòu)建個(gè)人博客網(wǎng)站，頁(yè)面分為博客展示和后臺(tái)管理，主要目的是學(xué)習(xí)使用thinkJs?，F(xiàn)在只完成了主要的博客增刪改功能，發(fā)現(xiàn)webpack的配置遇到了一些坑，這里先記錄下。項(xiàng)目目錄結(jié)構(gòu)如下...

    NickZhou 評(píng)論0 收藏0

  • Vue+thinkJs博客網(wǎng)站（一）之vue多頁(yè)面應(yīng)用的webpack3配置

    摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態(tài)資源首先需要改的是入口文件，因?yàn)槭嵌囗?yè)面應(yīng)用，需要多個(gè)入口文件來(lái)保證打包成不同的。 一.項(xiàng)目簡(jiǎn)介 ? ? 本項(xiàng)目使用vue作為前端框架，thinkJs作為后端框架，構(gòu)建個(gè)人博客網(wǎng)站，頁(yè)面分為博客展示和后臺(tái)管理，主要目的是學(xué)習(xí)使用thinkJs?，F(xiàn)在只完成了主要的博客增刪改功能，發(fā)現(xiàn)webpack的配置遇到了一些坑，這里先記錄下。項(xiàng)目目錄結(jié)構(gòu)如下...

    dongxiawu 評(píng)論0 收藏0

  • @vue/cli+webpack搭建多頁(yè)面應(yīng)用

    摘要：本文記錄了用搭建項(xiàng)目后，配置成多頁(yè)面應(yīng)用的過(guò)程。項(xiàng)目地址首先全局安裝創(chuàng)建初始項(xiàng)目創(chuàng)建后默認(rèn)是一個(gè)單頁(yè)面應(yīng)用，在默認(rèn)結(jié)構(gòu)的基礎(chǔ)上將目錄結(jié)構(gòu)改為如下形式。其中目錄下的和就是多頁(yè)面應(yīng)用中的兩個(gè)頁(yè)面。 vue-multi-pages 本文記錄了用@vue/cli+webpack搭建項(xiàng)目后，配置成多頁(yè)面應(yīng)用的過(guò)程。 項(xiàng)目地址：https://github.com/mandyshen9... 首先...

    ThinkSNS 評(píng)論0 收藏0

  • vue+webpack搭建單文件應(yīng)用和多文件應(yīng)用webpack.config.js的寫(xiě)法區(qū)別

    摘要：而多頁(yè)面應(yīng)用的入口文件是所有需要用到的頁(yè)面。單文件應(yīng)用和多文件應(yīng)用上，是大同小異的，區(qū)別就討論到這里了。 1.前言 這幾天，都遇到過(guò)有人問(wèn)過(guò)相似的問(wèn)題，就是用vue和webpack搭建目錄的時(shí)候，怎么把單頁(yè)面應(yīng)用的配置改成多文件應(yīng)用，或者是怎么把多文件應(yīng)用的配置改成單文件應(yīng)用。這個(gè)情況，我之前有處理過(guò)，公司的同事教過(guò)我，我就針對(duì)這個(gè)情況寫(xiě)下此篇文章。各位如果覺(jué)得我哪里寫(xiě)得不夠好，寫(xiě)錯(cuò)了...

    seal_de 評(píng)論0 收藏0

  • 搭建一個(gè)多頁(yè)面的無(wú)依賴的工程化項(xiàng)目

    摘要：也就是說(shuō)，我們需要做一個(gè)非單頁(yè)應(yīng)用的工程化項(xiàng)目?，F(xiàn)在這個(gè)項(xiàng)目的靜態(tài)資源是以文件哈希值來(lái)控制的。這個(gè)該怎么解決呢感謝，我們可以通過(guò)如下的配置來(lái)實(shí)現(xiàn)意思就是如果圖片是在中引用的則不加哈希值，在文件中引入的則加上。 最近金拱門比較火，我們先戳開(kāi)它的官網(wǎng)看看。 看完后，如果你老板要是讓你做這么一個(gè)網(wǎng)站，一定要seo，一定要兼容IE，你會(huì)怎么去做呢？ 用vue/react吧，單頁(yè)應(yīng)用滿足不了se...

    go4it 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<