相思资源网 Design By www.200059.com

之前开发项APP项目直接用APICloud+原生js的方式进行编写,整个项目下来发现开发慢,页面代码多且复杂,维护起来相对困难,而且文件大打包之后的APP会比较大,apicloud的框架也不好用,支持部分es67(像let、const、import等es6新特性不支持写的太难受了)

采用vue-cli+APIcloud的方式写解决以上痛点,开发灵活,并且打包之后体积更小速度更快

环境依赖

  • vue
  • webpack
  • vue-cli3
  • nodeJS

基本流程

项目开发最好准备两个项目,一个打包APP,一个项目开发,也会减少很多不必要的麻烦

创建项目并初始化

cd到项目想要创建的位置,执行:

vue create vue-for-apicloud

选择Manually select features

基于vue-cli3多页面开发apicloud应用的教程详解第1/2页

根据自己需求选择模块(不要Router,因为vue-router跳转页面的效果相比window和frame相比差太多了),按空格键选中,按回车完成选择:

基于vue-cli3多页面开发apicloud应用的教程详解第1/2页

选择css预处理器语言,选择之后可以获得预处理语言支持:

基于vue-cli3多页面开发apicloud应用的教程详解第1/2页

选择eslint:

基于vue-cli3多页面开发apicloud应用的教程详解第1/2页

剩下的配置根据自己情况来设定,等待项目创建完成。

项目结构

项目结构如图:

基于vue-cli3多页面开发apicloud应用的教程详解第1/2页 

多页面配置

项目根目录下创建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下一页阅读全文
标签:
vue,cli3多页面应用,vuecli,多页面应用,vue,cli3

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“基于vue-cli3多页面开发apicloud应用的教程详解第1/2页”

暂无基于vue-cli3多页面开发apicloud应用的教程详解第1/2页的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。