之前開發項APP項目直接用APICloud+原生js的方式進行編寫，整個項目下來發現開發慢，頁面代碼多且復雜，維護起來相對困難，而且文件大打包之后的APP會比較大，apicloud的框架也不好用，支持部分es67(像let、const、import等es6新特性不支持寫的太難受了)
采用vue-cli+APIcloud的方式寫解決以上痛點，開發靈活，并且打包之后體積更小速度更快
環境依賴
基本流程
項目開發最好準備兩個項目，一個打包APP，一個項目開發，也會減少很多不必要的麻煩
創建項目并初始化
cd到項目想要創建的位置，執行：
vue create vue-for-apicloud
選擇Manually select features
根據自己需求選擇模塊（不要Router,因為vue-router跳轉頁面的效果相比window和frame相比差太多了），按空格鍵選中，按回車完成選擇：
選擇css預處理器語言，選擇之后可以獲得預處理語言支持：
選擇eslint：
剩下的配置根據自己情況來設定，等待項目創建完成。
項目結構
項目結構如圖：
多頁面配置
項目根目錄下創建vue.config.js
const pages = require('./build/pages')
module.exports = {
publicPath: './',
pages: pages,
// 是否生成sourceMap文件
// 開發環境配置true，方便快速定位錯誤（APICloud控制臺輸出真的很難受）
// 生產環境配置false，構建速度更快，打包之后體積更小
productionSourceMap: true
}
項目根目錄下創建build文件夾，bulid文件夾下創建page.js
const glob = require('glob')
// 循環獲取文件并打包
console.log('獲取頁面文件中...')
// 讀取src/views下所有main.js,可根據自己的情況更改
const files = glob.sync('**/views/**/main.js')
const pages = {}
files.forEach(item => {
// 默認輸出到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下一頁閱讀全文 免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
