使用脚手架创建uni-app项目

风强大大_3883

风强大大_3883

2020-11-28

2998人浏览

原创

“

闲来无事写写小程序,于是想用uni-app框架来实现,本文将会对创建步骤进行详解。

”

前言

本文主要针对小程序框架uni-app的创建展开介绍,如果你也是新手那就可以跟着咔咔的节奏一起来。

一、安装node.js

打开官网安装咔咔圈起来的版本。

image.png

node.js安装

安装完成后使用node -V来检验一下是否安装成功

image.png
验证node.js是否安装成功

为什么要安装node.js估计很多跟咔咔一样是写后端的有点理解不了。

因为node.js软件内置了npm,所以windows系统在安装nodejs后,打开cmd即可使用npm下载资源.linux在这里就暂时不说了哈!

npm,全称【node package management】,是nodejs内置的软件包管理器,这也就是为什么要安装node.js的原因。

二、使用npm安装vue脚手架

网上看了一下大多数第一步让执行命令npm install -g @vue/cli

但是安装的vue-cli是2.9版本的,但是在创建uni-app项目时需要使用create命令,所以需要更高的版本。

这里也是咔咔踩过的一个坑,你们就不踩了哈!

如果已经安装的可以使用npm uninstall -g vue-cli这个命令进行卸载。

“

然后执行npm install -g cnpm这个命令。

”

看网上有人使用的淘宝的npm install -g cnpm --registry=http://registry.npm.taobao.org 安装淘宝的cnpm。

咔咔理解的就是一个镜像,但是咔咔有神器所以就直接使用安装了,没有使用淘宝的。

安装成功就是下图的样子

image.png
cnpm安装成功演示

然后再次安装vue的脚手架,执行命令

“

cnpm install -g @vue/cli

”

再次安装@vue-cli

下图为安装过程,流程没有截完。

image.png
安装过程

安装完成后再使用vue -V查看一下版本就是4.5.9的了,只要大过3就可以了。

image.png
新的版本

三、创建项目

经过上面无伤大雅的安装之后,那么我们接下来就是在面向窗口cmd中输入:

“

vue create -p dcloudio/uni-preset-vue 项目名称;

”

创建项目

首次创建会提示,我们选择默认即可,回车即选。

image.png
创建项目

不知道你们在创建项目时会不会出现以下问题,但是咔咔这里出现了问题,咔咔将这个问题的出现和解决方案写下来。

如果有遇到的就跟这来,没遇到的直接跳过即可。

下图就是安装过程中出现的错误。

image.png
错误演示

解决方案

使用管理员模式打开命令行

“

执行命令npm cache clean -f清除缓存

”
image.png
管理员身份运行命令行

清除完缓存后,安装最新版本的Node helper:

“

npm install -g n

”

然后执行以下命令

“

npm install -g n --force

”

最后执行

“

npm install

”

即可。

然后重新执行创建项目`

“

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

”

看到下图咔咔圈到的就代表已经创建成功了。

image.png
创建项目

四、微信开发者工具中运行项目

项目创建成功后就需要运行了

来到项目目录执行命令

“

npm run dev:mp-weixin

”

看到下图提示即可。

image.png
运行项目

运行完毕之后你会在项目目录中看到以下结构,会多出一个dist目录

image.png
项目目录

需要给微信开发者工具导入的项目路径就是下图咔咔圈起来的地方

image.png
微信开发者工具导入项目目录

微信开发平台怎么导入项目自己研究哈,下图就是咔咔运行的展示图

image.png
运行结果图

总结

以上就是咔咔使用vue的脚手架创建uni-app项目的全过程。

初次接触vue更是初次接触uni-app来开发小程序,所以对于文章中部分命令的执行和问题的解决如果有什么不对的地方,望大家可以给提出来。

在这个创建的过程中咔咔也是根据其它技术文章一步一步操作的,最后总结出来的文章,也是为了给跟我一样同样的新手一点帮助。

“

坚持学习、坚持写博、坚持分享是咔咔从业以来一直所秉持的信念。希望在偌大互联网中咔咔的文章能带给你一丝丝帮助。我是咔咔,下期见。

”

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

80

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

60

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

200

10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

140

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

120

10

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

2026.10.22

80

15

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

2026.10.22

60

10

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

2026.10.22

80

25

Golangci-lint配置文件与规则设置
Golangci-lint配置文件与规则设置

本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。

2026.10.22

40

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习