Home > Article > Web Front-end > Create uni-app project using scaffolding
Create uni-app project using scaffolding
- 咔咔Original
- 2020-11-28 18:46:362465browse
“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.
Installation process
New version3. 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 -fClear 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 distdirectory
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!