uniappIs a framework for using the development of all front-end applications, developers write a set of code that can be released to iOS, Android, and a variety of small programs. Deeply loved by the majority of front-end developers.uniappOfficials also provide their own IDE toolsHBuilderXThe company can quickly developuniappproject. But many front-end students are already more accustomed to using theVSCodeGoing to develop a project in order to developuniappproject to switch development tools again, and there is also a certain adaptation process to new development tools, most front-end students are certainly not willing. Here we look at the use ofVSCodeHow to builduniappProject.
Install node and pnpm
nodeI'm not going to talk much about the installation of node, go to the official website to download, direct installation can be. node installed, we then install thepnpm(LAUGHS) Huh?nodeThe installation does not come withnpmWhat? This one.pnpmWhat is it again? Here's a brief description.npmcap (a poem)pnpmThe difference is not to be emphasized. Using thenpm When the dependency is used by a different project, it is installed again and again. And when using thepnpmWhen the dependencies are stored in a common area, different projects will introduce the same dependencies from the common area, saving space.
pnpmWe'll just install it globally, by executing the following command:
npm install -g pnpm
Once installed, we run the command linepnpm -vIf you can see the version number, it means the installation is successful.
Creating a uniapp project
Since we are going to use theVSCodeto develop the project, and the project is going to useVue3respond in singingTypeScriptSo we're going to use the command line to createuniappProject. First, go to the section where we store theVSCodeMy project directory is theD:\VSProjectsAfter entering, execute the command as follows:
npx degit dcloudio/uni-preset-vue#vite-ts Project name
Project nameJust write your own real project name, mine is calledmy-vue3-uniapp. This command takes the officially provided command that uses theTypeScriptcap (a poem)Vite(used form a nominal expression)uniappThe project template is downloaded and then we can go ahead and develop theuniappProject up.
We useVSCodeOpen the project, the project's directory is as follows:
We can seesrcThe files in the directory areuniappproject's documentation, including pages, styles, static files, and so on.srcOutside the directory are files for the entire project, such as:cap (a poem)etc. Then we open the terminal and usepnpmcommand to install the dependencies, execute the command as follows:
pnpm i
After execution is complete, the familiarnode_modulesThe catalog appears in the project as shown:
Then we run the project and execute the command as follows:
pnpm run dev:mp-weixin
The above command will compile our code into WeChat applet code as shown in the figure:
After compiling, our project has thedistdirectory, this directory is the compiled output directory. Then we open the WeChat applet development tool, directory selection/dist/dev/mp-weixin, as shown:
AppID to write the AppID of our own applet, click OK.
Seeing this image shows that ouruniappThe project is built successfully and can be previewed by going through the WeChat applet development tool. We can preview the project through theVSCodeAdd some text to the page and see if the screen of the WeChat applet development tool changes. I won't give you a demonstration here.
Add uni-ui extension
In our development projects, we will use a variety of components, only the use of uniapp's built-in components is not enough, we also need to install the official extension components uni-ui, how to install it? We also use thepnpmcommand to install it. Before we can install the uni-ui extension specifically, we first need to install thesasscap (a poem)sass-loader，
Install sass
pnpm i sass -D
Install sass-loader
pnpm i sass-loader@
Since all node versions are now greater than 16, we follow the official recommendation of uniapp to install theThe version of the
Finally we install uni-ui as follows:
pnpm i @dcloudio/uni-ui
After the uni-ui installation is complete, we then configure theeasycom，easycomThe advantage of this is that the uni-ui component can be introduced automatically, without us having to manuallyimportThis is very convenient for us to develop our project, we open thesrcdirectory of the and addeasycom Nodes:
//
{
"easycom": {
"autoscan": true,
"custom": {
// The uni-ui rule is configured as follows
"^uni-(. *)": "@dcloudio/uni-ui/lib/uni-$1/uni-$"
}
},
// Other content
pages:[
// ...
]
}
This way the uni-ui extension is added to our project.
Json file comments
We are addingeasycomThe time of the discovery of theThe comments in the file are error-indicating, and we want to make it possible to have comments in the Json file, at leastrespond in singingTwo files like this can have comments, this we need in theVSCodeConfigure it in theFile->Preferences->Settings, as shown:
And then we're in thetext editorhit the nail on the headfileand then again in theAssociationsAdd items to the following:
Then we go back tocap (a poem)Take a look at these two files and the comments won't report an error.
VSCode plugin installation
So far, our uniapp project has been built, and has been able to run normally, the two more important json file, the comment text does not report errors. But this is from our normal development is still a lot worse, we are using uniapp components, there is no prompt, which makes us write the program is very inconvenient, we can install a few uniapp plug-ins to solve these problems. We've added a few plug-ins to theVSCodeDo a search for uniapp in the extensions store, there are 3 plugins that need to be installed here:
- uniapp applet extension
- uni-create-view
- uni-helper
After installation, we will be prompted when writing a page:
When creating a new page, there will be uniapp related options:
These are very helpful for us to actually develop.
Install uniapp's types
We can see that in the vue file, the component of uniapp does not turn green, indicating that ts is not in effect, we first install the type file of uniapp as follows:
pnpm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types
We get an error when installing with pnpm, we follow the instructions in the official documentation of uni-helper to set theshamefully-hoist because oftrue. This one requires us to find the home directory of the.npmrcfile, as shown:
Then add it to the file:
registry=
shamefully-hoist=true
We then run the pnpm command to install the type files. Once the installation is complete, in the project root directory, open thefile in thetypesAdd the type of our installation in the
{
"extends": "@vue/tsconfig/",
"compilerOptions": {
……
"types": [
"@dcloudio/types",
"@uni-helper/uni-app-types",
"@uni-helper/uni-ui-types"
]
}
……
}
Once the addition is complete, we find that thecompilerOptionsThere is an error reported, hover your mouse up to find out:
The two error message options are going to be deprecated, and we want to get rid of this error message by adding the"ignoreDeprecations": "5.0",：
{
"extends": "@vue/tsconfig/",
"compilerOptions": {
"ignoreDeprecations": "5.0",
……
},
"include": ["src/**/*.ts", "src/**/*.", "src/**/*.tsx", "src/**/*.vue"]
}
this kind ofcompilerOptionsIt doesn't report errors anymore. Then we open the vue file and find that the uniapp labels are all green, but there is an error reported, thisVSCodeWe can configure the following to solve the problem, refer to the official documentation:
{
……
"vueCompilerOptions": {
"plugins": ["@uni-helper/uni-app-types/volar-plugin"]
},
……
}
Then reboot.VSCode. Finally, we noticed that the uniapp tag of the vue file turned green and no error was reported:
ultimateThe overall content is as follows:
{
"extends": "@vue/tsconfig/",
"compilerOptions": {
"ignoreDeprecations": "5.0",
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
"types": [
"@dcloudio/types",
"@uni-helper/uni-app-types",
"@uni-helper/uni-ui-types"
]
},
"vueCompilerOptions": {
"plugins": ["@uni-helper/uni-app-types/volar-plugin"]
},
"include": ["src/**/*.ts", "src/**/*.", "src/**/*.tsx", "src/**/*.vue"]
}
ultimate
At this point, our uniapp project is built and is using the very familiarVSCodeThe project still uses theVue3，Typescript，ViteThe plug-ins that should be installed have also been installed, the mouse hover will give us a hint of the component, which greatly improves our development efficiency. ok, go to develop our project application ~~~~