基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解第1/2頁
之前開發(fā)項(xiàng)APP項(xiàng)目直接用APICloud+原生js的方式進(jìn)行編寫，整個項(xiàng)目下來發(fā)現(xiàn)開發(fā)慢，頁面代碼多且復(fù)雜，維護(hù)起來相對困難，而且文件大打包之后的APP會比較大，apicloud的框架也不好用，支持部分es67(像let、const、import等es6新特性不支持寫的太難受了)
采用vue-cli+APIcloud的方式寫解決以上痛點(diǎn)，開發(fā)靈活，并且打包之后體積更小速度更快
環(huán)境依賴
- vue
- webpack
- vue-cli3
- nodeJS
基本流程
項(xiàng)目開發(fā)最好準(zhǔn)備兩個項(xiàng)目，一個打包APP，一個項(xiàng)目開發(fā)，也會減少很多不必要的麻煩
創(chuàng)建項(xiàng)目并初始化
cd到項(xiàng)目想要創(chuàng)建的位置，執(zhí)行：
vue create vue-for-apicloud
選擇Manually select features
根據(jù)自己需求選擇模塊（不要Router,因?yàn)関ue-router跳轉(zhuǎn)頁面的效果相比window和frame相比差太多了），按空格鍵選中，按回車完成選擇：
選擇css預(yù)處理器語言，選擇之后可以獲得預(yù)處理語言支持：
選擇eslint：
剩下的配置根據(jù)自己情況來設(shè)定，等待項(xiàng)目創(chuàng)建完成。
項(xiàng)目結(jié)構(gòu)
項(xiàng)目結(jié)構(gòu)如圖：
多頁面配置
項(xiàng)目根目錄下創(chuàng)建vue.config.js
const pages = require('./build/pages')
module.exports = {
publicPath: './',
pages: pages,
// 是否生成sourceMap文件
// 開發(fā)環(huán)境配置true，方便快速定位錯誤（APICloud控制臺輸出真的很難受）
// 生產(chǎn)環(huán)境配置false，構(gòu)建速度更快，打包之后體積更小
productionSourceMap: true
}
項(xiàng)目根目錄下創(chuàng)建build文件夾，bulid文件夾下創(chuàng)建page.js
const glob = require('glob')
// 循環(huán)獲取文件并打包
console.log('獲取頁面文件中...')
// 讀取src/views下所有main.js,可根據(jù)自己的情況更改
const files = glob.sync('**/views/**/main.js')
const pages = {}
files.forEach(item => {
// 默認(rèn)輸出到dis文件夾下,輸出格式為文件夾名（如果文件夾名為frame則為父文件夾名+frame）.html
const items = item.split('/')
let page = items[items.length - 2]
const pageParent = items[items.length - 3]
if (page === 'frame') {
page = `${pageParent}Frame`
}
pages
您可能感興趣的文章:- Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用
- 通過vue-cli3構(gòu)建一個SSR應(yīng)用程序的方法
- 詳解Vue CLI3 多頁應(yīng)用實(shí)踐和源碼設(shè)計(jì)
- vue-cli實(shí)現(xiàn)多頁面多路由的示例代碼
- 詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
- Vue-cli創(chuàng)建項(xiàng)目從單頁面到多頁面的方法
- 詳解vue-cli + webpack 多頁面實(shí)例配置優(yōu)化方法
- 詳解vue-cli + webpack 多頁面實(shí)例應(yīng)用
相關(guān)文章
這篇文章主要介紹了Vue項(xiàng)目依賴包安裝及配置過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
vue項(xiàng)目如何讓局域網(wǎng)ip訪問配置設(shè)置
這篇文章主要介紹了vue項(xiàng)目如何讓局域網(wǎng)ip訪問配置設(shè)置，具有很好的參考價(jià)值，希望對大家有所幫助。2022-09-09
vue3實(shí)現(xiàn)el-table分批渲染表格
這篇文章主要為大家詳細(xì)介紹了vue3項(xiàng)目中如何實(shí)現(xiàn)el-table分批渲染表格,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享
這篇文章主要介紹了Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享，文章圍繞Vue?Vuex的相關(guān)資料展開配置項(xiàng)和多組件數(shù)據(jù)共享的案例分享，需要的小伙伴可以參考一下2022-04-04
vue+springboot上傳大文件的實(shí)現(xiàn)示例
本文主要介紹了vue+springboot上傳大文件的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue自定義全局彈窗組件操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue如何調(diào)用接口請求頭增加參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
用Axios Element實(shí)現(xiàn)全局的請求loading的方法
本篇文章主要介紹了用Axios Element實(shí)現(xiàn)全局的請求loading的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例
最近在學(xué)習(xí)前段后分離，本文介紹了Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11
vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖
本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06