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

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

前言

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


一、安装node.js

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


image.png


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


image.png


为什么要安装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


然后再次安装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

相关文章
|
2月前
|
XML Java 数据库
安卓项目:app注册/登录界面设计
本文介绍了如何设计一个Android应用的注册/登录界面,包括布局文件的创建、登录和注册逻辑的实现,以及运行效果的展示。
159 0
安卓项目:app注册/登录界面设计
|
4月前
|
Java 应用服务中间件 Windows
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
|
2月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
97 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
263 3
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
109 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
4月前
|
开发框架 .NET Docker
【Azure 应用服务】App Service .NET Core项目在Program.cs中自定义添加的logger.LogInformation,部署到App Service上后日志不显示Log Stream中的问题
【Azure 应用服务】App Service .NET Core项目在Program.cs中自定义添加的logger.LogInformation,部署到App Service上后日志不显示Log Stream中的问题
|
4月前
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
237 4
|
4月前
|
JavaScript Windows
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
|
4月前
|
Java 开发工具 git
【Azure 应用服务】本地Git部署Java项目到App Server,访问无效的原因
【Azure 应用服务】本地Git部署Java项目到App Server,访问无效的原因

热门文章

最新文章