“闲来无事写写小程序，于是想用uni-app框架来实现，本文将会对创建步骤进行详解。
”
前言
本文主要针对小程序框架uni-app的创建展开介绍，如果你也是新手那就可以跟着咔咔的节奏一起来。
一、安装node.js
打开官网安装咔咔圈起来的版本。
安装完成后使用node -V来检验一下是否安装成功
为什么要安装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。
咔咔理解的就是一个镜像，但是咔咔有神器所以就直接使用安装了，没有使用淘宝的。
安装成功就是下图的样子
然后再次安装vue的脚手架，执行命令
“”
cnpm install -g @vue/cli
再次安装@vue-cli
下图为安装过程，流程没有截完。
安装完成后再使用vue -V查看一下版本就是4.5.9的了，只要大过3就可以了。
三、创建项目
经过上面无伤大雅的安装之后，那么我们接下来就是在面向窗口cmd中输入：
“”
vue create -p dcloudio/uni-preset-vue项目名称；
创建项目
首次创建会提示，我们选择默认即可，回车即选。
不知道你们在创建项目时会不会出现以下问题，但是咔咔这里出现了问题，咔咔将这个问题的出现和解决方案写下来。
如果有遇到的就跟这来，没遇到的直接跳过即可。
下图就是安装过程中出现的错误。
解决方案
使用管理员模式打开命令行
“执行命令
”npm cache clean -f清除缓存
清除完缓存后，安装最新版本的Node helper：
“”
npm install -g n
然后执行以下命令
“”
npm install -g n --force
最后执行
“”
npm install
即可。
然后重新执行创建项目`
“”
vue create -p dcloudio/uni-preset-vue lottery
看到下图咔咔圈到的就代表已经创建成功了。
四、微信开发者工具中运行项目
项目创建成功后就需要运行了
来到项目目录执行命令
“”
npm run dev:mp-weixin
看到下图提示即可。
运行完毕之后你会在项目目录中看到以下结构，会多出一个dist目录
需要给微信开发者工具导入的项目路径就是下图咔咔圈起来的地方
微信开发平台怎么导入项目自己研究哈，下图就是咔咔运行的展示图
总结
以上就是咔咔使用vue的脚手架创建uni-app项目的全过程。
初次接触vue更是初次接触uni-app来开发小程序，所以对于文章中部分命令的执行和问题的解决如果有什么不对的地方，望大家可以给提出来。
在这个创建的过程中咔咔也是根据其它技术文章一步一步操作的，最后总结出来的文章，也是为了给跟我一样同样的新手一点帮助。
“坚持学习、坚持写博、坚持分享是咔咔从业以来一直所秉持的信念。希望在偌大互联网中咔咔的文章能带给你一丝丝帮助。我是咔咔，下期见。
”
以上是使用脚手架创建uni-app项目的详细内容。更多信息请关注PHP中文网其他相关文章！
VSCode中如何开发uni-app？（教程分享）May 13, 2022 pm 08:11 PMVSCode中如何开发uni-app？下面本篇文章给大家分享一下VSCode中开发uni-app的教程，这可能是最好、最详细的教程了。快来看看！
聊聊如何利用uniapp开发一个贪吃蛇小游戏！May 20, 2022 pm 07:56 PM如何利用uniapp开发一个贪吃蛇小游戏？下面本篇文章就手把手带大家在uniapp中实现贪吃蛇小游戏，希望对大家有所帮助！
uni-app vue3接口请求怎么封装May 11, 2023 pm 07:28 PMuni-app接口，全局方法封装1.在根目录创建一个api文件，在api文件夹中创建api.js，baseUrl.js和http.js文件2.baseUrl.js文件代码exportdefault"https://XXXX.test03.qcw800.com/api/"3.http.js文件代码exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method
手把手带你开发一个uni-app日历插件（并发布）Jun 30, 2022 pm 08:13 PM本篇文章手把手带大家开发一个uni-app日历插件，介绍下一款日历插件是如何从开发到发布的，希望对大家有所帮助！
实例讲解uniapp实现多选框的全选功能Jun 22, 2022 am 11:57 AM本篇文章给大家带来了关于uniapp的相关知识，其中主要整理了实现多选框的全选功能的相关问题，无法实现全选的原因是动态修改checkbox的checked字段时，界面上的状态能够实时变化，但是无法触发checkbox-group的change事件，下面一起来看一下，希望对大家有帮助。
聊聊uniapp的scroll-view下拉加载Jul 14, 2022 pm 09:07 PMuniapp怎么实现scroll-view下拉加载？下面本篇文章聊聊uniapp微信小程序scroll-view的下拉加载，希望对大家有所帮助！
实例详解uniapp如何实现电话录音功能（附代码）Jan 05, 2023 pm 04:41 PM本篇文章给大家带来了关于uniapp的相关知识，其中主要介绍了怎么用uniapp实现拨打电话并且还能同步录音的功能，感兴趣的朋友一起来看一下吧，希望对大家有帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
禅工作室 13.0.1
功能强大的PHP集成开发环境
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
记事本++7.3.1
好用且免费的代码编辑器
Atom编辑器mac版下载
最流行的的开源编辑器
