基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解第1/2頁

之前開發(fā)項APP項目直接用APICloud+原生js的方式進行編寫，整個項目下來發(fā)現(xiàn)開發(fā)慢，頁面代碼多且復(fù)雜，維護起來相對困難，而且文件大打包之后的APP會比較大，apicloud的框架也不好用，支持部分es67(像let、const、import等es6新特性不支持寫的太難受了)

站在用戶的角度思考問題，與客戶深入溝通，找到長治網(wǎng)站設(shè)計與長治網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋長治地區(qū)。

采用vue-cli+APIcloud的方式寫解決以上痛點，開發(fā)靈活，并且打包之后體積更小速度更快

環(huán)境依賴

vue
webpack
vue-cli3
nodeJS

基本流程

項目開發(fā)最好準(zhǔn)備兩個項目，一個打包APP，一個項目開發(fā)，也會減少很多不必要的麻煩

創(chuàng)建項目并初始化

cd到項目想要創(chuàng)建的位置，執(zhí)行：

vue create vue-for-apicloud

選擇Manually select features

基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解第1/2頁

根據(jù)自己需求選擇模塊（不要Router,因為vue-router跳轉(zhuǎn)頁面的效果相比window和frame相比差太多了），按空格鍵選中，按回車完成選擇：

選擇css預(yù)處理器語言，選擇之后可以獲得預(yù)處理語言支持：

選擇eslint：

剩下的配置根據(jù)自己情況來設(shè)定，等待項目創(chuàng)建完成。

項目結(jié)構(gòu)

項目結(jié)構(gòu)如圖：

多頁面配置

項目根目錄下創(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
}

項目根目錄下創(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
                        12下一頁閱讀全文            
            
                        

            網(wǎng)站名稱：基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解第1/2頁            

            URL地址：http://weahome.cn/article/ihojos.html