vue-cli中怎么利用webpack 構(gòu)建一個(gè)多頁(yè)面應(yīng)用,針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、鐵門關(guān)網(wǎng)絡(luò)推廣、成都微信小程序、鐵門關(guān)網(wǎng)絡(luò)營(yíng)銷、鐵門關(guān)企業(yè)策劃、鐵門關(guān)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供鐵門關(guān)建站搭建服務(wù),24小時(shí)服務(wù)熱線:18982081108,官方網(wǎng)址:bm7419.com
關(guān)于vue.js
vue.js是一套構(gòu)建用戶界面的 輕型的漸進(jìn)式前端框架。它的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。使用vue可以給你的開發(fā)帶來極致的編程體驗(yàn)。
關(guān)于vue-cli
Vue-cli是vue官方提供的一個(gè)命令行工具(vue-cli),可用于快速搭建大型單頁(yè)應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置,帶來現(xiàn)代化的前端開發(fā)流程。只需一分鐘即可啟動(dòng)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目。
疑問
vue-cli主要是用于構(gòu)建單頁(yè)應(yīng)用的腳手架,但是現(xiàn)實(shí)項(xiàng)目中,大部分項(xiàng)目都是多頁(yè)的,怎么樣可以很好的利用這一套官方配置呢?我在網(wǎng)上找了一下, 幾乎找不到vue多頁(yè)應(yīng)用實(shí)例,所以才有基于vue-cli生成的單頁(yè)應(yīng)用進(jìn)行改造。
使用方法
# install dependencies npm install # serve with hot reload at localhost:8080/module/index.html npm run dev # build for production with minification npm run build
目錄結(jié)構(gòu)
vue-cli-multipage |---build |---config |---src |---assets |---img 圖片文件 |---css 樣式文件 |---font 字體文件 |---components 組件 |---Button.vue 按鈕組件 |---Hello.vue |---module |---index 首頁(yè)模塊 |---index.html |---index.js |---App.vue |---detail 詳情頁(yè)模塊 |---detail.html |---detail.js |---App.vue
從目錄結(jié)構(gòu)上,各種組件、頁(yè)面模塊、資源等都按類新建了文件夾,方便我們儲(chǔ)存文件。
其實(shí)我們所有的文件,最主要都是放在module文件夾里,以文件夾名為html的名稱。
例如:
|---index 首頁(yè)模塊 |---index.html |---index.js |---App.vue
此時(shí)我們?cè)L問的鏈接是:http://localhost:8080/module/index.html
這里一定要注意,在module里下級(jí)文件夾里需要將html,js,vue template 都統(tǒng)一放在當(dāng)前文件夾里,當(dāng)然你也可以繼續(xù)放其他的資源,例如css、圖片、組件等,webpack會(huì)打包到當(dāng)前頁(yè)面里。
如果項(xiàng)目不需要這個(gè)頁(yè)面了,可以把這個(gè)文件夾直接刪除掉,干凈利落,干活也開心。
像以前傳統(tǒng)的開發(fā)項(xiàng)目,所有的圖片都習(xí)慣放在images里,當(dāng)項(xiàng)目有改動(dòng)時(shí),有些圖片等資源用不上了,但還占著坑位,導(dǎo)致項(xiàng)目越來越大,雖然現(xiàn)在的硬件容量大到驚人,但我們應(yīng)該還是要養(yǎng)到一個(gè)良好的習(xí)慣。
組件的使用
組件(Component)是 vue.js 最強(qiáng)大的功能之一,當(dāng)你發(fā)現(xiàn)使用組件可以減少造輪子里,你會(huì)深深的愛上它。
我們的組件都是放在components目錄下的,調(diào)用組件的方法也很簡(jiǎn)單。
import Hello from 'components/Hello'
然后記得在*.vue注冊(cè)導(dǎo)入的組件,要不然會(huì)無法使用。
import Hello from 'components/Hello' export default { name: 'app', components: { //在這里注冊(cè)組件,不然無法使用 Hello } }
構(gòu)建代碼說明
那我們使用的是vue-cli的手腳架,用過vue-cli的同學(xué)都知道構(gòu)建代碼是放在根目錄build下,vue多頁(yè)面主要修改了這三個(gè)JS文件:webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。
/** ** [webpack.base.conf.js]這里主要列出相關(guān)代碼的修改點(diǎn),具體代碼請(qǐng)看build/webpack.base.conf.js */ var entries = getEntry('./src/module/**/*.js'); // 獲得入口js文件 module.exports = { entry: entries, .... } function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-3); pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑 entries[pathname] = entry; }); return entries; }
/** ** [webpack.prod.conf.js]這里主要列出相關(guān)代碼的修改點(diǎn),具體代碼請(qǐng)看build/webpack.base.prod.js */ function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-3); pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑 entries[pathname] = entry; }); return entries; } var pages = getEntry('./src/module/**/*.html'); for (var pathname in pages) { // 配置生成的html文件,定義路徑等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路徑 inject: true, // js插入位置 minify: { //removeComments: true, //collapseWhitespace: true, //removeAttributeQuotes: true }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }; if (pathname in module.exports.entry) { conf.chunks = ['manifest', 'vendor', pathname]; conf.hash = true; } module.exports.plugins.push(new HtmlWebpackPlugin(conf)); }
關(guān)于vue-cli中怎么利用webpack 構(gòu)建一個(gè)多頁(yè)面應(yīng)用問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
本文名稱:vue-cli中怎么利用webpack構(gòu)建一個(gè)多頁(yè)面應(yīng)用
當(dāng)前鏈接:http://bm7419.com/article28/geehjp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)建站、關(guān)鍵詞優(yōu)化、云服務(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)