“
This article will explain how to create a small application using the Uni-App framework.
“
preface
This article focuses on the creation of uni-App, a small application framework. If you are new to it, you can follow the rhythm of kaka.
Install Node.js
Open the official website to install the kaka – circled version.
After the installation is complete, use Node -v to check whether the installation is successful
Why node.js should be installed is probably a bit confusing as many people like kakha write back end.
Node.js has built-in NPM, so if you install Node.js on Windows, open CMD and use NPM to download resources.
NPM, or Node Package Management, is the built-in package manager for NodeJS, which is why Node.js is installed.
2. Install VUE scaffolding using NPM
Most of the first step is to execute the command NPM install -g@vue /cli
Vue-cli is 2.9 installed, but the create command is required to create uni-app projects, so a higher version is required.
Here is also a pit, you don’t step on ha!
NPM uninstall -g vue-cli if it is already installed, run NPM uninstall -g vue-cli to uninstall it.
“
Then perform
npm install -g cnpmThis command.“
See someone using the online taobao NPM install – g CNPM – registry=http://registry.npm.taobao.org installation CNPM taobao.
What kaka understands is a mirror image, but kaka has artifact so direct use installation, did not use taobao.
The successful installation looks like the following figure
Then install vue scaffolding again and execute the command
“
cnpm install -g @vue/cli“
Install @vue-cli again
The following figure shows the installation process, which is not complete.
After the installation is complete, use vUE -V to check the version is 4.5.9, as long as it is larger than 3.
Create a project
After the innocuous installation above, the next step is to type in window-facing CMD:
“
Vue create -p dCloudio /uni-preset- Vue project name;
“
Create a project
The first creation will prompt you to select the default and press Enter.
I don’t know if you will have any of the following problems when creating projects, but there is a problem here. Write down the problem and the solution.
If you meet anyone, follow here. If you don’t, just skip it.
The following figure shows the error that occurred during installation.
The solution
Open the command line in administrator mode
“
Run the NPM cache clean -f command to clear the 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“
The last execution
“
npm install“
Can.
Then re-execute create project ‘
“
vue create -p dcloudio/uni-preset-vue lottery“
See the click circle in the image below to indicate that it has been created successfully.
Iv. Run projects in wechat developer tools
Once the project is successfully created, it needs to run
Go to the project directory and execute the command
“
npm run dev:mp-weixin“
See the following tips.
Once you’re done running, you’ll see the following structure in the project directory, with an additional dist directory
The project path that needs to be imported into the wechat developer tool is the one in the picture below
Wechat development platform how to import their own research ha, the picture below is the kaka operation show
conclusion
That’s how Kaka created the Uni-App project using vue scaffolding.
It is my first time to get acquainted with VUE and uni-app to develop small programs. Therefore, if there is anything wrong in executing some commands and solving problems in the article, please let me know.
In the process of creating kaka is also based on other technical articles step by step operation, the final summary of the article, is also to give me the same novice a little help.
“
Adhering to learning, blogging and sharing is the belief that Kakha has been upholding since she started her career. I hope the articles on the Internet can bring you a little help. I’m Kaka. See you next time.
“