Create uni-app project using scaffolding

“

I have nothing to do to write a small program, so I want to use the uni-app framework to implement it. This article will explain the creation steps in detail.

”

Preface

This article mainly introduces the creation of the small program framework uni-app. If If you are also a novice, you can follow the rhythm of Kaka.

1. Install node.js

Open the official website to install the circled version.

node.js installation

After the installation is complete, use node -V to check whether the installation is successful

Verify whether node.js is installed successfully

Why should node.js be installed? It is estimated that many people who write backends like Kaka cannot understand it.

Because the node.js software has built-in npm, after installing nodejs on the windows system, you can use npm to download resources by opening cmd. I won’t talk about linux here for the time being!

npm, the full name is [node package management], is the built-in package manager of nodejs, which is why node.js is installed.

2. Use npm to install vue scaffolding

I looked online and most of the first steps are to execute the commandnpm install -g @vue/cli

But the installed vue-cli is version 2.9, but you need to use the create command when creating the uni-app project, so a higher version is required.

This is also a pit that Kaka has stepped on, so don’t step on it!

If it has been installed, you can use the npm uninstall -g vue-cli command to uninstall it.

“

Then execute the command npm install -g cnpm.

”

Look at Taobao’s that some people use online. npm install -g cnpm --registry=http://registry.npm.taobao.org Install Taobao’s cnpm.

What Kaka understands is a mirror, but Kaka has an artifact, so I installed it directly without using Taobao.

The successful installation will look like the picture below

cnpm installation success demonstration

Then install the vue scaffolding again and execute the command

“

cnpm install -g @vue/cli

”

Install @vue-cli# again

##The picture below shows the installation process, and the process is not complete.

Installation process

After the installation is completed, use vue -V to check that the version is 4.5.9, as long as it is greater than 3.

New version

3. Create project

After the innocuous installation above, the next step is to enter in the window-oriented cmd:

“

vue create -p dcloudio/uni-preset- vue Project name；

”

Create project

When creating for the first time, you will be prompted. We can select the default and press Enter to select.

Create project

I don’t know if you will have the following problems when you create the project, but there is a problem here, Kaka will solve this problem Write down the occurrences and solutions.

If you encounter it, just follow here. If you don't encounter it, just skip it.

The picture below shows the error that occurred during the installation process.

Error demonstration

Solution

Use administrator mode to open the command line

“

Execute commandnpm cache clean -fClear cache

”

Run as administrator Command line

After clearing the cache, install the latest version of Node helper:

"

npm install -g n

"

Then execute the following command

"

npm install -g n --force

"

Finally execute

"

npm install

”

That’s it.

Then re-execute the create project`

“

vue create -p dcloudio/uni-preset-vue lottery

”

See below If the picture is circled, it means it has been created successfully.

Create project

4. Run the project in WeChat developer tools

After the project is successfully created, you need to run it

Go to the project directory and execute the command

"

npm run dev:mp -weixin

”

Just see the prompt in the picture below.

Run the project

After running, you will see the following structure in the project directory, and there will be an extra distdirectory

Project directory

The project path that needs to be imported to the WeChat developer tool is the place circled in the picture below

WeChat Developer Tools Import Project Directory

Study how to import projects on the WeChat development platform yourself. The picture below is a display of Kaka operation

The operation results Figure

Summary

The above is the entire process of Kaka using vue’s scaffolding to create a uni-app project process.

It is my first time to come into contact with vue, and it is my first time to come into contact with uni-app to develop small programs, so if there is anything wrong with the execution of some commands and the solution of problems in the article, I hope you can point it out.

In this creation process, Kaka also followed other technical articles step by step. The article summarized in the end is also to give some help to novices like me.

“

Persistence in learning, persistence in blogging, and persistence in sharing are the beliefs that Kaka has always upheld since his career. I hope that Kaka’s articles in the huge Internet can bring you a little Silk help. My name is Kaka, see you next time.

”

The above is the detailed content of Create uni-app project using scaffolding. For more information, please follow other related articles on the PHP Chinese website!