[rapid development of APP] Series 1: build app development environment and workspace

Time:2020-9-17

1、 Build app development environment and workspace

preface

Our goal is to make a real case, focusing on the use of the bui framework and related tools, combined with the native packaging platform, to help you understand the development process of an app. Take the app of the latest Netease News as an example, try to describe the process as much as possible, and the details can be improved by themselves. If the imitation is too high, there will be infringement problems^_ ^The article will be divided into several sections, the knowledge points will be explained one by one, master a little bit every day, and make a little progressBui speedSubscription number, thank you for your attention

Note: the app finally developed is only for learning and communication. As only part of the interface of Netease News is obtained, part of the content is still test data. Scan QR code to download

[rapid development of APP] Series 1: build app development environment and workspace

BUI-163
Size: 6.26m

NetEase News

[rapid development of APP] Series 1: build app development environment and workspace[rapid development of APP] Series 1: build app development environment and workspace

Pictures and projects have been put on GitHub, you can take it down and do it according to your own understanding

1.1 installation software and environment

The whole development environment will involve the following contents

  1. vscodeEditor;
  2. bui-fastWrite plug-in quickly (do not remember the structure of the control, just input the name of the control, and the corresponding initialization will be generated);
  3. Node environment
  4. buijsCLI tool (building engineering template tool);
  5. Chrome browser;

Vscode editor

Excellent, nothing to say, click download to install

[rapid development of APP] Series 1: build app development environment and workspace

bui-fast

? > bui fast is an editor plug-in. For the code fragment of the bui control, click vscode to install it. For more editors, please check the bui fast documentation

[rapid development of APP] Series 1: build app development environment and workspace

Node environment

We recommend downloading and installing. At present, we usenode12edition.

[rapid development of APP] Series 1: build app development environment and workspace

Check the NPM version number

npm -v

Installing cnpm

After the installation is completed, the NPM package will be slow to install in foreign countries. We recommend using cnpm of Taobao

Right click the administrator to open the terminal, windows remember to close the firewall, 360 and other things to block system permissions

npm install -g cnpm --registry=https://registry.npm.taobao.org
  • Mac users

The sudo command requires a user password

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

Buijs cli tool

The following command is used to build the latest template library, but it can be used to quickly execute the template library

  • Windows users

Right click to open the terminal administrator

cnpm -g buijs
  • Mac users

The sudo command requires a user password

sudo cnpm -g buijs

The following commands are subject to Mac users, and the installation of different systems is no longer distinguished

Chrome installation

? > for PC preview and data debugging, please download and install

1.2 construction works

Our goal is to usedcloudPlatform packaging, the construction of the project with the corresponding platform. Through the download of the single page project is webapp project, comparison below will findindex.js,bui.jsThe contents are different. We will explain them later

buijs create 163 -p dcloud

163 is the user-defined project name. Buijs instructions

Create a successful project Preview

[rapid development of APP] Series 1: build app development environment and workspace

Please check the document for the specification of the directory

1.3 installation dependency

cd 163
cnpm install

Some red reminders can be ignored, some of them are old-fashioned, but they are not used and will not affect

1.4 run Preview

npm run dev

If there is no error, a port will be automatically generated, and a service will be opened automaticallychromeBrowser, console will also have generated two-dimensional code, easy to scan code remote debugging. The original 163 directory, there will be one moredistThere may be more.tempOur editors focus onsrcThe catalogue will do

The installation of the environment here is basically OK

1.5 additional skills 1. Local file debugging

If notnpm run dev, open it directly163/src/index.htmlCan’t see the effect, this is because of Chrome’s local file security restrictions, how about BaiduOpen cross domain ChromeUntil you see the following prompt, it means that the domain has been crossed
[rapid development of APP] Series 1: build app development environment and workspace

1.6 additional skills 2. Create app workspace

Have you found that if you build a project in the previous way, the installation depends on it. Each time you create an app, it means that you have to install it many times. If the network is slow, it takes up a lot of space. Fortunately, bui projects have this kind of effectnode_modulesThe reuse of is considered

First, create a workspace directory, and then delete the SRC directory

#Create workspace directory
buijs create workspace
#Enter workspace directory
cd workspace
#Installation dependency
cnpm install
#Delete SRC directory
rm -rf src

At this point, only the workspace is leftapp.json,package.json,gulefile.jsThree files

Continue to create 163 projects in the workspace directory

#Create 163 project
buijs create 163 -p dcloud
#Preview 163 project
npm run dev-163

1.7 effect preview

[rapid development of APP] Series 1: build app development environment and workspace

Next section, 2. Quickly build the interface through the template