스캐폴딩을 사용하여 유니앱 프로젝트 생성

"

작은 프로그램을 작성할 일이 없어서 uni-app 프레임워크를 사용하여 구현하고 싶습니다. 이 글에서는 생성 단계를 자세히 설명하겠습니다.

"

서문

이 글은 주로 작은 프로그램 프레임워크 uni-app의 생성을 소개합니다. 여러분도 초보자라면 카카의 리듬을 따라갈 수 있습니다.

1. node.js를 설치하세요

공식 홈페이지를 열어 동그라미 안의 버전을 설치하세요.

node.js 설치

설치가 완료된 후 node -V를 사용하여 설치가 성공했는지 확인하세요

node.js가 성공적으로 설치되었는지 확인하세요

node를 설치해야 하는 이유 .js? 질문이 많은 것 같아요. 백엔드를 작성하는 것과 같아서 이해가 안 돼요.

node.js 소프트웨어에는 npm이 내장되어 있기 때문에 Windows 시스템에 nodejs를 설치한 후 cmd를 열어 npm을 사용하여 리소스를 다운로드할 수 있습니다. 여기서는 Linux에 대해 이야기하지 않겠습니다!

npm, 전체 이름은 [노드 패키지 관리]이며 nodejs에 내장된 패키지 관리자이므로 node.js가 설치됩니다.

둘째, npm을 사용하여 vue scaffolding을 설치합니다

온라인에서 찾아보니 대부분의 첫 번째 단계는 npm install -g @vue/clinpm 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-cli 버전은 2.9인데 생성 시 사용해야 합니다. uni-app 프로젝트 생성 명령어이므로 상위 버전이 필요합니다.

이것도 카카가 밟은 구덩이이니 밟지 마세요!

이미 설치한 경우 npm uninstall -g vue -cli이 명령은 제거합니다.

"

그런 다음 npm install -g cnpm이 명령입니다.

”

어떤 사람들이 온라인에서 사용하는 Taobao 코드를 보세요npm install -g cnpm --registry=http://registry.npm.taobao.org 타오바오의 cnpm 설치.

🎜Kaka는 미러로 이해하지만 Kaka는 아티팩트가 있습니다. 이므로 타오바오를 사용하지 않고 바로 설치를 이용하시면 됩니다 🎜🎜아래 그림과 같이 설치 성공이 보입니다🎜🎜🎜🎜cnpm 설치 성공 시연🎜🎜🎜그런 다음 vue 스캐폴딩을 다시 설치하고 명령어를 실행해 보세요🎜

“

cnpm install -g @vue/cli cnpm install -g @vue/cli

”

再次安装@vue-cli

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

安装过程

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

新的版本

三、创建项目

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

“

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

”

@vue-cli를 다시 설치하세요

아래 사진은 설치 과정을 보여주며, 과정이 완료되지 않았습니다. 🎜

설치 과정 figcaption >

🎜설치가 완료된 후 vue -V를 사용하여 버전이 3 이상인 경우 4.5.9인지 확인하세요. 🎜

새 버전

🎜3. 프로젝트 만들기🎜🎜

🎜위의 무해한 설치 후 다음 단계는 창 기반 cmd에 입력하는 것입니다: 🎜🎜🎜"🎜🎜vue create -p dcloudio/uni-preset-vue 프로젝트 이름;🎜🎜"🎜🎜🎜프로젝트 만들기🎜

처음 생성할 때 기본값을 선택하고 Enter를 눌러 선택할 수 있다는 메시지가 표시됩니다.

프로젝트 만들기

프로젝트를 만들 때 다음과 같은 문제가 발생할지 모르겠지만 여기에 문제가 있습니다. 카카가 이 문제의 발생과 해결 방법을 적어드립니다.

만나시면 여기를 따라가세요. 없으면 건너뛰세요.

아래 사진은 설치 과정에서 발생한 오류를 보여줍니다.

오류 데모

해결책

관리자 모드를 사용하여 명령줄 열기

"

명령 실행npm cache clean -f캐시 지우기

"

명령줄 실행 관리자로서

캐시를 지운 후 최신 버전의 노드 도우미를 설치하세요:

“

npm install -g n npm install -g n

”

然后执行以下命令

“

npm install -g n --force

”

最后执行

“

npm install

”

然后执行以下命令

“

🎜npm install -g n --force🎜🎜”🎜🎜🎜最后执行🎜🎜🎜“🎜🎜npm 설치🎜🎜”🎜🎜🎜即可。🎜🎜然后新执行创建项目`🎜

“

vue create -p dcloudio/uni- 프리셋-vue 복권vue create -p dcloudio/uni-preset-vue lottery

”

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

创建项目

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

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

来到项目目录执行命令

“

npm run dev:mp-weixin

”

看到下图提示即可。

运行项目

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

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

创建项目

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

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

来到项目目录执行命令🎜🎜🎜“🎜🎜npm run dev:mp-weixin🎜”🎜

看到下图提示即可。🎜

运行项目

运行完毕项目目录中看到以下结构，会多流一个거리目录🎜

프로젝트 디렉토리

WeChat 개발자 도구로 가져와야 하는 프로젝트 경로는 아래 그림에서 동그라미로 표시된 부분입니다

WeChat 개발자 도구는 프로젝트 디렉토리를 가져옵니다

방법을 직접 학습하세요. 프로젝트를 WeChat 개발 플랫폼으로 가져오면 아래 그림은 Kaka의 작업을 보여줍니다

작업 결과 그림

Summary

위는 Vue의 스캐폴딩을 사용하는 Kaka의 전체 과정입니다. 유니앱 프로젝트를 생성합니다.

vue를 접한 것도 이번이 처음이고, 작은 프로그램을 개발하기 위해 uni-app을 접한 것도 처음이므로, 일부 명령어 실행과 글에 나온 문제 해결에 문제가 있다면, 지적해주셨으면 좋겠습니다.

이 제작 과정에서 Kaka는 다른 기술 기사도 단계별로 따라했습니다. 마지막에 요약된 기사도 저 같은 초보자에게 도움을 주기 위한 것입니다.

“

배움에 대한 끈기, 블로깅에 대한 끈기, 공유에 대한 끈기는 카카가 경력 이후부터 지켜온 신념입니다. 거대한 인터넷에 올라온 카카의 글이 여러분에게 조금이나마 도움이 되기를 바랍니다. 카카 다음호에서 만나요

”

위 내용은 스캐폴딩을 사용하여 유니앱 프로젝트 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!