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

前端  /  管理员 发布于 5年前   309

之前开发项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

根据自己需求选择模块（不要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下一页阅读全文                                                
您可能感兴趣的文章:
Vue CLI3基础学习之pages构建多页应用
通过vue-cli3构建一个SSR应用程序的方法
详解Vue CLI3 多页应用实践和源码设计
vue-cli实现多页面多路由的示例代码
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Vue-cli创建项目从单页面到多页面的方法
详解vue-cli + webpack 多页面实例配置优化方法
详解vue-cli + webpack 多页面实例应用

• vue
• cli
• 多页面
• apicloud
• 应用

相关文章

• 

  又一款MVVM组件 Vue基础语法和常用指令（1）

  这篇文章主要为大家分享了一款MVVM组件，详细介绍了Vue基础语法和常用指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2016-11-11
• 

  vue 中Virtual Dom被创建的方法

  本文将通过解读render函数的源码，来分析vue中的vNode是如何创建的,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下 2019-04-04
• 

  基于vue2.0实现简单轮播图

  这篇文章主要为大家详细介绍了基于vue2.0实现简单轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2017-11-11
• 

  Vue-cli3项目配置Vue.config.js实战记录

  这篇文章主要给大家介绍了关于Vue-cli3项目配置Vue.config.js的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 2018-07-07
• 

  vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功

  这篇文章主要介绍了vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下 2018-03-03
• 

  vue实现文字横向无缝走马灯组件效果的实例代码

  这篇文章主要介绍了vue 文字横向无缝走马灯组件的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下 2019-04-04
• 

  Vue2.0+Vux搭建一个完整的移动webApp项目的示例

  这篇文章主要介绍了Vue2.0+Vux搭建一个完整的移动webApp项目的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2019-03-03
• 

  Vue-Router的使用方法

  这篇文章主要介绍了Vue-Router的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2018-09-09
• 

  深入浅析Vue.js 中的 v-for 列表渲染指令

  当遍历一个数组或枚举一个对象进行迭代循环展示时，就会用到列表渲染指令 v-for。这篇文章主要介绍了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以参考下 2018-11-11
• 

  Vue 组件注册实例详解

  这篇文章主要介绍了Vue 组件注册,结合实例形式较为详细的分析了vue.js组件的常见分类、注册方法及相关操作注意事项,需要的朋友可以参考下 2019-02-02

最新评论