집 > 기사 > 웹 프론트엔드 > 스캐폴딩을 사용하여 유니앱 프로젝트 생성

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

咔咔원래의: 2020-11-28 18:46:362520검색

"
작은 프로그램을 작성할 일이 없어서 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이 명령은 제거합니다.

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

어떤 사람들이 온라인에서 사용하는 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”

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

创建项目

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

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

看到下图提示即可。🎜

스캐폴딩을 사용하여 유니앱 프로젝트 생성 — 运行项目

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

스캐폴딩을 사용하여 유니앱 프로젝트 생성 — 프로젝트 디렉토리

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

스캐폴딩을 사용하여 유니앱 프로젝트 생성 — WeChat 개발자 도구는 프로젝트 디렉토리를 가져옵니다

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

스캐폴딩을 사용하여 유니앱 프로젝트 생성 — 작업 결과 그림

Summary

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

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

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

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

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

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：uni-app 애플릿 Laravel+jwt 권한 인증 시리즈다음 기사：uni-app 애플릿 Laravel+jwt 권한 인증 시리즈

관련 기사

더보기