亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2019年06月03日 16:57:58   作者：假裝取了昵稱  
這篇文章主要介紹了基于vue-cli3多頁(yè)面開發(fā)apicloud應(yīng)用，本文采用vue-cli+APIcloud的方式寫解決以上痛點(diǎn)，開發(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

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

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

選擇eslint：

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

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

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

 

多頁(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

相關(guān)文章

最新評(píng)論