This is the 14th day of my participation in Gwen Challenge

preface

Recently, I checked my notes of learning Vue before, which mainly introduced that the project was packaged into an APP after completion, so I could record the learning process. Only record APICloud usage. This example uses the Vue project.

The preparatory work

Vue - cli4 packaging1, delete the hisotry mode of routes2, to ensure that the VUE project does not have any warnings or errors thrown by VUE3, remove allconsoleThe.log() statement (global search is null with the re:console.log\(.*\); ?).4, create vue.config.js in the root directory, and writemodule.exports = {publicPath: '/'} make sure there are no errors reported during the packaging process, and solve problems as soon as they occur, not later. Then it's a big problem.Copy the code

The implementation process

NPM run build creates a dist folder. Make sure that the index.html package can be opened directly locally. Otherwise there could be problems down the road. You will need to use the generated files in the package later. As shown in figure:

2, packaging tools can goAPICloud websiteDownload. I use Sublime Text3 for packing and compression. To install sublimet-apicloud-loader for sublime text3, check the website or search engine for answers. The installation takes effect only after the software is restarted and a new folder is created

Then right – click the mouse will appear red box options

3. Right-click on the New APICloud option, select Blank Apps, and name the project to create a new folder.

Next, delete the other files, leaving only the config.xml file

4. Go to the APICloud website and sign upwww.apicloud.com/

4.1 After registering and logging in, you will be presented with a page like this

4.2 Select Create App, select Natice App, fill in the information, and click Create

4.3 will bring up a page like this, indicating that the application has been created successfully.

5. The following steps we need to operate are shown in the figure below

5.1 Step 1: Set the terminal, set the corresponding Settings, upload pictures, only support PNG format, see the instructions for details.

5.2 Step 2: Certificate Click one-click to create a certificate (fill in the corresponding information). You can create the corresponding certificate according to the system you want (Android or IOS).

Note: IOS must be operated on apple computer, otherwise it can not be done. The APP generated after android phone can not install Apple certificate generated, apple phone can not install Android certificate generated.

5.3 code—- let’s go back to Sublime Text 3 and compress the packaged project and copy the packaged project files to the folder where you just deleted the config.xml

Before compression we change the config.xml information to the id of the application you just created (you can find the application information in the overview). Ids have to correspond, otherwise it won't work. Just change the ID, nothing else. Save!!! Quit!

With the ID information changed, the next step is to create a zip package, right-click the current folder, and selectCompression Widget packageThen a compressed package with the same name is generated

Now let’s go back to APICloud, click upload code, and select the one you just generatedCompressed package of the same name

After the upload is successful, corresponding logs are generated

6,The module—- can be selected according to their own needs, but generally do not use, the default is good, because in the development of certain use is a third-party plug-in what, I here is the default, did not choose other modules

7,Compilation of cloud—- no complicated steps, fill in the information can

Choose the typeThe beta 和 The final versionEither way, the official version of the app should be available in the app store, but enterprise certification is required, not individual developers. There’s a caveat here.

Eight,compile—- Finally for the exciting moment, click the big one aboveCompilation of cloudThe button will show compilation. Then quietly pray will not report the error!!

What if a compilation failure occurs? Start from the beginning to the end of the operation again, the error will have the corresponding prompt.

If there is no error, the compilation will be successful, and a TWO-DIMENSIONAL code will be generated. You can scan the code to download the packaged APP and install it on your phone.

If you change it after compiling, just keep compiling. The version number shown below appears, incremented by one each time you compile.

Finally, you can download and install it. You will findThe name of the appAs the aboveFill in the same information. My name is I Zhihu, which is a project imitating Zhihu Daily.

conclusion

Generally speaking, there are no more complex operation steps. After completing the information carefully and operating according to the steps, there will be no problems in general.

When you encounter problems, you can view the documentation to learn to solve your own doubts -> Novice development guide