Apicloud development method is very old, the official CLI is not good, share with vuE-CLI3 apicloud development method.

Since Apicloud includes the concept of window and frame, multiple pages will definitely take advantage of Apicloud.

Those unfamiliar with VUE-CLI3 are advised to read the documentation first

Create a project

vue create vue-for-apicloud
Copy the code

Then select Manually Select Features

Do not select Router because vue-Router is much worse than Window and frame

The current structure is shown in figure

Create a vue.config.js file in the root directory as follows

PublicPath must use relative paths, pages is our multi-page setup, and we don’t need SourceMap because it’s an app

const pages = require('./build/pages')

module.exports = {
  publicPath: '/',
  pages: pages,
  productionSourceMap: false// Whether to generatesourceThe Map file}Copy the code

Create a new build folder in the root directory and create a pages.js folder in the build directory

The code in this case iterates through the page file and then gives the file a file name

const glob = require('glob')

console.log('Get page file... ')
const files = glob.sync('**/views/**/main.js')
const pages = {}
files.forEach(item => {
  const items = item.split('/')
  let page = items[items.length - 2]
  const pageParent = items[items.length - 3]
  if (page === 'frame') {
    page = `${pageParent}Frame`
  }
  pages[page] = item
})
console.log('End of file retrieval')

module.exports = pages

Copy the code

The current directory structure is shown below

Create index, Order,mine folders under SRC, and create main.js and app. vue in each folder, because we have multiple pages, we don’t need main.js and app. vue in SRC root directory, open window or fram in Apicloud E all need to be executed after the ApiReady is finished, but writing the apiReady method every time in each vue template feels ugly (you can also try writing the apiReady method in the template yourself), so I put the ApiReady in main.js Then initialize the VUE

Write the following code in app. vue of index

Two points in particular should be noted

The first root element below the template element must have an ID named app

2. OpenWin or openFrame urls must have an.html suffix, and the name of the file is the name of your directory. Of course, you can customize the file name rules, but change the logic of the pages

For those of you who don’t know why the suffix has to be.html, let’s do the following command to package it and look at it, this is the file that was packaged, so it has to have the suffix

npm run build
Copy the code

We will definitely open the frame requirement, so let’s create a new frame folder under the Order folder with the same contents as app.vue and main.js

The app. vue code for the order folder is as follows. The rule for the file name of the frame folder is the file name of the parent page + frame, of course you can change it yourself

Next, we start a service and get an IP address

npm run serve
Copy the code

Then we will copy this IP address into the config.xml of a new Apicloud project (preferably two projects, one for vUE development and one for Apicloud packaging only). The startup address must be your home address

And then we can really machine running, and will automatically be hot update, modify the code every time also need not bother to wifi automatic synchronization, note this way, when we develop open a window or black screen frame will be for a period of time, I also didn’t solve this, if someone is solved the problem solution.

After the development is completed, you must upload Apicloud for cloud packaging, packaging is easier, remember we just packaged the dist folder, directly copy into the Apicloud project, and then modify the startup address

For example, if we do this now, we will not be able to access the vue in the browser, because the vue initialization is in the apiReady. If you want to access the vue in the browser, you need to add a specific identifier

The webpack-dev-server-output plugin can convert memory files to files, so that the screen will not be black

const WebpackDevServerOutput = require('webpack-dev-server-output')

module.exports = {
    configureWebpack: {
        plugins: [
          new WebpackDevServerOutput({
            path: 'D:/Code/apicloud/haixingzixun/dist',
            isDel: true}}})]Copy the code

Then simply configure the path you set above in config.xml

<content src="dist/home.html"/>
Copy the code

The demo address