交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 基于vue-cli3多页面开发apicloud应用的教程详解第1/2页

    之前开发项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 多页面实例应用

    广而告之:
    热门推荐:
    js获取html参数及向swf传递参数应用介绍

    我们知道HTML页面是在客户端执行的,这样要获取参数必须使用客户端脚本(如JavaScript),在这点上不同于服务器端脚本获取参数方式。 下面的这段js代码获取HTML网页形如"test.html?foo=mytest&program=flash" "?"后所有参数。 复制代码 代码如下: <script langua···

    浅析PHP页面局部刷新功能的实现小结

    方法其实挺多的。以前比较常用的是iframe这样来做。现在多了个ajax,所以一般情况下都是用的ajax。第一种方法,ajax实现:当然,ajax使用起来确实很简单就可以实现,但是里面的很多知识还是比较有点深的。我之前做页面时间自动刷新的功能就是用的ajax。完整代码是:1.get···

    MySql5.7.18字符集配置图文详解

    故事背景:   很久很久以前(2017.6.5,文章有其时效性,特别是使用的工具更新换代频发,请记住这个时间,若已经没有价值,一切以工具官方文档为准),下了个mysql版本玩玩,刚好最新是mysql5.7.18,本机是win10、64位系统。大抵步骤分为:   1、下载:以官网(https://www···

    JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var、let、const。下文给大家介绍js中三种定义变量的方式const, var, let的区别。 1.const定义的变量不可以修改,而且必须初始化。 const b = 2;//正确 // const b;//错误,必须初始化 console.log('函数外const定义b:' + b);//有输···

    MySQL数据库操作常用命令小结

    创建数据库 最简单的方式: 复制代码 代码如下: CREATE DATABASE  my_db; 或者是: 复制代码 代码如下: CREATE DATABASE IF NOT EXISTS my_db; 创建utf8编码的数据库: 复制代码 代码如下: CREATE DATABASE IF NOT EXISTS my_db default character set utf8 COLLATE utf···

    js自定义弹框插件的封装

    弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己···

    jQuery中:selected选择器用法实例

    本文实例讲述了jQuery中:selected选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够匹配被选择的<option>元素。 语法结构: 复制代码 代码如下:$(":selected") 此选择器可以和其他选择器配合使用,比如类选择器、元素选择器等等。例如: 复制代码 代码如下:$···

    curl不使用文件存取cookie php使用curl获取cookie示例

    复制代码 代码如下:/*-----保存COOKIE-----*/$url = 'www.xxx.com'; //url地址$post = "id=user&pwd=123456"; //POST数据$ch = curl_init($url); //初始化curl_setopt($ch,CURLOPT_HEADER,1); //将头文件的信息作为数据流输出curl_setopt($ch,CURLOPT_RETURNTRANSFER···

    oracle远程连接服务器出现 ORA-12170 TNS:连接超时 解决办法

    错误描述:oracle远程连接服务器出现 ORA-12170 TNS:连接超时 错误检查:有很多是oracle自身安装的问题,但是我这里服务器配置正常,监听正常,服务正常,远程可以ping通服务器。 这里主要是防火墙问题,解决办法: (1)关闭防火墙; (2)在防火墙中添加,orcale端口1521例···

    wordpress全局变量$wpdb初始化并声明为全局变量的方法

    首先从wordpress程序index.php入手: 复制代码代码如下:define('WP_USE_THEMES', true); /** Loads the WordPress Environment and Template */require( dirname( __FILE__ ) . '/wp-blog-header.php' ); index.php加载了wp-blog-header.php文件,再打开看看: 复制代码代码如···