首页 > 教程 > 文章 > Uni-APP > 正文

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

转载2021-06-18 20:41:55 0 175

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

前言

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

一、安装node.js

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

node.js安装

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

验证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

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

安装成功就是下图的样子

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目录

项目目录

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

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

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

运行结果图

总结

以上就是《使用脚手架创建uni-app项目》的详细内容,更多请关注 “设计者在线”其它相关文章!

申明:本站文章多来自互联网,如果侵犯了你的权益,请联系站长及时处理!谢谢!!

  • 相关标签:uni-app
  • 本文由 设计者在线 原创发布,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论 条评论
  • 专题推荐

    • 帝国系统

      简介:帝国CMS系统教程,开发技巧

    • JQUERY

      简介:春节好春节好春节好春节好春节好春节好春节好春节好

    • 不忘初心牢记使命教育活动

      简介:不忘初心牢记使命教育活动

    • 我们的生活

      简介:我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活

    • 明天会更好

      简介:明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好

    推荐视频教程
    视频分类
    [!--date--]Y-m-d[!--date--]