vue-cli创建uni-app项目

1,092 阅读2分钟

uniapp官网使用vue-cli创建uni-app项目文档:uni-app官网 (dcloud.net.cn)

cli创建项目和HBuilderX可视化界面创建项目的区别:

  • cli创建的项目,是传统的node项目结构。工程代码在src目录下,编译器在项目下,编译结果在dist目录下。
  • HBuilderX可视化创建的项目,是一种免node开发概念。工程代码在项目目录下,编译器在HBuilderX目录下而不是项目下,编译结果在项目的unpackage目录下。

问题:

我按照官网第二步就遇到了问题,即运行vue create -p dcloudio/uni-preset-vue my-project,提示 ERROR Failed fetching remote preset dcloudio/uni-preset-vue: ERROR RequestError: getaddrinfo ENOTFOUND codeload.github.com 具体如下图:

image.png

解决办法:

一,环境安装

全局安装 vue-cli (如果已经安装好了,就无需此步骤)

npm install -g @vue/cli

二,创建uni-app

因为我们运行vue create -p dcloudio/uni-preset-vue my-project失败,使用我另取其他方法。

1,进入官网仓库uni-preset-vue: uni-app preset for vue (gitee.com)
2,创建uniapp的vue2和vue3版本步骤不一样,注意区分(下面分别给出vue2和vue3办法)

vue2版本

2.1,选中master分支,把代码下载下来,这里要注意下载保存的路径,稍后会用到。 image.png

2.2,如我下载在D盘中,路径为:D:\uni-preset-vue-master image.png

2.3,找到自己项目所存储的文件夹,打开命令窗口。(我这里是打开git bash) 输入下面命令

 // 自己对应一下,注意文件中的路径 \ 要变为 \\
 vue create -p 刚刚下载文件的路径 项目名
 vue create -p D:\\uni-preset-vue-master my-project

image.png

2.4, 选择模版,我这里选中默认回车 image.png

2.5,等待下载完成,看见文件夹了my-project项目,这个就是最终的vue-cli创建的uniapp vue2版的项目

image.png

image.png

2.6,运行项目

npx @dcloudio/uvm@latest
pnpm i
pnpm dev:h5

vue3版本

2.1,选中vite分支,下载代码

image.png

2.2,打开下载的代码,运行项目

image.png

npx @dcloudio/uvm@latest
pnpm i
pnpm dev:h5