溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-08-24 17:19:34 來(lái)源：腳本之家 閱讀：125 作者：假裝取了昵稱 欄目：web開發(fā)

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

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

環(huán)境依賴

  • vue
  • webpack
  • vue-cli3
  • nodeJS

基本流程

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

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

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

vue create vue-for-apicloud

選擇Manually select features

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

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

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

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

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

選擇eslint：

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

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

項(xiàng)目結(jié)構(gòu)

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

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

多頁(yè)面配置

項(xiàng)目根目錄下創(chuàng)建vue.config.js

const pages = require('./build/pages')
module.exports = {
 publicPath: './',
 pages: pages,
 // 是否生成sourceMap文件
 // 開發(fā)環(huán)境配置true，方便快速定位錯(cuò)誤（APICloud控制臺(tái)輸出真的很難受）
 // 生產(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('獲取頁(yè)面文件中...')
// 讀取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下一頁(yè)閱讀全文
向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手