Create uni-app project using scaffolding
Nov 28, 2020 pm 06:46 PM“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.
After the installation is complete, use node -V to check whether the installation is successful
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
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. 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.3. Create project
After the innocuous installation above, the next step is to enter in the window-oriented cmd:“Create projectvue create -p dcloudio/uni-preset- vue
”Project name
;
When creating for the first time, you will be prompted. We can select the default and press Enter to select.
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.
Solution
Use administrator mode to open the command line
“Execute command
”npm cache clean -f
Clear cache
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.
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.
After running, you will see the following structure in the project directory, and there will be an extra dist
directory
The project path that needs to be imported to the WeChat developer tool is the place circled in the picture below
Study how to import projects on the WeChat development platform yourself. The picture below is a display of Kaka operation
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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to develop uni-app in VSCode? (Tutorial sharing)

Use uniapp to develop a simple map navigation

Let's talk about how to use uniapp to develop a snake game!

How to encapsulate uni-app vue3 interface request

Examples to explain how uniapp implements the all-select function of multi-select boxes

Take you step by step to develop a uni-app calendar plug-in (and publish it)

Detailed example of how uniapp implements phone recording function (with code)

Let's talk about how to use Uniapp to implement global message prompts and its components
